Refactor card components to standardize density and layout

- Updated Card component styles across multiple files to introduce a `density` prop, allowing for compact layouts and improved visual consistency. - Removed unnecessary padding from card components to enhance alignment and create a more cohesive appearance throughout the application.
2026-03-31 20:15:30 +07:00
parent 31d0db57f1
commit c8724268e9
6 changed files with 18 additions and 8 deletions
@@ -19,7 +19,7 @@
 	} = $props();
 </script>

-<Card.Root class={cn('gap-0 py-0 overflow-hidden rounded-lg border border-border shadow-sm', className)}>
+<Card.Root density="compact" class={cn('overflow-hidden rounded-lg border border-border shadow-sm', className)}>
 	{#if title}
 		<Card.Header class="border-b border-border bg-muted/40 px-4 py-3">
 			<Card.Title class="text-base font-semibold">{title}</Card.Title>
@@ -140,7 +140,7 @@
 </script>

 <div class="mb-6 grid gap-4 lg:grid-cols-2">
-	<Card.Root class="gap-0 py-0 overflow-hidden rounded-lg border border-border shadow-sm">
+	<Card.Root density="compact" class="overflow-hidden rounded-lg border border-border shadow-sm">
 		<Card.Header class="border-b border-border bg-muted/40 px-4 py-3">
 			<div class="flex items-center gap-2">
 				<div class="flex size-9 items-center justify-center rounded-lg bg-muted text-muted-foreground">
@@ -156,7 +156,7 @@
 			<canvas bind:this={elDonut} class="max-h-full w-full"></canvas>
 		</Card.Content>
 	</Card.Root>
-	<Card.Root class="gap-0 py-0 overflow-hidden rounded-lg border border-border shadow-sm">
+	<Card.Root density="compact" class="overflow-hidden rounded-lg border border-border shadow-sm">
 		<Card.Header class="border-b border-border bg-muted/40 px-4 py-3">
 			<div class="flex items-center gap-2">
 				<div class="flex size-9 items-center justify-center rounded-lg bg-muted text-muted-foreground">
@@ -26,7 +26,7 @@
 	} = $props();
 </script>

-<Card.Root class={cn('gap-0 py-0 border-l-4 shadow-sm', kpiAccent[accent].border, className)}>
+<Card.Root class={cn('border-l-4 shadow-sm', kpiAccent[accent].border, className)}>
 	<Card.Header class={cn(headerClass)}>
 		<div class="flex gap-3">
 			<div
@@ -25,7 +25,7 @@
 	} = $props();
 </script>

-<Card.Root class={cn('gap-0 py-0 border-l-4 shadow-sm transition-colors', kpiAccent[accent].border, className)}>
+<Card.Root class={cn('border-l-4 shadow-sm transition-colors', kpiAccent[accent].border, className)}>
 	<Card.Header class="pb-2">
 		<div class="flex gap-3">
 			<div
@@ -62,7 +62,7 @@

 <Card.Root
 	class={cn(
-		'gap-0 py-0 border-border bg-card shadow-sm transition-colors dark:bg-card/80',
+		'border-border bg-card shadow-sm transition-colors dark:bg-card/80',
 		className
 	)}
 >
@@ -7,15 +7,25 @@
 		class: className,
 		children,
 		size = "default",
+		density = "default",
 		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & { size?: "default" | "sm" } = $props();
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		size?: "default" | "sm";
+		density?: "default" | "compact";
+	} = $props();
 </script>

 <div
 	bind:this={ref}
 	data-slot="card"
 	data-size={size}
-	class={cn("ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col", className)}
+	data-density={density}
+	class={cn(
+		"ring-foreground/10 bg-card text-card-foreground overflow-hidden rounded-xl text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col",
+		"density-default gap-4 py-4 data-[size=sm]:gap-3 data-[size=sm]:py-3",
+		"density-compact gap-0 py-0",
+		className
+	)}
 	{...restProps}
 >
 	{@render children?.()}