Untitled
unknown
plain_text
5 months ago
5.6 kB
2
Indexable
const { widget } = figma; const { useEffect, AutoLayout, Text, Frame } = widget; function ProductReviewWidget() { // Define the RoomCard component const RoomCard = ({ title, location, price }: { title: string; location: string; price: string }) => ( <AutoLayout width="fill-parent" padding={16} fill="#F8F9FA" cornerRadius={12} spacing={16} > <Frame width={80} height={60} cornerRadius={8} fill="#E1E4EA" /> <AutoLayout width="fill-parent" verticalAlignItems="center" horizontalAlignItems="space-between" > <AutoLayout direction="vertical" spacing={4}> <Text fontSize={18} fontFamily="Inter" fontWeight={500}> {title} </Text> <Text fontSize={14} fontFamily="Inter" fill="#717784"> {location} </Text> </AutoLayout> <AutoLayout direction="vertical" horizontalAlignItems="end"> <Text fontSize={24} fontFamily="Inter" fontWeight={600}> {price} </Text> <Text fontSize={14} fontFamily="Inter" fill="#717784"> /day </Text> </AutoLayout> </AutoLayout> </AutoLayout> ); useEffect(() => { const createComponent = async () => { const node = await figma.createNodeFromJSXAsync( <AutoLayout direction="vertical" padding={24} width={480} fill="#FFFFFF" cornerRadius={16} spacing={24} > {/* Header */} <AutoLayout width="fill-parent" verticalAlignItems="center" horizontalAlignItems="space-between" > <Text fontSize={24} fontFamily="Inter" fontWeight={600}> Product Review </Text> <AutoLayout fill="#FEF7E6" padding={{ vertical: 4, horizontal: 8 }} cornerRadius={8} spacing={4} > <Text fontSize={14} fontFamily="Inter" fill="#F6B518"> Premium </Text> </AutoLayout> </AutoLayout> {/* Room Cards */} <RoomCard title="The Loft Room" location="2nd Floor, WorkSpace" price="$120" /> <RoomCard title="Executive Suite" location="5th Floor, HighTower Plaza" price="$180" /> {/* Discount Code Section */} <AutoLayout width="fill-parent" fill="#FFFFFF" stroke="#E1E4EA" cornerRadius={8} padding={12} > <Text fontSize={16} fontFamily="Inter"> 4ABBS451515 </Text> </AutoLayout> {/* Discount Badges */} <AutoLayout spacing={8}> {["5% Off", "10% Off", "15% Off"].map((discount) => ( <AutoLayout key={discount} fill="#E8F5E9" cornerRadius={8} padding={{ vertical: 4, horizontal: 12 }} > <Text fontSize={14} fontFamily="Inter" fill="#2E7D32"> {discount} </Text> </AutoLayout> ))} </AutoLayout> {/* Price Breakdown */} <AutoLayout width="fill-parent" direction="vertical" spacing={16} padding={16} fill="#F8F9FA" cornerRadius={12} > {[ { label: "Subtotal", value: "$300.00" }, { label: "Discount (50%)", value: "-$60.00" }, { label: "Credit (1h)", value: "-$20.00" }, { label: "GST (10%)", value: "$22.00", tag: "Inclusive" }, { label: "Total", value: "$242.00", isTotal: true } ].map((item) => ( <AutoLayout key={item.label} width="fill-parent" verticalAlignItems="center" horizontalAlignItems="space-between" > <AutoLayout spacing={8} verticalAlignItems="center"> <Text fontSize={item.isTotal ? 18 : 16} fontFamily="Inter" fontWeight={item.isTotal ? 600 : 400} > {item.label} </Text> {item.tag && ( <AutoLayout fill="#F8F9FA" stroke="#E1E4EA" cornerRadius={16} padding={{ vertical: 2, horizontal: 8 }} > <Text fontSize={12} fontFamily="Inter" fill="#717784"> {item.tag} </Text> </AutoLayout> )} </AutoLayout> <Text fontSize={item.isTotal ? 18 : 16} fontFamily="Inter" fontWeight={item.isTotal ? 600 : 400} > {item.value} </Text> </AutoLayout> ))} </AutoLayout> </AutoLayout> ); figma.currentPage.appendChild(node); figma.viewport.scrollAndZoomIntoView([node]); }; createComponent(); }); // Base render component return <Text>Product Review Widget</Text>; } widget.register(ProductReviewWidget);
Editor is loading...
Leave a Comment