mirror of
https://github.com/ThisTine/Snip.git
synced 2026-10-18 11:01:38 +07:00
feat: frontend redesign
This commit is contained in:
sittichok Ouamsiri committed
1 parent
faf2c97462
commit
e177c7775a
27 files changed
+761
-912
No files matched your search
+48
-85
@@ -14,20 +14,11 @@ import { DeleteLinkModal } from "../components/DeleteLinkModal";
|
||||
import { QrModal } from "../components/QrModal";
|
||||
import { Button } from "../components/ui/Button";
|
||||
import { useToast } from "../components/ui/Toast";
|
||||
import { Search, X, Plus } from "../components/icons";
|
||||
|
||||
type View = "comfortable" | "compact";
|
||||
const PAGE_SIZE: Record<View, number> = { comfortable: 5, compact: 8 };
|
||||
|
||||
const pop = {
|
||||
hidden: { opacity: 0, y: 20, scale: 0.95 },
|
||||
show: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
scale: 1,
|
||||
transition: { type: "spring", stiffness: 340, damping: 20 },
|
||||
},
|
||||
} as const;
|
||||
|
||||
function useDebouncedValue<T>(value: T, delay: number): T {
|
||||
const [debounced, setDebounced] = useState(value);
|
||||
useEffect(() => {
|
||||
@@ -38,32 +29,34 @@ function useDebouncedValue<T>(value: T, delay: number): T {
|
||||
}
|
||||
|
||||
function ViewToggle({ view, onChange }: { view: View; onChange: (v: View) => void }) {
|
||||
const opts: { value: View; icon: string; label: string }[] = [
|
||||
{ value: "comfortable", icon: "▦", label: "Comfortable view" },
|
||||
{ value: "compact", icon: "≣", label: "Compact view" },
|
||||
const opts: { value: View; label: string; rows: number }[] = [
|
||||
{ value: "comfortable", label: "Comfortable view", rows: 2 },
|
||||
{ value: "compact", label: "Compact view", rows: 3 },
|
||||
];
|
||||
return (
|
||||
<div className="flex shrink-0 gap-1 rounded-xl border-[1.5px] border-line bg-surface-2 p-1">
|
||||
<div className="flex shrink-0 gap-1 rounded-xl border border-line bg-surface p-1">
|
||||
{opts.map((o) => (
|
||||
<button
|
||||
key={o.value}
|
||||
onClick={() => onChange(o.value)}
|
||||
aria-label={o.label}
|
||||
aria-pressed={view === o.value}
|
||||
className="focusable relative grid h-8 w-9 place-items-center rounded-lg text-[15px]"
|
||||
className={`focusable grid h-8 w-9 place-items-center rounded-lg transition-colors ${
|
||||
view === o.value ? "bg-[var(--ink)] text-[var(--bg)]" : "text-muted hover:text-ink"
|
||||
}`}
|
||||
>
|
||||
{view === o.value && (
|
||||
<motion.span
|
||||
layoutId="view-pill"
|
||||
transition={{ type: "spring", stiffness: 480, damping: 32 }}
|
||||
className="absolute inset-0 rounded-lg bg-[var(--surface)] shadow-[0_2px_8px_-3px_rgba(0,0,0,0.3)] ring-[1.5px] ring-[var(--ring)]"
|
||||
/>
|
||||
)}
|
||||
<span
|
||||
className={`relative z-10 ${view === o.value ? "text-ink" : "text-muted"}`}
|
||||
>
|
||||
{o.icon}
|
||||
</span>
|
||||
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||||
{Array.from({ length: o.rows }).map((_, i) => (
|
||||
<rect
|
||||
key={i}
|
||||
x="2"
|
||||
y={2 + i * (11 / o.rows)}
|
||||
width="11"
|
||||
height={11 / o.rows - 1.5}
|
||||
rx="1"
|
||||
/>
|
||||
))}
|
||||
</svg>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
@@ -201,14 +194,9 @@ export function Dashboard() {
|
||||
return (
|
||||
<div className="mx-auto max-w-4xl px-4 pb-24 pt-8">
|
||||
{/* header */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 16 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ type: "spring", stiffness: 300, damping: 26 }}
|
||||
className="flex flex-wrap items-end justify-between gap-3"
|
||||
>
|
||||
<div className="flex flex-wrap items-end justify-between gap-3">
|
||||
<div>
|
||||
<h1 className="font-display text-3xl font-bold tracking-tight text-ink sm:text-4xl">
|
||||
<h1 className="text-2xl font-semibold tracking-tight text-ink sm:text-3xl">
|
||||
Your links
|
||||
</h1>
|
||||
<p className="mt-1 text-sm text-muted">
|
||||
@@ -217,49 +205,39 @@ export function Dashboard() {
|
||||
</div>
|
||||
<Link to="/">
|
||||
<Button size="md">
|
||||
<span className="text-lg">＋</span> New link
|
||||
<Plus size={16} /> New link
|
||||
</Button>
|
||||
</Link>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* stat tiles */}
|
||||
<div className="mt-6 grid grid-cols-3 gap-3">
|
||||
{statTiles.map((s, i) => (
|
||||
<motion.div
|
||||
key={s.label}
|
||||
initial={{ opacity: 0, y: 18, scale: 0.94 }}
|
||||
animate={{ opacity: 1, y: 0, scale: 1 }}
|
||||
transition={{ type: "spring", stiffness: 360, damping: 20, delay: 0.05 * i }}
|
||||
className="card p-4"
|
||||
>
|
||||
<p className="text-[11px] font-medium uppercase tracking-wide text-muted sm:text-xs">
|
||||
{statTiles.map((s) => (
|
||||
<div key={s.label} className="card p-4">
|
||||
<p className="text-[11px] uppercase tracking-wide text-muted">
|
||||
{s.label}
|
||||
</p>
|
||||
<p
|
||||
className={`mt-1 font-display text-2xl font-bold sm:text-3xl ${
|
||||
s.accent ? "text-accent-ink" : "text-ink"
|
||||
className={`mt-1 text-2xl font-semibold sm:text-3xl ${
|
||||
s.accent ? "text-accent" : "text-ink"
|
||||
}`}
|
||||
>
|
||||
{s.accent ? (
|
||||
<span className="rounded-lg bg-accent px-2">{s.value}</span>
|
||||
) : (
|
||||
s.value
|
||||
)}
|
||||
{s.value}
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* toolbar: search + view toggle */}
|
||||
{hasAnyLinks && (
|
||||
<div className="mt-6 flex items-center gap-2.5">
|
||||
<div className="flex h-11 flex-1 items-center gap-2 rounded-xl border-[1.5px] border-line bg-surface px-3.5">
|
||||
<span className="text-muted">⌕</span>
|
||||
<div className="flex h-10 flex-1 items-center gap-2 rounded-xl border border-line bg-surface px-3 focus-within:border-[var(--ink)]">
|
||||
<Search size={16} className="text-muted" />
|
||||
<input
|
||||
value={query}
|
||||
onChange={(e) => updateSearch(e.target.value)}
|
||||
placeholder="Search by code or URL…"
|
||||
className="h-full w-full bg-transparent text-[15px] text-ink outline-none placeholder:text-muted"
|
||||
className="h-full w-full bg-transparent text-sm text-ink outline-none placeholder:text-muted"
|
||||
/>
|
||||
{query && (
|
||||
<button
|
||||
@@ -267,7 +245,7 @@ export function Dashboard() {
|
||||
aria-label="Clear search"
|
||||
className="focusable grid h-6 w-6 place-items-center rounded-md text-muted hover:bg-surface-2 hover:text-ink"
|
||||
>
|
||||
✕
|
||||
<X size={14} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
@@ -280,12 +258,12 @@ export function Dashboard() {
|
||||
<p className="mt-3 text-xs text-muted">
|
||||
{query ? (
|
||||
<>
|
||||
<span className="font-semibold text-ink">{total}</span> of {totalLinks}{" "}
|
||||
<span className="font-medium text-ink">{total}</span> of {totalLinks}{" "}
|
||||
{totalLinks === 1 ? "link" : "links"} match “{query}”
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
Showing <span className="font-semibold text-ink">{items.length}</span> of{" "}
|
||||
Showing <span className="font-medium text-ink">{items.length}</span> of{" "}
|
||||
{totalLinks} {totalLinks === 1 ? "link" : "links"}
|
||||
</>
|
||||
)}
|
||||
@@ -295,55 +273,40 @@ export function Dashboard() {
|
||||
{/* list */}
|
||||
<div className="mt-4">
|
||||
{pageData === null ? (
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-3">
|
||||
{[0, 1, 2].map((i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="card h-28 animate-pulse opacity-60"
|
||||
className="card h-24 animate-pulse opacity-60"
|
||||
style={{ animationDelay: `${i * 120}ms` }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : total === 0 && !debouncedQuery ? (
|
||||
<motion.div
|
||||
variants={pop}
|
||||
initial="hidden"
|
||||
animate="show"
|
||||
className="card grid place-items-center gap-3 p-12 text-center"
|
||||
>
|
||||
<span className="text-4xl">🪄</span>
|
||||
<p className="font-display text-xl font-bold text-ink">No links yet</p>
|
||||
<div className="card grid place-items-center gap-2 p-12 text-center">
|
||||
<p className="text-lg font-semibold text-ink">No links yet</p>
|
||||
<p className="max-w-xs text-sm text-muted">
|
||||
Create your first short link and it'll show up here with live click
|
||||
stats.
|
||||
</p>
|
||||
<Link to="/" className="mt-1">
|
||||
<Link to="/" className="mt-2">
|
||||
<Button>Create a link</Button>
|
||||
</Link>
|
||||
</motion.div>
|
||||
</div>
|
||||
) : total === 0 ? (
|
||||
<motion.div
|
||||
variants={pop}
|
||||
initial="hidden"
|
||||
animate="show"
|
||||
className="card grid place-items-center gap-2 p-10 text-center"
|
||||
>
|
||||
<span className="text-3xl">🔍</span>
|
||||
<p className="font-display text-lg font-bold text-ink">No matches</p>
|
||||
<div className="card grid place-items-center gap-1.5 p-10 text-center">
|
||||
<p className="text-base font-semibold text-ink">No matches</p>
|
||||
<p className="text-sm text-muted">Nothing matches “{query}”.</p>
|
||||
<button
|
||||
onClick={() => updateSearch("")}
|
||||
className="focusable mt-1 rounded-lg text-sm font-semibold text-ink underline decoration-accent decoration-2 underline-offset-2"
|
||||
className="focusable mt-1 rounded-lg text-sm font-medium text-ink underline underline-offset-2"
|
||||
>
|
||||
Clear search
|
||||
</button>
|
||||
</motion.div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<motion.div
|
||||
layout
|
||||
className={view === "compact" ? "space-y-2.5" : "space-y-4"}
|
||||
>
|
||||
<motion.div layout className={view === "compact" ? "space-y-2.5" : "space-y-3"}>
|
||||
<AnimatePresence mode="popLayout">
|
||||
{items.map((link) =>
|
||||
view === "compact" ? (
|
||||
|
||||
Reference in new issue
Block a user