bunware.org
Scrapboard.org client
feat: update navbar and boards
+23
-25
src/app/boards/page.tsx
+23
-25
src/app/boards/page.tsx
···
34
34
);
35
35
36
36
return (
37
-
<div className="py-4 px-4 sm:py-8 sm:px-6 lg:px-8 flex items-center justify-center">
38
-
{/* Container that adapts to image width */}
39
-
<div className="w-full max-w-4xl flex justify-center">
40
-
<div className="inline-block">
41
-
<div className="grid grid-cols-1 md:grid-cols-4 gap-3">
42
-
{Array.from(boards.entries()).map(([key, it]) => (
43
-
<Link
44
-
href={`/board/${agent?.did ?? "unknown"}/${key}`}
45
-
key={key}
46
-
className="h-full"
37
+
<div className="py-4 px-4 flex items-center justify-center">
38
+
<div className="w-full max-w-4xl">
39
+
<h1 className="font-medium text-lg mb-4">My Boards</h1>
40
+
<div className="grid grid-cols-1 md:grid-cols-4 gap-3">
41
+
{Array.from(boards.entries()).map(([key, it]) => (
42
+
<Link
43
+
href={`/board/${agent?.did ?? "unknown"}/${key}`}
44
+
key={key}
45
+
className="h-full"
46
+
>
47
+
<motion.div
48
+
initial={{ opacity: 0, y: 2 }}
49
+
animate={{ opacity: 1, y: 0 }}
50
+
transition={{ duration: 0.3, ease: "easeOut" }}
51
+
whileTap={{ scale: 0.95 }}
52
+
className="flex flex-col h-full bg-black/10 dark:bg-white/3 p-4 rounded-lg hover:bg-black/15 dark:hover:bg-white/5 transition-colors"
47
53
>
48
-
<motion.div
49
-
initial={{ opacity: 0, y: 2 }}
50
-
animate={{ opacity: 1, y: 0 }}
51
-
transition={{ duration: 0.3, ease: "easeOut" }}
52
-
whileTap={{ scale: 0.95 }}
53
-
className="flex flex-col h-full bg-black/10 dark:bg-white/3 p-4 rounded-lg hover:bg-black/15 dark:hover:bg-white/5 transition-colors"
54
-
>
55
-
<h2 className="font-medium text-lg">{it.name}</h2>
56
-
<p className="text-sm text-black/80 dark:text-white/80 mt-1 line-clamp-2">
57
-
{it.description}
58
-
</p>
59
-
</motion.div>
60
-
</Link>
61
-
))}
62
-
</div>
54
+
<h2 className="font-medium text-lg">{it.name}</h2>
55
+
<p className="text-sm text-black/80 dark:text-white/80 mt-1 line-clamp-2">
56
+
{it.description}
57
+
</p>
58
+
</motion.div>
59
+
</Link>
60
+
))}
63
61
</div>
64
62
</div>
65
63
</div>