Untitled
unknown
plain_text
6 months ago
3.4 kB
2
Indexable
const { widget } = figma; const { useEffect, AutoLayout, Text } = widget; // Import required components import Avatar from "./components/Avatar"; import Status from "./components/Status"; function NotificationCenter() { useEffect(() => { const createComponent = async () => { const node = await figma.createNodeFromJSXAsync( <AutoLayout direction="vertical" padding={16} spacing={24} width={400} fill="#FFFFFF" > {/* Header */} <AutoLayout width="fill-parent" verticalAlignItems="center" spacing={16} > <Text fontSize={32} fontWeight="bold" fill="#1E1D2B" > Notifications </Text> {/* Notification badge */} <AutoLayout padding={{left: 8, right: 8, top: 4, bottom: 4}} fill="#FB3748" cornerRadius={999} > <Text fontSize={14} fontWeight="bold" fill="#FFFFFF" > 2 </Text> </AutoLayout> </AutoLayout> {/* Section Header */} <Text fontSize={24} fontWeight="medium" fill="#71767F" > Today </Text> {/* Notification List */} <AutoLayout direction="vertical" spacing={16} width="fill-parent" > {/* Notification Item 1 */} <AutoLayout spacing={12} verticalAlignItems="center"> <Avatar size="m" style="solid-bg" /> <Text fontSize={16} width={300} fill="#1E1D2B" > What if your next Crush is online right now? </Text> <Status type="notification" /> </AutoLayout> {/* Notification Item 2 */} <AutoLayout spacing={12} verticalAlignItems="center"> <Avatar size="m" style="solid-bg" /> <Text fontSize={16} width={300} fill="#1E1D2B" > Choose who you want to meet! Certified profiles, online at the same time, new profiles... </Text> <Status type="notification" /> </AutoLayout> {/* Notification Item 3 */} <AutoLayout spacing={12} verticalAlignItems="center"> <Avatar size="m" style="solid-bg" /> <Text fontSize={16} width={300} fill="#1E1D2B" > 🎯 Target: Certified profiles! No need to compromise to make great connections </Text> <Status type="notification" /> </AutoLayout> </AutoLayout> </AutoLayout> ); figma.currentPage.appendChild(node); figma.viewport.scrollAndZoomIntoView([node]); }; createComponent(); }); return <Text>Notification Center</Text>; } widget.register(NotificationCenter);
Editor is loading...
Leave a Comment