diff options
Diffstat (limited to 'apps')
| -rw-r--r-- | apps/web/src/components/editor/panels/assets/views/stickers.tsx | 49 |
1 files changed, 17 insertions, 32 deletions
diff --git a/apps/web/src/components/editor/panels/assets/views/stickers.tsx b/apps/web/src/components/editor/panels/assets/views/stickers.tsx index 285b37d3..5b076466 100644 --- a/apps/web/src/components/editor/panels/assets/views/stickers.tsx +++ b/apps/web/src/components/editor/panels/assets/views/stickers.tsx @@ -8,6 +8,7 @@ import { DraggableItem } from "@/components/editor/panels/assets/draggable-item" import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Spinner } from "@/components/ui/spinner";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { useEditor } from "@/hooks/use-editor";
import { resolveStickerIntrinsicSize } from "@/lib/stickers";
import {
@@ -70,41 +71,25 @@ export function StickersView() { />
</div>
- <div className="mt-2 flex min-h-0 flex-1 flex-col">
- <div className="border-b border-border px-2">
- <div
- role="tablist"
- aria-label="Sticker categories"
- className="text-muted-foreground inline-flex h-auto items-center gap-0 bg-transparent p-0"
- >
- {Object.entries(STICKER_CATEGORIES).map(([key, label]) => {
- const isActive = key === selectedCategory;
- return (
- <button
- key={key}
- type="button"
- role="tab"
- aria-selected={isActive}
- onClick={() =>
- setSelectedCategory({
- category: key as StickerCategory,
- })
- }
- className={cn(
- "text-muted-foreground rounded-none border-b-2 border-transparent px-3 py-2 text-sm font-medium whitespace-nowrap -mb-px",
- isActive && "text-primary border-primary",
- )}
- >
- {label}
- </button>
- );
- })}
- </div>
- </div>
+ <Tabs
+ value={selectedCategory}
+ onValueChange={(value) => {
+ setSelectedCategory({ category: value as StickerCategory });
+ }}
+ variant="underline"
+ className="mt-2 flex min-h-0 flex-1 flex-col"
+ >
+ <TabsList aria-label="Sticker categories">
+ {Object.entries(STICKER_CATEGORIES).map(([key, label]) => (
+ <TabsTrigger key={key} value={key}>
+ {label}
+ </TabsTrigger>
+ ))}
+ </TabsList>
<div className="min-h-0 flex-1 overflow-y-auto px-4 pt-4">
<StickersContentView />
</div>
- </div>
+ </Tabs>
</div>
);
}
|