Soroush.Asadi
44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
"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>
|
|
);
|
|
}
|