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

src/components/studio/sidebar/FontSidebarContent.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { useState } from "react";
+
+import { PropertySelect } from "@/components/studio/properties/PropertyControls";
+import { SidebarPanelShell } from "@/components/studio/sidebar/SidebarPanelShell";
+import { Button } from "@/components/ui/button";
+import { FONT_FAMILY_OPTIONS } from "@/lib/studio-layer-props";
+import { useStudioStore } from "@/lib/studio-store";
+
+export function FontSidebarContent() {
+  const applyFontFamilyToAllTextLayers = useStudioStore(
+    (state) => state.applyFontFamilyToAllTextLayers
+  );
+  const [fontFamily, setFontFamily] = useState<string>(
+    FONT_FAMILY_OPTIONS[0].value
+  );
+
+  const footer = (
+    <Button
+      type="button"
+      variant="outline"
+      className="w-full border-gray-200 bg-white text-gray-700 hover:bg-gray-50 hover:text-gray-900"
+      onClick={() => applyFontFamilyToAllTextLayers(fontFamily)}
+    >
+      Apply to all text layers
+    </Button>
+  );
+
+  return (
+    <SidebarPanelShell title="Font" footer={footer}>
+      <PropertySelect
+        label="Font family"
+        value={fontFamily}
+        options={FONT_FAMILY_OPTIONS.map((item) => ({
+          label: item.label,
+          value: item.value,
+        }))}
+        onChange={setFontFamily}
+      />
+    </SidebarPanelShell>
+  );
+}