Untitled
unknown
plain_text
6 months ago
5.9 kB
3
Indexable
const { widget } = figma; const { useEffect, AutoLayout, Text } = widget; // Import required components import Avatar from "./components/Avatar"; import Button from "./components/Button"; function ProfileWidget() { // Profile menu items data const menuItems = [ { icon: "<svg width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' fill='currentColor'/></svg>", label: "Favourites" }, { icon: "<svg width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M20 6h-2.18c.11-.31.18-.65.18-1 0-1.66-1.34-3-3-3-1.05 0-1.96.54-2.5 1.35l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-5-2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM9 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm11 15H4v-2h16v2zm0-5H4V8h5.08L7 10.83 8.62 12 11 8.76l1-1.36 1 1.36L15.38 12 17 10.83 14.92 8H20v6z' fill='currentColor'/></svg>", label: "Vouchers" }, { icon: "<svg width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M20 6h-2.18c.11-.31.18-.65.18-1 0-1.66-1.34-3-3-3-1.05 0-1.96.54-2.5 1.35l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2z' fill='currentColor'/></svg>", label: "Gift cards" }, { icon: "<svg width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z' fill='currentColor'/></svg>", label: "Memberships" }, { icon: "<svg width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6z' fill='currentColor'/></svg>", label: "Forms" }, { icon: "<svg width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z' fill='currentColor'/></svg>", label: "Orders" }, { icon: "<svg width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z' fill='currentColor'/></svg>", label: "Payment methods" }, { icon: "<svg width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.63-.07.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z' fill='currentColor'/></svg>", label: "Settings" } ]; useEffect(() => { const createProfile = async () => { const node = await figma.createNodeFromJSXAsync( <AutoLayout direction="vertical" padding={16} width={400} fill="#FFFFFF" spacing={16} > {/* Header */} <Text fontSize={24} fontWeight="bold" fill="#000000" > Profile </Text> {/* Profile Card */} <AutoLayout width="fill-parent" padding={16} cornerRadius={16} fill="#FFFFFF" stroke="#E1E4EA" spacing={12} verticalAlignItems="center" > <Avatar size="xl" style="text" /> <AutoLayout direction="vertical" spacing={4}> <Text fontSize={18} fontWeight="bold" fill="#000000" > John Smith </Text> <Text fontSize={14} fill="#71767F" > Edit profile </Text> </AutoLayout> </AutoLayout> {/* Menu Items */} {menuItems.map((item, index) => ( <AutoLayout key={index} width="fill-parent" padding={{ vertical: 12, horizontal: 0 }} verticalAlignItems="center" stroke={{ type: 'solid', color: '#E1E4EA' }} strokeAlign="bottom" > <Button label={item.label} leftIcon={item.icon} rightIcon="<svg width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z' fill='#71767F'/></svg>" style="ghost" theme="neutral" size="large" width="fill-parent" /> </AutoLayout> ))} </AutoLayout> ); figma.currentPage.appendChild(node); figma.viewport.scrollAndZoomIntoView([node]); }; createProfile(); }); return <Text>Profile Widget</Text>; } widget.register(ProfileWidget);
Editor is loading...
Leave a Comment