refactor: table component

greymass · Oct 4, 2024 · 24f3150 · 24f3150
1 parent ec60e6e
commit 24f3150
Show file tree

Hide file tree

Showing 13 changed files with 137 additions and 245 deletions.
diff --git a/src/app.css b/src/app.css
@@ -82,11 +82,26 @@
 	}
 
 	/* table styles */
-	.table-row-element {
-		@apply border-b border-neutral-300/10 bg-gradient-to-r from-transparent to-transparent last:border-none odd:via-mineShaft-950 group-[.table-head]:bg-none data-[hoverEffect=true]:hover:via-skyBlue-500/10;
-	}
-
-	.table-header-element {
-		@apply py-1.5 pl-2 pr-2 text-left font-medium text-mineShaft-200/60 first:pl-0 last:pr-0;
+	.table-styles {
+		@apply w-full table-auto overflow-x-auto;
+
+		thead tr {
+			@apply bg-none;
+		}
+
+		tr,
+		.table-row-styles {
+			@apply border-b border-neutral-300/10 bg-gradient-to-r from-transparent to-transparent last:border-none odd:via-mineShaft-950 hover:via-skyBlue-500/10 data-[clickable=true]:cursor-pointer data-[active=true]:via-skyBlue-500/10 data-[hover-effect=false]:hover:via-transparent data-[hover-effect=false]:odd:hover:via-mineShaft-950;
+		}
+
+		th,
+		.table-head-styles {
+			@apply py-1.5 pl-2 pr-2 text-left text-base font-medium text-mineShaft-200/60 first:pl-0 last:pr-0;
+		}
+
+		td,
+		.table-cell-styles {
+			@apply py-3 pl-2 pr-2 text-base first:pl-0 last:pr-0;
+		}
 	}
 }
diff --git a/src/lib/components/input/search.svelte b/src/lib/components/input/search.svelte
@@ -11,7 +11,6 @@
 	import { history, addHistory } from '$lib/state/search.svelte';
 	import Button from '$lib/components/button/button.svelte';
 	import { Stack } from '$lib/components/layout';
-	import * as Table from '$lib/components/table';
 
 	interface NameInputProps extends ComponentProps<TextInput> {
 		debug?: boolean;
@@ -216,23 +215,23 @@
 
 				{#if history.length}
 					<div class="px-2">
-						<Table.Root>
-							<Table.Head>
-								<Table.Header>Type</Table.Header>
-								<Table.Header>Location</Table.Header>
-							</Table.Head>
-							<Table.Body>
-								{#each history as item, index}
-									<Table.Row
-										onclick={() => goToHistory(item.result)}
-										active={index === selectedIndex}
-									>
-										<Table.Cell>{item.searchType}</Table.Cell>
-										<Table.Cell class="truncate">{item.result}</Table.Cell>
-									</Table.Row>
-								{/each}
-							</Table.Body>
-						</Table.Root>
+						<div class="table-styles grid grid-cols-2">
+							<div class="table-head-styles col-span-full grid grid-cols-subgrid">
+								<span>Type</span>
+								<span>Location</span>
+							</div>
+
+							{#each history as item, index}
+								<button
+									class="table-row-styles col-span-full grid grid-cols-subgrid justify-items-start"
+									onclick={() => goToHistory(item.result)}
+									data-active={index === selectedIndex}
+								>
+									<span class="table-cell-styles">{item.searchType}</span>
+									<span class="table-cell-styles truncate">{item.result}</span>
+								</button>
+							{/each}
+						</div>
 					</div>
 				{/if}
 

diff --git a/src/lib/components/table/body.svelte b/src/lib/components/table/body.svelte
diff --git a/src/lib/components/table/cell.svelte b/src/lib/components/table/cell.svelte
diff --git a/src/lib/components/table/head.svelte b/src/lib/components/table/head.svelte
diff --git a/src/lib/components/table/header.svelte b/src/lib/components/table/header.svelte
diff --git a/src/lib/components/table/index.ts b/src/lib/components/table/index.ts
diff --git a/src/lib/components/table/root.svelte b/src/lib/components/table/root.svelte
diff --git a/src/lib/components/table/row.svelte b/src/lib/components/table/row.svelte
diff --git a/src/routes/[network]/(account)/(staking)/staking/unstaking.svelte b/src/routes/[network]/(account)/(staking)/staking/unstaking.svelte
@@ -2,11 +2,8 @@
 
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
-
 	import { Card } from '$lib/components/layout';
 	import Button from '$lib/components/button/button.svelte';
-	import * as Table from '$lib/components/table';
-
 	import type { UnstakingRecord } from './utils';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
@@ -18,19 +15,19 @@
 </script>
 
 <Card {...props} title="Unstaking Balances">
-	<Table.Root class="table-auto">
-		<Table.Head class="border-b-2 border-shark-100/10">
-			<Table.Row class="caption font-medium">
-				<Table.Header class="text-left">Amount</Table.Header>
-				<Table.Header class="text-right">Date available</Table.Header>
-			</Table.Row>
-		</Table.Head>
-		<Table.Body>
+	<table class="table-styles">
+		<thead class="border-b-2 border-shark-100/10">
+			<tr class="caption font-medium">
+				<th class="text-left">Amount</th>
+				<th class="text-right">Date available</th>
+			</tr>
+		</thead>
+		<tbody>
 			{#each records as record}
 				{#if !record.savings}
-					<Table.Row>
-						<Table.Cell>{record.balance}</Table.Cell>
-						<Table.Cell class="text-right">
+					<tr>
+						<td>{record.balance}</td>
+						<td class="text-right">
 							{record.date
 								? record.date.toLocaleDateString(undefined, {
 										weekday: 'long',
@@ -39,12 +36,12 @@
 										day: 'numeric'
 									})
 								: '--'}
-						</Table.Cell>
-					</Table.Row>
+						</td>
+					</tr>
 				{/if}
 			{/each}
-		</Table.Body>
-	</Table.Root>
+		</tbody>
+	</table>
 	{#if href}
 		<Button {href} variant="secondary" class="text-skyBlue-500">Withdraw</Button>
 	{/if}

diff --git a/src/routes/[network]/(dev)/debug/components/sections/cards.svelte b/src/routes/[network]/(dev)/debug/components/sections/cards.svelte
@@ -22,7 +22,7 @@
 			</Card>
 
 			<Card title="Unstaking Balances Is A Long Title">
-				<table class="table-auto">
+				<table class="table-styles">
 					<thead class="border-b-2 border-shark-100/10">
 						<tr class="caption font-medium">
 							<th class="p-4 text-left">Amount</th>