waveringana/simplelink
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Add footer

Browse source
This commit is contained in:
waveringana 2025-01-28 03:27:24 -05:00
parent ac13e77dc4
commit ee667fd759
6 changed files with 4311 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

103
frontend/src/App.tsx
View file

@ -2,6 +2,7 @@ import { ThemeProvider } from "@/components/theme-provider"
import { LinkForm } from './components/LinkForm'
import { LinkList } from './components/LinkList'
import { AuthForms } from './components/AuthForms'
import { Footer } from './components/Footer'
import { AuthProvider, useAuth } from './context/AuthContext'
import { Button } from "@/components/ui/button"
import { Toaster } from './components/ui/toaster'
@ -9,61 +10,61 @@ import { ModeToggle } from './components/mode-toggle'
import { useState } from 'react'
function AppContent() {
const { user, logout } = useAuth()
const [refreshCounter, setRefreshCounter] = useState(0)
const { user, logout } = useAuth()
const [refreshCounter, setRefreshCounter] = useState(0)
const handleLinkCreated = () => {
setRefreshCounter(prev => prev + 1)
}
const handleLinkCreated = () => {
setRefreshCounter(prev => prev + 1)
}
return (
<div className="min-h-screen bg-background flex flex-col">
<header className="border-b">
<div className="container max-w-6xl mx-auto flex h-16 items-center justify-between px-4">
<h1 className="text-2xl font-bold">SimpleLink</h1>
<div className="flex items-center gap-4">
{user ? (
<>
<span className="text-sm text-muted-foreground">Welcome, {user.email}</span>
<Button variant="outline" size="sm" onClick={logout}>
Logout
</Button>
</>
) : (
<span className="text-sm text-muted-foreground">A link shortening and tracking service</span>
)}
<ModeToggle />
</div>
</div>
</header>
<main className="flex-1 flex flex-col">
<div className="container max-w-6xl mx-auto px-4 py-8 flex-1 flex flex-col">
<div className="space-y-8 flex-1 flex flex-col justify-center">
{user ? (
<>
<LinkForm onSuccess={handleLinkCreated} />
<LinkList refresh={refreshCounter} />
</>
) : (
<AuthForms />
)}
</div>
</div>
</main>
</div>
)
return (
<div className="min-h-screen bg-background flex flex-col">
<header className="border-b">
<div className="container max-w-6xl mx-auto flex h-16 items-center justify-between px-4">
<h1 className="text-2xl font-bold">SimpleLink</h1>
<div className="flex items-center space-x-2 sm:space-x-4">
{user ? (
<>
<span className="text-sm text-muted-foreground hidden sm:inline">Welcome, {user.email}</span>
<Button variant="outline" size="sm" onClick={logout}>
Logout
</Button>
</>
) : (
<span className="text-sm text-muted-foreground mr-2">A link shortening service</span>
)}
<ModeToggle />
</div>
</div>
</header>
<main className="flex-1 flex flex-col">
<div className="container max-w-6xl mx-auto px-4 py-8 flex-1 flex flex-col">
<div className="space-y-8 flex-1 flex flex-col justify-center">
{user ? (
<>
<LinkForm onSuccess={handleLinkCreated} />
<LinkList refresh={refreshCounter} />
</>
) : (
<AuthForms />
)}
</div>
</div>
</main>
<Footer />
</div>
)
}
function App() {
return (
<ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
<AuthProvider>
<AppContent />
<Toaster />
</AuthProvider>
</ThemeProvider>
)
return (
<ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
<AuthProvider>
<AppContent />
<Toaster />
</AuthProvider>
</ThemeProvider>
)
}
export default App

54
frontend/src/components/Footer.tsx Normal file
View file

@ -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>
)
}

39
frontend/src/components/PrivacyModal.tsx Normal file
View file

@ -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>
)
}