Untitled
unknown
plain_text
6 months ago
2.1 kB
5
Indexable
const { widget } = figma; const { useEffect, AutoLayout, Text, Frame } = widget; import Button from "./components/Button"; function NoAppointmentsWidget() { useEffect(() => { const createComponent = async () => { const node = await figma.createNodeFromJSXAsync( <AutoLayout direction="vertical" width={480} height={400} fill="#FFFFFF" cornerRadius={16} padding={32} horizontalAlignItems="center" verticalAlignItems="center" spacing={16} > {/* Calendar Icon */} <Frame width={64} height={64} cornerRadius={16} fill={{ type: "gradient", gradientType: "linear", gradientTransform: [[1, 0, 0], [0, 1, 0]], gradientStops: [ { position: 0, color: { r: 0.6, g: 0.4, b: 1, a: 1 } }, { position: 1, color: { r: 1, g: 1, b: 1, a: 1 } } ] }} /> {/* Title Text */} <Text fontSize={24} fontWeight={600} fill="#18191B" fontFamily="Inter" > No appointments </Text> {/* Subtitle Text */} <Text fontSize={16} fontWeight={400} fill="#71767F" fontFamily="Inter" textAlign="center" width={320} > Your upcoming and past appointments will appear when you book </Text> {/* Search Button */} <Button label="Search salons" style="outline" theme="neutral" size="large" onClick={() => {}} /> </AutoLayout> ); figma.currentPage.appendChild(node); figma.viewport.scrollAndZoomIntoView([node]); }; createComponent(); }); return <Text>No Appointments Widget</Text>; } widget.register(NoAppointmentsWidget);
Editor is loading...
Leave a Comment