Untitled
unknown
plain_text
5 months ago
5.5 kB
4
Indexable
const { widget } = figma; const { useEffect, AutoLayout, Text, Frame, SVG } = widget; // Import required components import Button from "./components/Button"; import Avatar from "./components/Avatar"; import CalendarCell from "./components/CalendarCell"; import DatePickerListItem from "./components/DatePickerListItem"; function SelectTimeWidget() { useEffect(() => { const createComponent = async () => { const node = await figma.createNodeFromJSXAsync( <AutoLayout direction="vertical" width={440} padding={24} fill="#FFFFFF" spacing={24} > {/* Header with back and close buttons */} <AutoLayout width="fill-parent" verticalAlignItems="center" horizontalAlignItems="start" spacing="auto" > {/* Back button */} <Button style="ghost" theme="neutral" leftIcon='<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M15 19L8 12L15 5" stroke="currentColor" stroke-width="2"/></svg>' showText={false} /> <Text fontSize={32} fontFamily="Inter" fontWeight="bold" > Select time </Text> {/* Close button */} <Button style="ghost" theme="neutral" leftIcon='<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2"/></svg>' showText={false} /> </AutoLayout> {/* Staff selector */} <AutoLayout verticalAlignItems="center" spacing={8} fill="#F8F9FC" padding={8} cornerRadius={999} > <Avatar size="xs" style="text" /> <Text fontSize={16} fontWeight="medium" > Emily </Text> <SVG src='<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="2"/></svg>' width={16} height={16} /> {/* Calendar button */} <AutoLayout verticalAlignItems="center" horizontalAlignItems="end" spacing={8} fill="#F8F9FC" padding={8} cornerRadius={999} > <Button style="ghost" theme="neutral" rightIcon='<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M19 4H5C3.89543 4 3 4.89543 3 6V20C3 21.1046 3.89543 22 5 22H19C20.1046 22 21 21.1046 21 20V6C21 4.89543 20.1046 4 19 4Z" stroke="currentColor" stroke-width="2"/></svg>' showText={false} /> </AutoLayout> </AutoLayout> {/* Month header */} <Text fontSize={18} fontWeight="semibold" fill="#000000" > September 2024 </Text> {/* Calendar days */} <AutoLayout spacing={16} horizontalAlignItems="center" > {[ {day: 18, label: 'Wed', state: 'active'}, {day: 19, label: 'Thu', state: 'default'}, {day: 20, label: 'Fri', state: 'default'}, {day: 21, label: 'Sat', state: 'default'}, {day: 22, label: 'Sun', state: 'disabled'}, ].map((item) => ( <AutoLayout direction="vertical" spacing={8} horizontalAlignItems="center" > <CalendarCell dayNumber={item.day} state={item.state as any} width={64} height={64} /> <Text fontSize={14} fill={item.state === 'disabled' ? '#CACFD8' : '#000000'} > {item.label} </Text> </AutoLayout> ))} </AutoLayout> {/* Time slots */} <AutoLayout direction="vertical" spacing={12} width="fill-parent" > {['11:00 AM', '11:30 AM', '2:00 PM', '3:30 PM'].map((time) => ( <DatePickerListItem state="default" title={time} width="fill-parent" /> ))} </AutoLayout> {/* Footer text */} <AutoLayout spacing={4} > <Text fontSize={14} fill="#71767F" > Can't find a suitable time? </Text> <Text fontSize={14} fill="#7C3AED" textDecoration="underline" > Join the waitlist. </Text> </AutoLayout> </AutoLayout> ); figma.currentPage.appendChild(node); figma.viewport.scrollAndZoomIntoView([node]); }; createComponent(); }, []); return <Text>Select Time Widget</Text>; } widget.register(SelectTimeWidget);
Editor is loading...
Leave a Comment