yarn format
This commit is contained in:
parent
6b5eedd89c
commit
a55defcdfd
|
@ -18,14 +18,22 @@ const IconButtonWithDot = ({
|
|||
isDotOn,
|
||||
selected,
|
||||
disabled,
|
||||
id
|
||||
id,
|
||||
}: IconButtonWithDotProps) => {
|
||||
const dispatch = useDispatch()
|
||||
const onClickHandler = (id: string) => { if (!disabled) dispatch(toggleButtonSelection(id)) }
|
||||
const onClickHandler = (id: string) => {
|
||||
if (!disabled) dispatch(toggleButtonSelection(id))
|
||||
}
|
||||
|
||||
return (
|
||||
<Stack style={{ position: 'relative', display: 'inline-block' }}>
|
||||
<IconButton icon={iconEl} variant={variant} selected={selected} disabled={disabled} onPress={() => onClickHandler(id)} />
|
||||
<IconButton
|
||||
icon={iconEl}
|
||||
variant={variant}
|
||||
selected={selected}
|
||||
disabled={disabled}
|
||||
onPress={() => onClickHandler(id)}
|
||||
/>
|
||||
{isDotOn && (
|
||||
<Stack
|
||||
style={{
|
||||
|
|
|
@ -17,18 +17,27 @@ const LeftSidebar = () => {
|
|||
|
||||
const renderIcon = (id: string) => {
|
||||
switch (id) {
|
||||
case 'dashboard': return <DashboardIcon size={20} />;
|
||||
case 'speed': return <SpeedIcon size={20} />;
|
||||
case 'chart': return <ChartIcon size={20} />;
|
||||
case 'heart': return <HeartIcon size={20} />;
|
||||
case 'codeBlock': return <CodeBlockIcon size={20} />;
|
||||
case 'communities': return <CommunitiesIcon size={20} />;
|
||||
case 'activityCenter': return <ActivityCenterIcon size={20} />;
|
||||
case 'settings': return <SettingsIcon size={20} />;
|
||||
default: return null;
|
||||
case 'dashboard':
|
||||
return <DashboardIcon size={20} />
|
||||
case 'speed':
|
||||
return <SpeedIcon size={20} />
|
||||
case 'chart':
|
||||
return <ChartIcon size={20} />
|
||||
case 'heart':
|
||||
return <HeartIcon size={20} />
|
||||
case 'codeBlock':
|
||||
return <CodeBlockIcon size={20} />
|
||||
case 'communities':
|
||||
return <CommunitiesIcon size={20} />
|
||||
case 'activityCenter':
|
||||
return <ActivityCenterIcon size={20} />
|
||||
case 'settings':
|
||||
return <SettingsIcon size={20} />
|
||||
default:
|
||||
return null
|
||||
}
|
||||
|
||||
}; return (
|
||||
}
|
||||
return (
|
||||
<YStack
|
||||
space={'$4'}
|
||||
minHeight={'100vh'}
|
||||
|
@ -44,7 +53,7 @@ const LeftSidebar = () => {
|
|||
<IconButtonWithDot
|
||||
key={button.id}
|
||||
iconEl={renderIcon(button.id)}
|
||||
variant={button.isDisabled ? "outline" : "ghost"}
|
||||
variant={button.isDisabled ? 'outline' : 'ghost'}
|
||||
isDotOn={button.isDotOn}
|
||||
selected={button.isSelected}
|
||||
disabled={button.isDisabled}
|
||||
|
@ -52,7 +61,7 @@ const LeftSidebar = () => {
|
|||
/>
|
||||
))}
|
||||
</YStack>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
export default LeftSidebar
|
||||
|
|
|
@ -48,8 +48,12 @@ const RightSidebar = () => {
|
|||
<AddCard padding={'0 2vw'} />
|
||||
</XStack>
|
||||
<XStack justifyContent={'space-between'} width={'85%'}>
|
||||
<Text size={19} weight={'semibold'}>Validators</Text>
|
||||
<Text size={19} weight={'semibold'}>{countOfValidators}</Text>
|
||||
<Text size={19} weight={'semibold'}>
|
||||
Validators
|
||||
</Text>
|
||||
<Text size={19} weight={'semibold'}>
|
||||
{countOfValidators}
|
||||
</Text>
|
||||
</XStack>
|
||||
<Tabs defaultValue="active">
|
||||
<Tabs.List size={32}>
|
||||
|
|
|
@ -15,5 +15,5 @@ export default meta
|
|||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Default: Story = {
|
||||
args: {value: 'Search value', },
|
||||
args: { value: 'Search value' },
|
||||
}
|
||||
|
|
|
@ -1,12 +1,11 @@
|
|||
import { Input } from "@status-im/components"
|
||||
import { SearchIcon } from "@status-im/icons"
|
||||
import { Input } from '@status-im/components'
|
||||
import { SearchIcon } from '@status-im/icons'
|
||||
|
||||
type InputSearchProps = {
|
||||
value: string
|
||||
setValue: (value: string) => void
|
||||
}
|
||||
const InputSearch = ({ value, setValue }: InputSearchProps) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Input
|
||||
|
|
|
@ -15,5 +15,11 @@ export default meta
|
|||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Default: Story = {
|
||||
args: { avatarKey: '37880sfsef38fsb', name: 'Validator 1', selected: true, isAvatarChipIncluded: true, isVerified: true },
|
||||
args: {
|
||||
avatarKey: '37880sfsef38fsb',
|
||||
name: 'Validator 1',
|
||||
selected: true,
|
||||
isAvatarChipIncluded: true,
|
||||
isVerified: true,
|
||||
},
|
||||
}
|
||||
|
|
|
@ -5,7 +5,6 @@ import { useState, useEffect } from 'react'
|
|||
import { useDispatch } from 'react-redux'
|
||||
import { setCountOfValidators } from '../../../redux/RightSidebar/slice'
|
||||
|
||||
|
||||
const ValidatorsList = () => {
|
||||
const dispatch = useDispatch()
|
||||
|
||||
|
|
|
@ -1,25 +1,23 @@
|
|||
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
|
||||
import { createSlice, PayloadAction } from '@reduxjs/toolkit'
|
||||
|
||||
type RightSidebarStateType = {
|
||||
countOfValidators: number;
|
||||
};
|
||||
countOfValidators: number
|
||||
}
|
||||
|
||||
const initialState: RightSidebarStateType = {
|
||||
countOfValidators: 0,
|
||||
};
|
||||
}
|
||||
|
||||
const rightSidebarSlice = createSlice({
|
||||
name: 'rightSidebar',
|
||||
initialState,
|
||||
reducers: {
|
||||
setCountOfValidators: (state, action: PayloadAction<number>) => {
|
||||
state.countOfValidators = action.payload;
|
||||
state.countOfValidators = action.payload
|
||||
},
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
export const {
|
||||
setCountOfValidators,
|
||||
} = rightSidebarSlice.actions;
|
||||
export const { setCountOfValidators } = rightSidebarSlice.actions
|
||||
|
||||
export default rightSidebarSlice.reducer;
|
||||
export default rightSidebarSlice.reducer
|
||||
|
|
|
@ -15,7 +15,7 @@ const store = configureStore({
|
|||
theme: themeReducer,
|
||||
keyGeneration: keyGenerationReducer,
|
||||
leftSidebar: leftSidebarReducer,
|
||||
rightSidebar: rightSidebarReducer
|
||||
rightSidebar: rightSidebarReducer,
|
||||
},
|
||||
})
|
||||
|
||||
|
|
Loading…
Reference in New Issue