From a515e1dc30faa69ba3fe9f6a49b9781a45dc30d8 Mon Sep 17 00:00:00 2001
From: TZGyn <ca538901d@mozmail.com>
Date: Mon, 18 Sep 2023 00:14:59 +0800
Subject: [PATCH] Wrap shortener code in table in snippet

---
 react-frontend/src/App.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/react-frontend/src/App.tsx b/react-frontend/src/App.tsx
index 18c264f..64d2de5 100644
--- a/react-frontend/src/App.tsx
+++ b/react-frontend/src/App.tsx
@@ -25,6 +25,8 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Toaster } from '@/components/ui/toaster'
 import { useToast } from '@/components/ui/use-toast'
 
+import { Copy } from 'lucide-react'
+
 import { useEffect, useState } from 'react'
 
 const backend_url =
@@ -60,8 +62,10 @@ export default function App() {
 			defaultTheme='dark'
 			storageKey='vite-ui-theme'>
 			<Navbar getShorteners={getShorteners} />
-			<div className='mx-auto mt-8 w-full max-w-6xl'>
-				<ShortenerTable shorteners={shorteners} />
+			<div className='flex justify-center px-2 pt-8'>
+				<div className='w-full max-w-6xl'>
+					<ShortenerTable shorteners={shorteners} />
+				</div>
 			</div>
 			<Toaster />
 		</ThemeProvider>
@@ -70,7 +74,7 @@ export default function App() {
 
 const Navbar = ({ getShorteners }: { getShorteners: () => Promise<void> }) => {
 	return (
-		<div className='flex justify-center border-b border-b-border'>
+		<div className='flex justify-center border-b border-b-border px-2'>
 			<div className='flex w-full max-w-6xl items-center justify-between py-2'>
 				<div className='font-bold'>Shortener</div>
 				<div className='flex items-center gap-2'>
@@ -177,7 +181,10 @@ const ShortenerTable = ({ shorteners }: { shorteners: Shortener[] }) => {
 										onClick={() =>
 											copyLinkToClipboard(shortener.code)
 										}>
-										{shortener.code}
+										<div className='flex justify-between gap-4 rounded bg-secondary/70 p-2'>
+											{shortener.code}
+											<Copy className='h-[1.2rem] w-[1.2rem]' />
+										</div>
 									</TableCell>
 								</TableRow>
 							))