This commit is contained in:
ct
2025-06-17 21:01:01 +08:00
parent bf54d37306
commit 886d20a793
2 changed files with 20 additions and 6 deletions

View File

@@ -57,9 +57,9 @@ const sampleTimelineElements = [
startTime: 0, startTime: 0,
layer: 2, layer: 2,
duration: 4, duration: 4,
x: 50, x: 90,
y: 600, y: 180,
fontSize: 24, fontSize: 40,
fontWeight: 'bold', fontWeight: 'bold',
fontFamily: 'Montserrat', fontFamily: 'Montserrat',
fontStyle: 'normal', fontStyle: 'normal',

View File

@@ -122,7 +122,7 @@ export default function TextSidebar({ isOpen, onClose }) {
return ( return (
<Sheet open={isOpen} onOpenChange={(open) => !open && onClose()}> <Sheet open={isOpen} onOpenChange={(open) => !open && onClose()}>
<SheetContent side="right" className="w-80 overflow-y-auto"> <SheetContent side="right" className="max-[140px] w-full overflow-y-auto">
<SheetHeader> <SheetHeader>
<SheetTitle className="flex items-center gap-3"> <SheetTitle className="flex items-center gap-3">
<Type className="h-6 w-6" /> <Type className="h-6 w-6" />
@@ -140,8 +140,14 @@ export default function TextSidebar({ isOpen, onClose }) {
value={textValue} value={textValue}
onChange={handleTextChange} onChange={handleTextChange}
placeholder="Enter your text..." placeholder="Enter your text..."
className="mt-2 text-center" className="mt-2 text-center text-nowrap"
rows={4} rows={4}
style={{
fontFamily: fontFamily,
fontSize: `${fontSize * 0.6}px`, // Cap preview size for readability
fontWeight: isBold ? 'bold' : 'normal',
fontStyle: isItalic ? 'italic' : 'normal',
}}
/> />
</div> </div>
@@ -155,7 +161,15 @@ export default function TextSidebar({ isOpen, onClose }) {
<SelectContent> <SelectContent>
{AVAILABLE_FONTS.map((font) => ( {AVAILABLE_FONTS.map((font) => (
<SelectItem key={font.value} value={font.value}> <SelectItem key={font.value} value={font.value}>
<span style={{ fontFamily: font.name }}>{font.name}</span> <span
style={{
fontFamily: font.name,
fontWeight: isBold ? 'bold' : 'normal',
fontStyle: isItalic ? 'italic' : 'normal',
}}
>
{font.name}
</span>
</SelectItem> </SelectItem>
))} ))}
</SelectContent> </SelectContent>