mirror of
https://github.com/oceanprotocol/market.git
synced 2024-12-02 05:57:29 +01:00
function preferences ui
This commit is contained in:
parent
91afd8ed39
commit
9d41a443bf
@ -135,9 +135,8 @@
|
||||
/* Size modifiers */
|
||||
|
||||
.small {
|
||||
composes: input;
|
||||
font-size: var(--font-size-small);
|
||||
min-height: 32px;
|
||||
min-height: 34px;
|
||||
padding: calc(var(--spacer) / 4);
|
||||
}
|
||||
|
||||
@ -146,8 +145,8 @@
|
||||
}
|
||||
|
||||
.selectSmall {
|
||||
composes: select;
|
||||
height: 32px;
|
||||
composes: small;
|
||||
height: 34px;
|
||||
padding-right: 2rem;
|
||||
|
||||
/* custom arrow */
|
||||
|
@ -11,12 +11,16 @@ const DefaultInput = (props: InputProps) => (
|
||||
)
|
||||
|
||||
export default function InputElement(props: InputProps): ReactElement {
|
||||
const { type, options, name, prefix, postfix } = props
|
||||
const { type, options, name, prefix, postfix, small } = props
|
||||
|
||||
switch (type) {
|
||||
case 'select':
|
||||
return (
|
||||
<select id={name} className={styles.select} {...props}>
|
||||
<select
|
||||
id={name}
|
||||
className={`${styles.select} ${small && styles.selectSmall}`}
|
||||
{...props}
|
||||
>
|
||||
<option value="">---</option>
|
||||
{options &&
|
||||
options
|
||||
|
@ -37,6 +37,8 @@ export interface InputProps {
|
||||
prefix?: string
|
||||
postfix?: string
|
||||
step?: string
|
||||
defaultChecked?: boolean
|
||||
small?: boolean
|
||||
}
|
||||
|
||||
export default function Input(props: Partial<InputProps>): ReactElement {
|
||||
|
@ -6,6 +6,7 @@ import styles from './Menu.module.css'
|
||||
import { useSiteMetadata } from '../../hooks/useSiteMetadata'
|
||||
import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo.svg'
|
||||
import Container from '../atoms/Container'
|
||||
import UserPreferences from './UserPreferences'
|
||||
|
||||
const Wallet = loadable(() => import('./Wallet'))
|
||||
|
||||
@ -49,6 +50,9 @@ export default function Menu(): ReactElement {
|
||||
<MenuLink item={item} />
|
||||
</li>
|
||||
))}
|
||||
<li>
|
||||
<UserPreferences />
|
||||
</li>
|
||||
</ul>
|
||||
</Container>
|
||||
</nav>
|
||||
|
38
src/components/molecules/UserPreferences/Preferences.tsx
Normal file
38
src/components/molecules/UserPreferences/Preferences.tsx
Normal file
@ -0,0 +1,38 @@
|
||||
import React, { ReactElement, ChangeEvent } from 'react'
|
||||
import { useUserPreferences } from '../../../providers/UserPreferences'
|
||||
import Input from '../../atoms/Input'
|
||||
import styles from './Preferencs.module.css'
|
||||
|
||||
export default function Preferences(): ReactElement {
|
||||
const { debug, setDebug, currency, setCurrency } = useUserPreferences()
|
||||
|
||||
return (
|
||||
<ul className={styles.preferences}>
|
||||
<li>
|
||||
<Input
|
||||
name="debug"
|
||||
label="Debug Mode"
|
||||
help="Activate to show geeky debug information in some places throughout the UI."
|
||||
type="checkbox"
|
||||
options={['Enable Debug Mode']}
|
||||
defaultChecked={debug === true}
|
||||
onChange={() => setDebug(!debug)}
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<Input
|
||||
name="currency"
|
||||
label="Currency"
|
||||
help="Select your preferred currency."
|
||||
type="select"
|
||||
options={['eur', 'usd']}
|
||||
value={currency}
|
||||
onChange={(e: ChangeEvent<HTMLSelectElement>) =>
|
||||
setCurrency(e.target.value)
|
||||
}
|
||||
small
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
)
|
||||
}
|
@ -0,0 +1,3 @@
|
||||
.preferences {
|
||||
padding: calc(var(--spacer) / 2);
|
||||
}
|
11
src/components/molecules/UserPreferences/index.tsx
Normal file
11
src/components/molecules/UserPreferences/index.tsx
Normal file
@ -0,0 +1,11 @@
|
||||
import React, { ReactElement } from 'react'
|
||||
import Tooltip from '../../atoms/Tooltip'
|
||||
import Preferences from './Preferences'
|
||||
|
||||
export default function UserPreferences(): ReactElement {
|
||||
return (
|
||||
<Tooltip content={<Preferences />} trigger="click focus">
|
||||
Settings
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
Loading…
Reference in New Issue
Block a user