feat: initial commit

components/dashboard/settings/destination/show-destinations.tsx

@@ -0,0 +1,65 @@
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { api } from "@/utils/api";
+import { FolderUp } from "lucide-react";
+import { AddDestination } from "./add-destination";
+import { UpdateDestination } from "./update-destination";
+import { DeleteDestination } from "./delete-destination";
+
+export const ShowDestinations = () => {
+	const { data } = api.destination.all.useQuery();
+
+	return (
+		<div className="w-full">
+			<Card className="h-full bg-transparent">
+				<CardHeader>
+					<CardTitle className="text-xl">S3 Destinations</CardTitle>
+					<CardDescription>
+						Add your providers like AWS S3, Cloudflare R2, Wasabi, DigitalOcean
+						Spaces etc.
+					</CardDescription>
+				</CardHeader>
+				<CardContent className="space-y-2 pt-4">
+					{data?.length === 0 ? (
+						<div className="flex flex-col items-center gap-3">
+							<FolderUp className="size-8 self-center text-muted-foreground" />
+							<span className="text-base text-muted-foreground">
+								To create a backup is required to set at least 1 provider.
+							</span>
+							<AddDestination />
+						</div>
+					) : (
+						<div className="flex flex-col gap-6">
+							{data?.map((destination, index) => (
+								<div
+									key={destination.destinationId}
+									className="flex items-center justify-between"
+								>
+									<span className="text-sm text-muted-foreground">
+										{index + 1}. {destination.name}
+									</span>
+									<div className="flex flex-row gap-3">
+										<UpdateDestination
+											destinationId={destination.destinationId}
+										/>
+										<DeleteDestination
+											destinationId={destination.destinationId}
+										/>
+									</div>
+								</div>
+							))}
+							<div>
+								<AddDestination />
+							</div>
+						</div>
+					)}
+				</CardContent>
+			</Card>
+		</div>
+	);
+};