refactor: use native components for stats item

medama-io · Aug 19, 2024 · 533badd · 533badd
1 parent b94a394
commit 533badd
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 25 deletions.
diff --git a/dashboard/app/components/stats/StatsItem.module.css b/dashboard/app/components/stats/StatsItem.module.css
@@ -4,6 +4,8 @@
 	padding: 7px 16px;
 	width: calc(100% - 16px);
 
+	background-color: transparent;
+	border: none;
 	border-radius: 8px;
 
 	cursor: pointer;
@@ -30,6 +32,22 @@
 	border: 1px solid var(--violet);
 }
 
+.label {
+	font-size: 14px;
+	text-overflow: ellipsis;
+	user-select: text;
+}
+
+.percentage {
+	font-size: 12px;
+	color: var(--text-muted);
+	margin-right: 4px;
+
+	@media (--lt-xs) {
+		display: none;
+	}
+}
+
 .external {
 	svg {
 		margin-bottom: -2px;
@@ -41,4 +59,8 @@
 	&[data-hidden="true"] {
 		display: none;
 	}
+
+	@media (--lt-xs) {
+		display: none;
+	}
 }
diff --git a/dashboard/app/components/stats/StatsItem.tsx b/dashboard/app/components/stats/StatsItem.tsx
@@ -1,8 +1,8 @@
-import { Group, Text, UnstyledButton } from '@mantine/core';
 import React, { useMemo } from 'react';
 import isFQDN from 'validator/lib/isFQDN';
 
 import { IconExternal } from '@/components/icons/external';
+import { Group } from '@/components/layout/Flex';
 import { useFilter } from '@/hooks/use-filter';
 import { useHover } from '@/hooks/use-hover';
 
@@ -50,54 +50,46 @@ const StatsItem = ({
 	};
 
 	return (
-		<UnstyledButton
+		<button
 			className={classes.item}
+			type="button"
 			onClick={handleFilter}
 			aria-label={`Filter by ${label}`}
 			ref={ref}
 		>
-			<Group justify="space-between" pb={6} wrap="nowrap">
-				<Group gap="xs" style={{ overflow: 'hidden' }}>
-					<Text fz={14} truncate style={{ userSelect: 'text' }}>
-						{label}
-					</Text>
+			<Group style={{ paddingBottom: 6, flexWrap: 'nowrap' }}>
+				<Group style={{ overflow: 'hidden', gap: 8 }}>
+					<p className={classes.label}>{label}</p>
 					{tab === 'Referrers' && (
-						<UnstyledButton
+						<a
 							className={classes.external}
-							component="a"
+							aria-label={`Visit ${label}`}
 							href={`https://${label}`}
 							target="_blank"
 							rel="noreferrer noopener"
 							data-hidden={!isFQDN(label)}
 							onClick={(event) => event.stopPropagation()}
-							visibleFrom="xs"
 						>
 							<IconExternal />
-						</UnstyledButton>
+						</a>
 					)}
 				</Group>
-				<Group align="center" gap="xs" wrap="nowrap">
-					<Text
-						component="span"
-						fz={12}
-						c="gray"
-						mr={4}
+				<Group style={{ gap: 8, flexWrap: 'nowrap' }}>
+					<span
+						className={classes.percentage}
 						data-active={hovered ? 'true' : undefined}
-						visibleFrom="xs"
 					>
 						{(percentage * 100).toFixed(1)}%
-					</Text>
-					<Text fw={600} fz={14}>
-						{formattedValue}
-					</Text>
+					</span>
+					<p style={{ fontWeight: 600, fontSize: 14 }}>{formattedValue}</p>
 				</Group>
 			</Group>
 			<div
 				className={classes.bar}
 				style={{ width: `${Math.min(percentage * 100, 100)}%` }}
 				aria-hidden="true"
 			/>
-		</UnstyledButton>
+		</button>
 	);
 };
 

diff --git a/dashboard/app/routes/$hostname._index.tsx b/dashboard/app/routes/$hostname._index.tsx
@@ -92,8 +92,6 @@ export default function Index() {
 		},
 	];
 
-	console.log(stats.properties);
-
 	return (
 		<>
 			<SimpleGrid cols={{ base: 1, lg: 2 }} className={TabClasses.grid}>