(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() {
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 className="inline-flex items-center rounded-lg border border-surface-200 dark:border-surface-700 p-0.5 bg-surface-100 dark:bg-surface-800/60">
21 {options.map((opt) => (
22 <button
23 key={opt.id}
24 onClick={() => setFeedLayout(opt.id)}
25 title={opt.label}
26 className={clsx(
27 "flex items-center justify-center w-7 h-7 rounded-md transition-all",
28 layout === opt.id
29 ? "bg-white dark:bg-surface-700 text-surface-900 dark:text-white shadow-sm"
30 : "text-surface-400 dark:text-surface-500 hover:text-surface-600 dark:hover:text-surface-300",
31 )}
32 >
33 <opt.icon size={14} strokeWidth={2} />
34 </button>
35 ))}
36 </div>
37 );
38}