レイアウトの概要

import {
    AspectRatio,
    Badge,
    Button,
    Card,
    CardContent,
    Cluster,
    Container,
    Grid,
    HStack,
    ResizableHandle,
    ResizablePanel,
    ResizablePanelGroup,
    ScrollArea,
    VStack,
} from "@gunjo/ui";

const FILTERS = ["すべて", "要レビュー", "承認済み", "保管済み", "自分と共有"];

const TILES = [
    { id: "t1", title: "春キャンペーン", meta: "素材24点" },
    { id: "t2", title: "製品ツアー", meta: "素材8点" },
    { id: "t3", title: "料金の見直し", meta: "素材12点" },
    { id: "t4", title: "パートナー資料", meta: "素材5点" },
];

const ACTIVITY = [
    "彩が「春キャンペーン」の名前を変えました",
    "健が3点を承認しました",
    "芽衣が「パートナー資料」を追加しました",
    "翔が「第1四半期のバナー」を保管しました",
    "梨奈が「製品ツアー」を共有しました",
    "由紀が6点をアップロードしました",
    "太郎がコメントを残しました",
    "直が「第1四半期のバナー」を戻しました",
];

export function WorkspaceShell() {
    return (
        <Container size="lg">
            <VStack gap={6}>
                <HStack justify="between" wrap>
                    <VStack gap={1}>
                        <h2 className="text-xl font-semibold tracking-tight">ワークスペース</h2>
                        <p className="text-sm text-muted-foreground">
                            道具の並び、絞り込み、内容の格子、更新の記録。この4つに分けています。
                        </p>
                    </VStack>
                    <HStack gap={2}>
                        <Button variant="outline">取り込み</Button>
                        <Button>コレクションを作る</Button>
                    </HStack>
                </HStack>

                <Cluster gap={2}>
                    {FILTERS.map((filter) => (
                        <Badge key={filter} variant="secondary">
                            {filter}
                        </Badge>
                    ))}
                </Cluster>

                <ResizablePanelGroup direction="horizontal" className="rounded-lg border">
                    <ResizablePanel defaultSize={68} minSize={40}>
                        <div className="p-4">
                            <Grid cols={{ base: 1, sm: 2 }} gap={4}>
                                {TILES.map((tile) => (
                                    <Card key={tile.id}>
                                        <CardContent className="space-y-3 p-3">
                                            <AspectRatio
                                                ratio={16 / 9}
                                                className="overflow-hidden rounded-md bg-muted"
                                            />
                                            <VStack gap={1}>
                                                <span className="font-medium">{tile.title}</span>
                                                <span className="text-xs text-muted-foreground">
                                                    {tile.meta}
                                                </span>
                                            </VStack>
                                        </CardContent>
                                    </Card>
                                ))}
                            </Grid>
                        </div>
                    </ResizablePanel>
                    <ResizableHandle withHandle />
                    <ResizablePanel defaultSize={32} minSize={22}>
                        <VStack gap={2} className="p-4">
                            <span className="text-sm font-medium">更新の記録</span>
                            <ScrollArea className="max-h-[220px] pr-3">
                                <VStack gap={2}>
                                    {ACTIVITY.map((entry) => (
                                        <p key={entry} className="text-sm text-muted-foreground">
                                            {entry}
                                        </p>
                                    ))}
                                </VStack>
                            </ScrollArea>
                        </VStack>
                    </ResizablePanel>
                </ResizablePanelGroup>
            </VStack>
        </Container>
    );
}