status-im
/
nimbus-gui
mirror of https://github.com/status-im/nimbus-gui.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

yarn format

This commit is contained in:
Hristo Nedelkov 2023-09-29 20:44:02 +03:00
parent 6b5eedd89c
commit a55defcdfd
10 changed files with 126 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
src/pages/Dashboard/IconButtonWithDot.tsx
View File

@ -4,44 +4,52 @@ import { Stack } from 'tamagui'
import { toggleButtonSelection } from '../../redux/Sidebars/slice'
type IconButtonWithDotProps = {
iconEl: any
variant: 'ghost' | 'outline'
isDotOn: boolean
selected?: boolean
disabled?: boolean
id: string
iconEl: any
variant: 'ghost' | 'outline'
isDotOn: boolean
selected?: boolean
disabled?: boolean
id: string
}
const IconButtonWithDot = ({
iconEl,
variant,
isDotOn,
selected,
disabled,
id
iconEl,
variant,
isDotOn,
selected,
disabled,
id,
}: IconButtonWithDotProps) => {
const dispatch = useDispatch()
const onClickHandler = (id: string) => { if (!disabled) dispatch(toggleButtonSelection(id)) }
const dispatch = useDispatch()
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)} />
{isDotOn && (
<Stack
style={{
position: 'absolute',
right: 7,
top: 5,
width: '9px',
height: '9px',
borderRadius: '50%',
backgroundColor: '#1992D7',
border: '1.5px solid #fff',
}}
/>
)}
</Stack>
)
return (
<Stack style={{ position: 'relative', display: 'inline-block' }}>
<IconButton
icon={iconEl}
variant={variant}
selected={selected}
disabled={disabled}
onPress={() => onClickHandler(id)}
/>
{isDotOn && (
<Stack
style={{
position: 'absolute',
right: 7,
top: 5,
width: '9px',
height: '9px',
borderRadius: '50%',
backgroundColor: '#1992D7',
border: '1.5px solid #fff',
}}
/>
)}
</Stack>
)
}
export default IconButtonWithDot

35
src/pages/Dashboard/LeftSidebar.tsx
View File

@ -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

8
src/pages/Dashboard/RightSideBar/RightSidebar.tsx
View File

@ -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}>

2
src/pages/Dashboard/RightSideBar/SearchInput.stories.tsx
View File

@ -15,5 +15,5 @@ export default meta
type Story = StoryObj<typeof meta>
export const Default: Story = {
args: {value: 'Search value', },
args: { value: 'Search value' },
}

43
src/pages/Dashboard/RightSideBar/SearchInput.tsx
View File

@ -1,27 +1,26 @@
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
value: string
setValue: (value: string) => void
}
const InputSearch = ({ value, setValue }: InputSearchProps) => {
return (
<>
<Input
placeholder="Search Validators"
value={value}
onChangeText={setValue}
icon={<SearchIcon size={20} />}
onClear={() => setValue('')}
size={40}
// button={{
// label: 'Confirm',
// onPress: () => alert('Confirmed!'),
// }}
/>
</>
)
return (
<>
<Input
placeholder="Search Validators"
value={value}
onChangeText={setValue}
icon={<SearchIcon size={20} />}
onClear={() => setValue('')}
size={40}
// button={{
// label: 'Confirm',
// onPress: () => alert('Confirmed!'),
// }}
/>
</>
)
}
export default InputSearch
export default InputSearch

20
src/pages/Dashboard/RightSideBar/ValidatorListItem.stories.tsx
View File

@ -3,17 +3,23 @@ import type { Meta, StoryObj } from '@storybook/react'
import ValidatorListItem from './ValidatorListItem'
const meta = {
title: 'Dashboard/ValidatorListItem',
component: ValidatorListItem,
parameters: {
layout: 'centered',
},
tags: ['autodocs'],
title: 'Dashboard/ValidatorListItem',
component: ValidatorListItem,
parameters: {
layout: 'centered',
},
tags: ['autodocs'],
} satisfies Meta<typeof ValidatorListItem>
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,
},
}

14
src/pages/Dashboard/RightSideBar/ValidatorsList.stories.tsx
View File

@ -3,17 +3,17 @@ import type { Meta, StoryObj } from '@storybook/react'
import ValidatorsList from './ValidatorsList'
const meta = {
title: 'Dashboard/ValidatorsList',
component: ValidatorsList,
parameters: {
layout: 'centered',
},
tags: ['autodocs'],
title: 'Dashboard/ValidatorsList',
component: ValidatorsList,
parameters: {
layout: 'centered',
},
tags: ['autodocs'],
} satisfies Meta<typeof ValidatorsList>
export default meta
type Story = StoryObj<typeof meta>
export const Default: Story = {
args: {},
args: {},
}

1
src/pages/Dashboard/RightSideBar/ValidatorsList.tsx
View File

@ -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()

30
src/redux/RightSidebar/slice.ts
View File

@ -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,
};
countOfValidators: 0,
}
const rightSidebarSlice = createSlice({
name: 'rightSidebar',
initialState,
reducers: {
setCountOfValidators: (state, action: PayloadAction<number>) => {
state.countOfValidators = action.payload;
},
name: 'rightSidebar',
initialState,
reducers: {
setCountOfValidators: (state, action: PayloadAction<number>) => {
state.countOfValidators = action.payload
},
});
},
})
export const {
setCountOfValidators,
} = rightSidebarSlice.actions;
export const { setCountOfValidators } = rightSidebarSlice.actions
export default rightSidebarSlice.reducer;
export default rightSidebarSlice.reducer

2
src/redux/store.ts
View File

@ -15,7 +15,7 @@ const store = configureStore({
theme: themeReducer,
keyGeneration: keyGenerationReducer,
leftSidebar: leftSidebarReducer,
rightSidebar: rightSidebarReducer
rightSidebar: rightSidebarReducer,
},
})