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,7 +168,8 @@ const ShortenerTable = ({ shorteners }: { shorteners: Shortener[] }) => {
 						</TableRow>
 					</TableHeader>
 					<TableBody>
-						{shorteners.map((shortener) => (
+						{shorteners.length ? (
+							shorteners.map((shortener) => (
 								<TableRow key={shortener.id}>
 									<TableCell>{shortener.link}</TableCell>
 									<TableCell
@@ -175,7 +180,10 @@ const ShortenerTable = ({ shorteners }: { shorteners: Shortener[] }) => {
 										{shortener.code}
 									</TableCell>
 								</TableRow>
-						))}
+							))
+						) : (
+							<TableRow></TableRow>
+						)}
 					</TableBody>
 				</Table>
 			</CardContent>