diff --git a/src/components/dashboard-section-divider.tsx b/src/components/dashboard-section-divider.tsx new file mode 100644 index 00000000..5738d917 --- /dev/null +++ b/src/components/dashboard-section-divider.tsx @@ -0,0 +1,25 @@ +import { Divider, Grid, Text } from '@mantine/core'; + +interface DashboardSectionsDividerProps { + label: string; +} +const DashboardSectionsDivider = ({ label }: DashboardSectionsDividerProps) => { + return ( + <> + + + + {label} + + + } + /> + + + ); +}; + +export default DashboardSectionsDivider; diff --git a/src/features/metrics/pages/dashboard.page.tsx b/src/features/metrics/pages/dashboard.page.tsx index 2f93e0e4..112ac603 100644 --- a/src/features/metrics/pages/dashboard.page.tsx +++ b/src/features/metrics/pages/dashboard.page.tsx @@ -1,5 +1,6 @@ import { useShallow } from 'zustand/react/shallow'; +import DashboardSectionsDivider from '@/components/dashboard-section-divider'; import PageWrapper from '@/components/page-wrapper'; import SystemInformationWidget from '@/components/system-information-widget'; import CpusBarChart from '@/features/metrics/components/cpus/cpus.bar-charts'; @@ -16,26 +17,7 @@ import SwapStatsRing from '@/features/metrics/components/swap/swap.stats-ring'; import useDisksSelectors from '@/features/metrics/stores/disk.store'; import useSystemStoreSelectors from '@/features/metrics/stores/system.store'; import useRandomGreeting from '@/hooks/useRandomGreeting'; -import { Divider, Grid, Text } from '@mantine/core'; - -// const StatsRings = () => { -// return ( -// <> -// -// -// -// -// -// -// -// -// -// -// -// -// -// ); -// }; +import { Box, Center, Divider, Grid, Text } from '@mantine/core'; const MemorySection = () => { return ( @@ -79,6 +61,10 @@ const NetworksSection = () => { const DiskSection = () => { const disks = useDisksSelectors.use.disks(); + if (disks.length === 0) { + return ; + } + return ( <> {disks.map((disk) => ( @@ -90,25 +76,24 @@ const DiskSection = () => { ); }; -interface DashboardSectionsDividerProps { - label: string; +const TempsSection = () => { + const temps = []; + + if (temps.length === 0) { + return ; + } +}; + +interface DashboardNoDataAvailableProps { + message: string; } -const DashboardSectionsDivider = ({ label }: DashboardSectionsDividerProps) => { +const DashboardNoDataAvailable = ({ message }: DashboardNoDataAvailableProps) => { return ( - <> - - - - {label} - - - } - /> - - +
+ + {message} + +
); }; @@ -126,8 +111,9 @@ const DashboardPage = () => { - - + + + {/* */} );