External/OpenCut
1
0
Fork 0
mirror of https://github.com/OpenCut-app/OpenCut.git synced 2026-07-13 21:52:53 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor: make stickers use panel base view

Browse Source
This commit is contained in:
Maze Winther
2025-09-01 23:01:15 +02:00
parent 3d67b065f5
commit c5480d307c
2 changed files with 43 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/editor/media-panel/views/stickers.tsx
+37 -60
View File
@@ -20,8 +20,7 @@ import {
import { toast } from "sonner"; import { toast } from "sonner";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { ScrollArea } from "@/components/ui/scroll-area"; import { ScrollArea } from "@/components/ui/scroll-area";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"; import { PanelBaseView as BaseView } from "@/components/editor/panel-base-view";
import { Separator } from "@/components/ui/separator";
import { import {
Tooltip, Tooltip,
TooltipContent, TooltipContent,
@@ -48,63 +47,41 @@ export function StickersView() {
const { selectedCategory, setSelectedCategory } = useStickersStore(); const { selectedCategory, setSelectedCategory } = useStickersStore();
return ( return (
<div className="h-full flex flex-col"> <BaseView
<Tabs value={selectedCategory}
value={selectedCategory} onValueChange={(v) => {
onValueChange={(v) => { if (["all", "general", "brands", "emoji"].includes(v)) {
if (["all", "general", "brands", "emoji"].includes(v)) { setSelectedCategory(v as StickerCategory);
setSelectedCategory(v as StickerCategory); }
} }}
}} tabs={[
className="flex flex-col h-full" {
> value: "all",
<div className="px-3 pt-4 pb-0"> label: "All",
<TabsList> icon: <Grid3X3 className="h-3 w-3" />,
<TabsTrigger value="all" className="gap-1"> content: <StickersContentView category="all" />,
<Grid3X3 className="h-3 w-3" /> },
All {
</TabsTrigger> value: "general",
<TabsTrigger value="general" className="gap-1"> label: "Icons",
<Sparkles className="h-3 w-3" /> icon: <Sparkles className="h-3 w-3" />,
Icons content: <StickersContentView category="general" />,
</TabsTrigger> },
<TabsTrigger value="brands" className="gap-1"> {
<Hash className="h-3 w-3" /> value: "brands",
Brands label: "Brands",
</TabsTrigger> icon: <Hash className="h-3 w-3" />,
<TabsTrigger value="emoji" className="gap-1"> content: <StickersContentView category="brands" />,
<Smile className="h-3 w-3" /> },
Emoji {
</TabsTrigger> value: "emoji",
</TabsList> label: "Emoji",
</div> icon: <Smile className="h-3 w-3" />,
<Separator className="my-4" /> content: <StickersContentView category="emoji" />,
<TabsContent },
value="all" ]}
className="px-3 pt-0 mt-0 flex-1 flex flex-col min-h-0" className="flex flex-col h-full p-0 overflow-hidden"
> />
<StickersContentView category="all" />
</TabsContent>
<TabsContent
value="general"
className="px-3 pt-0 mt-0 flex-1 flex flex-col min-h-0"
>
<StickersContentView category="general" />
</TabsContent>
<TabsContent
value="brands"
className="px-3 pt-0 mt-0 flex-1 flex flex-col min-h-0"
>
<StickersContentView category="brands" />
</TabsContent>
<TabsContent
value="emoji"
className="px-3 pt-0 mt-0 flex-1 flex flex-col min-h-0"
>
<StickersContentView category="emoji" />
</TabsContent>
</Tabs>
</div>
); );
} }
@@ -361,7 +338,7 @@ function StickersContentView({ category }: { category: StickerCategory }) {
}, [isInCollection]); }, [isInCollection]);
return ( return (
<div className="flex flex-col gap-5 mt-1 h-full"> <div className="flex flex-col gap-5 mt-1 h-full p-4">
<div className="space-y-3"> <div className="space-y-3">
<InputWithBack <InputWithBack
isExpanded={isInCollection} isExpanded={isInCollection}
apps/web/src/components/editor/panel-base-view.tsx
+6
View File
@@ -11,6 +11,7 @@ interface PanelBaseViewProps {
tabs?: { tabs?: {
value: string; value: string;
label: string; label: string;
icon?: React.ReactNode;
content: React.ReactNode; content: React.ReactNode;
}[]; }[];
className?: string; className?: string;
@@ -56,6 +57,11 @@ export function PanelBaseView({
<TabsList> <TabsList>
{tabs.map((tab) => ( {tabs.map((tab) => (
<TabsTrigger key={tab.value} value={tab.value}> <TabsTrigger key={tab.value} value={tab.value}>
{tab.icon ? (
<span className="inline-flex items-center mr-1">
{tab.icon}
</span>
) : null}
{tab.label} {tab.label}
</TabsTrigger> </TabsTrigger>
))} ))}