wehub-resource-sync
44 lines
1.6 KiB
TypeScript
44 lines
1.6 KiB
TypeScript
'use client';
|
|
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|
import { useI18n } from '@/lib/hooks/use-i18n';
|
|
import { ColorPicker } from './ColorPicker';
|
|
import { ImagePicker } from './ImagePicker';
|
|
import { updateSlideBackground, useResolvedSlideContent } from './use-slide-surface';
|
|
|
|
/**
|
|
* Slide-background picker — solid color / image tabs. Slide-level, so it
|
|
* dispatches `slide.update {background}` rather than an element op. Seeded from
|
|
* the current background; defaults to the Solid tab (white) when none is set.
|
|
*/
|
|
export function BackgroundControl() {
|
|
const { t } = useI18n();
|
|
const bg = useResolvedSlideContent().canvas.background;
|
|
const color = bg?.type === 'solid' && bg.color ? bg.color : '#ffffff';
|
|
return (
|
|
<Tabs defaultValue={bg?.type === 'image' ? 'image' : 'solid'} className="w-full">
|
|
<TabsList className="w-full">
|
|
<TabsTrigger value="solid" className="flex-1">
|
|
{t('edit.background.solid')}
|
|
</TabsTrigger>
|
|
<TabsTrigger value="image" className="flex-1">
|
|
{t('edit.background.image')}
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="solid" className="pt-3">
|
|
<ColorPicker
|
|
className="w-full"
|
|
value={color}
|
|
onChange={(c) => updateSlideBackground({ type: 'solid', color: c })}
|
|
onCommit={(c) => updateSlideBackground({ type: 'solid', color: c })}
|
|
/>
|
|
</TabsContent>
|
|
<TabsContent value="image" className="pt-3">
|
|
<ImagePicker
|
|
onPick={(src) => updateSlideBackground({ type: 'image', image: { src, size: 'cover' } })}
|
|
/>
|
|
</TabsContent>
|
|
</Tabs>
|
|
);
|
|
}
|