(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
1import React from "react";
2import { List, LayoutGrid } from "lucide-react";
3import { useStore } from "@nanostores/react";
4import {
5 $feedLayout,
6 setFeedLayout,
7 type FeedLayout,
8} from "../../store/feedLayout";
9import { clsx } from "clsx";
10
11export default function LayoutToggle({ className }: { className?: string }) {
12 const layout = useStore($feedLayout);
13
14 const options: { id: FeedLayout; icon: typeof List; label: string }[] = [
15 { id: "list", icon: List, label: "List" },
16 { id: "mosaic", icon: LayoutGrid, label: "Mosaic" },
17 ];
18
19 return (
20 <div
21 className={clsx(
22 "inline-flex items-center rounded-lg border border-surface-200 dark:border-surface-700 p-0.5 bg-surface-50 dark:bg-surface-800/60",
23 className,
24 )}
25 >
26 {options.map((opt) => (
27 <button
28 key={opt.id}
29 onClick={() => setFeedLayout(opt.id)}
30 title={opt.label}
31 className={clsx(
32 "flex items-center justify-center w-7 h-7 rounded-md transition-all",
33 layout === opt.id
34 ? "bg-white dark:bg-surface-700 text-surface-900 dark:text-white shadow-sm"
35 : "text-surface-400 dark:text-surface-500 hover:text-surface-600 dark:hover:text-surface-300",
36 )}
37 >
38 <opt.icon size={14} strokeWidth={2} />
39 </button>
40 ))}
41 </div>
42 );
43}