87 lines
3.8 KiB
React
87 lines
3.8 KiB
React
|
import { useCallback, useEffect, useState } from 'react';
|
||
|
|
import { Link } from 'react-router-dom';
|
||
|
|
import { ArrowLeft, Info, Sparkles } from 'lucide-react';
|
||
|
|
import { api } from '@/api';
|
||
|
|
import { Button } from '@/components/ui/button';
|
||
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||
|
|
|
||
|
|
export default function AboutPage() {
|
||
|
|
const [about, setAbout] = useState(null);
|
||
|
|
const [loading, setLoading] = useState(true);
|
||
|
|
|
||
|
|
const load = useCallback(async () => {
|
||
|
|
setLoading(true);
|
||
|
|
try {
|
||
|
|
setAbout(await api.about());
|
||
|
|
} finally {
|
||
|
|
setLoading(false);
|
||
|
|
}
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
useEffect(() => { load(); }, [load]);
|
||
|
|
|
||
|
|
const stack = about?.stack || {};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="min-h-screen bg-[radial-gradient(circle_at_top_left,oklch(var(--primary)/0.10),transparent_34rem),linear-gradient(180deg,oklch(var(--background)),oklch(var(--muted)/0.28))] px-4 py-8 text-foreground sm:px-6">
|
||
|
|
<main className="mx-auto w-full max-w-3xl space-y-5">
|
||
|
|
<Button asChild variant="ghost" size="sm" className="-ml-2">
|
||
|
|
<Link to="/login">
|
||
|
|
<ArrowLeft className="h-3.5 w-3.5" />
|
||
|
|
Back
|
||
|
|
</Link>
|
||
|
|
</Button>
|
||
|
|
|
||
|
|
<Card className="border-border/70 bg-card/95 shadow-sm">
|
||
|
|
<CardHeader>
|
||
|
|
<div className="mb-2 flex h-10 w-10 items-center justify-center rounded-xl border border-border/70 bg-primary/10 text-primary">
|
||
|
|
<Info className="h-5 w-5" />
|
||
|
|
</div>
|
||
|
|
<CardTitle className="text-2xl">{about?.name || 'BillTracker'}</CardTitle>
|
||
|
|
<CardDescription>
|
||
|
|
{loading ? 'Loading app information...' : about?.description}
|
||
|
|
</CardDescription>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent className="space-y-5">
|
||
|
|
<div className="grid gap-3 sm:grid-cols-3">
|
||
|
|
<div className="rounded-xl border border-border/70 bg-background/65 p-4">
|
||
|
|
<p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Version</p>
|
||
|
|
<p className="mt-1 font-mono text-lg font-bold">v{about?.version || '...'}</p>
|
||
|
|
</div>
|
||
|
|
<div className="rounded-xl border border-border/70 bg-background/65 p-4">
|
||
|
|
<p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Backend</p>
|
||
|
|
<p className="mt-1 text-sm font-semibold">{stack.backend || 'Node.js / Express'}</p>
|
||
|
|
</div>
|
||
|
|
<div className="rounded-xl border border-border/70 bg-background/65 p-4">
|
||
|
|
<p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Storage</p>
|
||
|
|
<p className="mt-1 text-sm font-semibold">{stack.database || 'SQLite'}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="rounded-xl border border-border/70 bg-muted/35 p-4">
|
||
|
|
<div className="flex items-start gap-3">
|
||
|
|
<Sparkles className="mt-0.5 h-4 w-4 shrink-0 text-primary" />
|
||
|
|
<div>
|
||
|
|
<p className="text-sm font-semibold">Produced with AI assistance</p>
|
||
|
|
<p className="mt-1 text-sm leading-6 text-muted-foreground">
|
||
|
|
BillTracker is self-hosted software for personal bill planning and history. This product was produced with the assistance of AI.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex flex-col gap-2 sm:flex-row">
|
||
|
|
<Button asChild>
|
||
|
|
<Link to="/release-notes">Release Notes</Link>
|
||
|
|
</Button>
|
||
|
|
<Button asChild variant="outline">
|
||
|
|
<Link to="/login">Sign In</Link>
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
</main>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|