status-im/nimbus-gui
2
0
Fork 0
mirror of https://github.com/status-im/nimbus-gui.git synced 2025-01-21 00:40:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix file structure and style SyncStatus Cards

Browse Source
This commit is contained in:
Hristo Nedelkov 2023-09-21 09:35:41 +03:00
parent 43cc1772a4
commit 0eebbff4bf
5 changed files with 18 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/pages/Dashboard/SyncStatusCards/ConsensusClientCard.tsx
View File

@ -9,7 +9,6 @@ import Icon from '../../../components/General/Icon'
import StandardGauge from '../../../components/Charts/StandardGauge'
type ConsensusCardProps = {
title: string
value: number
total: number
isTop?: boolean
@ -25,10 +24,10 @@ const data = [
id: 'storage',
label: 'Free',
value: 200000,
color: '#E7EAEE',
color: '#E7EAEE',
},
]
const ConsensusCard = ({ title, value, total, isTop }: ConsensusCardProps) => {
const ConsensusCard = ({ value, total, isTop }: ConsensusCardProps) => {
const style: CSSProperties = {}
if (isTop === true) {
@ -44,9 +43,19 @@ const ConsensusCard = ({ title, value, total, isTop }: ConsensusCardProps) => {
<YStack>
<Stack style={{ minHeight: '90px', padding: '12px 16px' }}>
<Text size={15} weight={'semibold'} color="#647084">
{title}
Consensus Client
</Text>
<XStack style={{ justifyContent: 'space-between', alignItems: 'center' }}>
<Icon src="./icons/vector.svg" height={30} width={60} />
<Stack
style={{
height: '56px',
width: '56px',
}}
>
<StandardGauge data={data} />
</Stack>
</XStack>
</Stack>
<Separator borderColor={'#e3e3e3'} />
<XStack space={'$3'} style={{ padding: '12px 16px' }}>

5
src/pages/Dashboard/SyncStatusCards/ExecutionClientCard.tsx
View File

@ -9,7 +9,6 @@ import Icon from '../../../components/General/Icon'
import StandardGauge from '../../../components/Charts/StandardGauge'
type ExecutionClientCardProps = {
title: string
value: number
total: number
isTop?: boolean
@ -28,7 +27,7 @@ const data = [
color: '#E7EAEE',
},
]
const ExecutionClientCard = ({ title, value, total, isTop }: ExecutionClientCardProps) => {
const ExecutionClientCard = ({ value, total, isTop }: ExecutionClientCardProps) => {
const style: CSSProperties = {}
if (isTop === true) {
@ -44,7 +43,7 @@ const ExecutionClientCard = ({ title, value, total, isTop }: ExecutionClientCard
<YStack>
<Stack style={{ minHeight: '90px', padding: '12px 16px' }}>
<Text size={15} weight={'semibold'} color="#647084">
{title}
Execution Client
</Text>
<XStack style={{ justifyContent: 'space-between', alignItems: 'center' }}>
<Icon src="./icons/vector.svg" height={46} width={93} />

51
src/pages/Dashboard/SyncStatusCards/SyncCardContent.stories.ts
View File

@ -1,51 +0,0 @@
import type { Meta, StoryObj } from '@storybook/react'
import SyncCardContent from './ExecutionClientCard'
const meta = {
title: 'Dashboard/SyncCardContent',
component: SyncCardContent,
parameters: {
layout: 'centered',
},
tags: ['autodocs'],
} satisfies Meta<typeof SyncCardContent>
export default meta
type Story = StoryObj<typeof meta>
export const ExecutionClient: Story = {
args: { title: 'Execution Client', value: 123.424, total: 170, isTop: true },
}
export const ConsensusClient: Story = {
args: { title: 'Consensus Client', value: 123.424, total: 170, isTop: false },
}
export const WithoutTitle: Story = {
args: { title: '', value: 123.424, total: 170 },
}
export const WithZeroValue: Story = {
args: { title: 'Consensus Client', value: 0, total: 170 },
}
export const WithZeroTotal: Story = {
args: { title: 'Consensus Client', value: 123.424, total: 0 },
}
export const WithZeroValueAndTotal: Story = {
args: { title: 'Consensus Client', value: 0, total: 0 },
}
export const WithoutValues: Story = {
args: { title: '', value: 0, total: 0 },
}
export const WithTopBorders: Story = {
args: { title: '', value: 0, total: 0, isTop: true },
}
export const WithBottomBorders: Story = {
args: { title: '', value: 0, total: 0, isTop: false },
}

19
src/pages/Dashboard/SyncStatusCards/SyncStatusCard.stories.ts
View File

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

4
src/pages/Dashboard/SyncStatusCards/SyncStatusCard.tsx
View File

@ -15,9 +15,9 @@ const SyncStatusCard = () => {
</Text>
</Stack>
<YStack>
<ConsensusCard title={'Execution Client'} value={123.424} total={170} isTop={true} />
<ExecutionClientCard value={123.424} total={170} isTop={false} />
<Separator borderColor={'#e3e3e3'} />
<ExecutionClientCard title={'Consensus Client'} value={123.424} total={170} isTop={false} />
<ConsensusCard value={123.424} total={170} isTop={true} />
</YStack>
</YStack>
</DashboardCardWrapper>