Merge pull request #79 from Discusser/bugfix/table-anchor-inside-cell

Move anchors around table rows inside of cells
s1lvax · Oct 23, 2024 · f12eefa · f12eefa
2 parents 21f06c0 + d94a9a6
commit f12eefa
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 28 deletions.
diff --git a/src/lib/components/PublicProfile/Links.svelte b/src/lib/components/PublicProfile/Links.svelte
@@ -22,11 +22,13 @@
 				</Table.Header>
 				<Table.Body>
 					{#each userData.links as link}
-						<a href={link.url} target="_blank">
-							<Table.Row class="flex flex-row space-x-4 hover:cursor-pointer">
-								<Table.Cell class="font-medium">{link.title}</Table.Cell>
-							</Table.Row>
-						</a>
+						<Table.Row class="space-x-4 border-b-0 hover:cursor-pointer">
+							<Table.Cell class="p-0 font-medium">
+								<a class="block p-4" href={link.url} target="_blank">
+									<span>{link.title}</span>
+								</a>
+							</Table.Cell>
+						</Table.Row>
 					{/each}
 				</Table.Body>
 			</Table.Root>

diff --git a/src/lib/components/PublicProfile/UserInfo.svelte b/src/lib/components/PublicProfile/UserInfo.svelte
@@ -70,42 +70,53 @@
 					<Table.Header>
 						<Table.Row>
 							<Table.Head>Socials</Table.Head>
-							<Table.Head></Table.Head>
 						</Table.Row>
 					</Table.Header>
-					<Table.Body>
+					<Table.Body class="[&>*]:border-b-0">
 						<!-- GitHub Profile -->
-						<a href={githubData?.url ?? '#'} target="_blank">
-							<Table.Row>
-								<Table.Cell>
+						<Table.Row>
+							<Table.Cell class="p-0">
+								<a
+									class="flex items-center space-x-8 p-4"
+									href={githubData?.url ?? '#'}
+									target="_blank"
+								>
 									<GitHub />
-								</Table.Cell>
-								<Table.Cell>GitHub Profile</Table.Cell>
-							</Table.Row>
-						</a>
+									<span>GitHub Profile</span>
+								</a>
+							</Table.Cell>
+						</Table.Row>
 
 						<!-- Blog Profile -->
 						{#if githubData?.blog}
-							<a href={githubData?.blog ?? '#'} target="_blank">
-								<Table.Row>
-									<Table.Cell>
+							<Table.Row>
+								<Table.Cell class="p-0">
+									<a
+										class="flex items-center space-x-8 p-4"
+										href={githubData?.blog ?? '#'}
+										target="_blank"
+									>
 										<IdCard />
-									</Table.Cell>
-									<Table.Cell>Personal Website</Table.Cell>
-								</Table.Row>
-							</a>
+										<span>Personal Website</span>
+									</a>
+								</Table.Cell>
+							</Table.Row>
 						{/if}
 
 						<!-- Twitter Profile -->
 						{#if githubData?.twitter}
-							<a href={`https://x.com/${githubData?.twitter}`} target="_blank">
-								<Table.Row>
-									<Table.Cell>
+							<Table.Row>
+								<Table.Cell class="p-0">
+									<a
+										class="flex items-center space-x-8 p-4"
+										href={`https://x.com/${githubData?.twitter}`}
+										target="_blank"
+									>
 										<Twitter />
-									</Table.Cell>
-									<Table.Cell>Twitter Profile</Table.Cell>
-								</Table.Row>
-							</a>
+										<span>Twitter Profile</span>
+									</a>
+								</Table.Cell>
+							</Table.Row>
 						{/if}
 						<!-- Socials will be here when we implement it -->
 					</Table.Body>