feat: full studio build -- light theme, canvas thumbnails, i18n (fa/en)

2026-05-24 17:37:21 +03:30
parent d962483359
commit c61f587767
295 changed files with 29797 additions and 265 deletions
@@ -0,0 +1,137 @@
+"use client";
+
+import type { ComponentType } from "react";
+import {
+  Clapperboard,
+  Gift,
+  Images,
+  LayoutGrid,
+  Mail,
+  Megaphone,
+  Monitor,
+  Music2,
+  Play,
+  Scissors,
+  Share2,
+  SlidersHorizontal,
+  TrendingUp,
+} from "lucide-react";
+
+import {
+  VideoTemplatesPremiumToggle,
+  VideoTemplatesSizeSelect,
+} from "@/components/templates/video/VideoTemplatesFilterControls";
+import type { AspectRatioFilter, VideoSidebarCategoryId } from "@/lib/video-templates-catalog";
+import { cn } from "@/lib/utils";
+
+const SIDEBAR_CATEGORIES: {
+  id: VideoSidebarCategoryId;
+  label: string;
+  icon: ComponentType<{ className?: string }>;
+  count?: number;
+}[] = [
+  { id: "all", label: "All Templates", icon: LayoutGrid },
+  { id: "animation", label: "Animation Videos", icon: Play, count: 418 },
+  { id: "intros", label: "Intros and Logos", icon: Clapperboard, count: 851 },
+  { id: "editing", label: "Video Editing", icon: Scissors },
+  { id: "invitation", label: "Invitation Videos", icon: Mail },
+  { id: "holiday", label: "Holiday Videos", icon: Gift },
+  { id: "slideshow", label: "Slideshow", icon: Images },
+  { id: "presentations", label: "Presentations", icon: Monitor },
+  { id: "social", label: "Social Media Videos", icon: Share2 },
+  { id: "ads", label: "Video Ad Templates", icon: Megaphone },
+  { id: "sales", label: "Sales Videos", icon: TrendingUp },
+  { id: "music", label: "Music Visualization", icon: Music2 },
+];
+
+interface VideoTemplatesCategorySidebarProps {
+  activeCategory: VideoSidebarCategoryId;
+  onCategoryChange: (id: VideoSidebarCategoryId) => void;
+  premiumOnly: boolean;
+  onPremiumOnlyChange: (value: boolean) => void;
+  aspectRatio: AspectRatioFilter;
+  onAspectRatioChange: (value: AspectRatioFilter) => void;
+  showFilters: boolean;
+  onToggleFilters: () => void;
+}
+
+export function VideoTemplatesCategorySidebar({
+  activeCategory,
+  onCategoryChange,
+  premiumOnly,
+  onPremiumOnlyChange,
+  aspectRatio,
+  onAspectRatioChange,
+  showFilters,
+  onToggleFilters,
+}: VideoTemplatesCategorySidebarProps) {
+  return (
+    <nav aria-label="Template categories" className="sticky top-24">
+      <ul className="space-y-0.5">
+        {SIDEBAR_CATEGORIES.map((category) => {
+          const Icon = category.icon;
+          const isActive = activeCategory === category.id;
+          return (
+            <li key={category.id}>
+              <button
+                type="button"
+                onClick={() => onCategoryChange(category.id)}
+                className={cn(
+                  "flex w-full cursor-pointer items-center gap-2.5 rounded-lg px-3 py-2 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2",
+                  isActive
+                    ? "bg-blue-50 font-semibold text-blue-600"
+                    : "text-gray-700 hover:bg-gray-50"
+                )}
+              >
+                <Icon
+                  className={cn(
+                    "h-4 w-4 shrink-0",
+                    isActive ? "text-blue-500" : "text-gray-500"
+                  )}
+                  aria-hidden
+                />
+                <span className="min-w-0 flex-1 truncate text-left">{category.label}</span>
+                {category.count !== undefined ? (
+                  <span className="ml-auto rounded bg-gray-100 px-1.5 py-0.5 text-[11px] text-gray-500">
+                    {category.count}
+                  </span>
+                ) : null}
+              </button>
+            </li>
+          );
+        })}
+      </ul>
+
+      <div className="my-4 border-t border-gray-100" />
+
+      <button
+        type="button"
+        onClick={onToggleFilters}
+        aria-expanded={showFilters}
+        className="flex w-full cursor-pointer items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2"
+      >
+        <SlidersHorizontal className="h-4 w-4 text-gray-500" aria-hidden />
+        Filters
+      </button>
+
+      {showFilters ? (
+        <div className="mt-3 space-y-4 rounded-lg border border-gray-100 bg-gray-50/50 p-3">
+          <VideoTemplatesPremiumToggle
+            checked={premiumOnly}
+            onCheckedChange={onPremiumOnlyChange}
+            switchId="premium-only-sidebar"
+            className="justify-between"
+          />
+          <div className="space-y-1.5">
+            <p className="text-xs font-medium text-gray-500">Size</p>
+            <VideoTemplatesSizeSelect
+              value={aspectRatio}
+              onValueChange={onAspectRatioChange}
+              triggerClassName="w-full"
+            />
+          </div>
+        </div>
+      ) : null}
+    </nav>
+  );
+}