Add footer

frontend/src/components/Footer.tsx

@@ -0,0 +1,54 @@
+import { SiGithub, SiBluesky } from "@icons-pack/react-simple-icons"
+import { Button } from "@/components/ui/button"
+import { useState } from 'react'
+import { PrivacyModal } from './PrivacyModal'
+
+export function Footer() {
+    const [privacyModalOpen, setPrivacyModalOpen] = useState(false)
+
+    const handlePrivacyModalOpen = () => {
+        setPrivacyModalOpen(true)
+    }
+
+    const handlePrivacyModalClose = () => {
+        setPrivacyModalOpen(false)
+    }
+
+    return (
+        <footer className="border-t">
+            <div className="container max-w-6xl mx-auto flex h-14 items-center justify-between px-4">
+                <p className="text-sm text-muted-foreground">Created by waveringana</p>
+                <div className="flex items-center space-x-4">
+                    <nav className="flex items-center space-x-4">
+                        <a
+                            onClick={handlePrivacyModalOpen}
+                            href="#"
+                        >
+                            Privacy
+                        </a>
+                    </nav>
+                    <div className="flex items-center space-x-2">
+                        <Button variant="ghost" size="icon">
+                            <a href="https://l.nekomimi.pet/github?source=shortener" target="_blank" rel="noopener noreferrer">
+                                <SiGithub className="h-4 w-4" />
+                            </a>
+                            <span className="sr-only">GitHub</span>
+                        </Button>
+
+                        <Button variant="ghost" size="icon">
+                            <a href="https://l.nekomimi.pet/twitter?source=shortener" target="_blank" rel="noopener noreferrer">
+                                <SiBluesky className="h-4 w-4" />
+                            </a>
+                            <span className="sr-only">Twitter</span>
+                        </Button>
+                    </div>
+                </div>
+            </div>
+
+            <PrivacyModal
+                isOpen={privacyModalOpen}
+                onClose={handlePrivacyModalClose}
+            />
+        </footer>
+    )
+}

frontend/src/components/PrivacyModal.tsx

@@ -0,0 +1,39 @@
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "@/components/ui/dialog"
+
+import { Button } from "@/components/ui/button"
+
+interface PrivacyModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+}
+
+export function PrivacyModal({ isOpen, onClose }: PrivacyModalProps) {
+    return (
+      <Dialog open={isOpen}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>Privacy Policy</DialogTitle>
+            <DialogDescription>
+              Simplelink's data collection and usage policies
+            </DialogDescription>
+          </DialogHeader>
+          <div className="text-sm text-muted-foreground">
+            <p>Simplelink shortens URLs and tracks only two pieces of information: the time each link is clicked and the source of the link through a ?source= query tag. We do not collect any personal information such as IP addresses or any other data.</p>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={onClose}>
+              Close
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    )
+  }
+