Frontend display no shorteners text in table when no shorteners are made

react-frontend/src/App.tsx

@@ -15,6 +15,7 @@ import { Label } from '@/components/ui/label'
 import {
 	Table,
 	TableBody,
+	TableCaption,
 	TableCell,
 	TableHead,
 	TableHeader,
@@ -157,6 +158,9 @@ const ShortenerTable = ({ shorteners }: { shorteners: Shortener[] }) => {
 			</CardHeader>
 			<CardContent>
 				<Table>
+					{!shorteners.length && (
+						<TableCaption>No Shorteners</TableCaption>
+					)}
 					<TableHeader>
 						<TableRow>
 							<TableHead>Link</TableHead>
@@ -164,18 +168,22 @@ const ShortenerTable = ({ shorteners }: { shorteners: Shortener[] }) => {
 						</TableRow>
 					</TableHeader>
 					<TableBody>
-						{shorteners.map((shortener) => (
+						{shorteners.length ? (
-							<TableRow key={shortener.id}>
+							shorteners.map((shortener) => (
-								<TableCell>{shortener.link}</TableCell>
+								<TableRow key={shortener.id}>
-								<TableCell
+									<TableCell>{shortener.link}</TableCell>
-									className='cursor-pointer select-none'
+									<TableCell
-									onClick={() =>
+										className='cursor-pointer select-none'
-										copyLinkToClipboard(shortener.code)
+										onClick={() =>
-									}>
+											copyLinkToClipboard(shortener.code)
-									{shortener.code}
+										}>
-								</TableCell>
+										{shortener.code}
-							</TableRow>
+									</TableCell>
-						))}
+								</TableRow>
+							))
+						) : (
+							<TableRow></TableRow>
+						)}
 					</TableBody>
 				</Table>
 			</CardContent>