Initial commit

snippets-frontend/app/[snippet_id]/page.tsx

@@ -0,0 +1,67 @@
+import Link from 'next/link'
+import {ArrowLeft, ArrowUpRight, FileCode2, RefreshCw, Terminal} from 'lucide-react'
+import {languageLabel, rawSnippetUrl} from '@/lib/snippet-utils'
+import {SnippetEditor} from '@/components/snippet-editor'
+
+const API_BASE = 'http://127.0.0.1:6868'
+
+type Snippet = { createdAt?: string; filename: string; content: string }
+
+async function getSnippet(id: string): Promise<{ data?: Snippet; status: number }> {
+    try {
+        const response = await fetch(`${API_BASE}/${encodeURIComponent(id)}`, {cache: 'no-store'})
+        if (!response.ok) return {status: response.status}
+        return {data: await response.json(), status: response.status}
+    } catch {
+        return {status: 503}
+    }
+}
+
+export default async function ReaderPage({params}: { params: Promise<{ snippet_id: string }> }) {
+    const {snippet_id: id} = await params
+    const result = await getSnippet(id)
+    const snippet = result.data
+    const message = result.status === 404 ? 'This snippet does not exist or has expired.' : 'The snippet server could not be reached.'
+
+    return (
+        <main className="min-h-screen bg-background text-foreground">
+            <header className="border-b border-border">
+                <div className="mx-auto flex max-w-6xl items-center justify-between px-5 py-4 lg:px-8"><Link href="/"
+                                                                                                             className="flex items-center gap-3 font-mono text-sm font-semibold tracking-tight"><span
+                    className="grid size-8 place-items-center rounded-lg bg-primary text-primary-foreground"><Terminal
+                    size={16}/></span>KSnippets</Link><Link href="/"
+                                                            className="inline-flex items-center gap-2 text-xs text-muted-foreground hover:text-foreground"><ArrowLeft
+                    size={14}/> New snippet</Link></div>
+            </header>
+            <div className="mx-auto max-w-6xl px-5 py-10 lg:px-8 lg:py-16">
+                {snippet ? <>
+                    <div className="mb-8 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+                        <div><p className="mb-3 font-mono text-xs uppercase tracking-[0.2em] text-brand">snippet / <em>{id}</em></p><h1
+                            className="flex items-center gap-3 text-3xl font-semibold tracking-[-0.03em]">
+                            <FileCode2 size={25} className="text-brand"/>{snippet.filename}</h1><p
+                            className="mt-3 text-sm text-muted-foreground">{snippet.createdAt ? new Date(snippet.createdAt).toLocaleString() : 'Published snippet'}
+                            <span className="mx-2 text-border">·</span> <span
+                                className="font-mono">{languageLabel(snippet.filename)}</span></p></div>
+                        <a href={rawSnippetUrl(id)} target="_blank" rel="noreferrer"
+                           className="inline-flex w-fit items-center gap-2 rounded-lg border border-border bg-card px-4 py-2.5 text-sm font-medium hover:bg-muted">Open
+                            raw <ArrowUpRight size={15}/></a></div>
+                    <SnippetEditor value={snippet.content} filename={snippet.filename} readOnly/>
+                    <div
+                        className="mt-4 font-mono text-xs text-muted-foreground">{snippet.content.split('\n').length} lines
+                    </div>
+                </> : <div className="mx-auto max-w-lg py-16 text-center">
+                    <div
+                        className="mx-auto mb-5 grid size-14 place-items-center rounded-2xl bg-muted text-muted-foreground">{result.status === 404 ? '404' :
+                        <RefreshCw size={22}/>}</div>
+                    <h1 className="text-2xl font-semibold tracking-tight">{result.status === 404 ? 'Snippet not found' : 'Connection error'}</h1>
+                    <p className="mt-3 leading-6 text-muted-foreground">{message}</p>
+                    <div className="mt-7 flex justify-center gap-3"><Link href="/"
+                                                                          className="rounded-lg bg-primary px-4 py-2.5 text-sm font-medium text-primary-foreground">Create
+                        a snippet</Link>{result.status !== 404 && <a href={`/${id}`}
+                                                                     className="rounded-lg border border-border px-4 py-2.5 text-sm font-medium hover:bg-muted">Try
+                        again</a>}</div>
+                </div>}
+            </div>
+        </main>
+    )
+}