"use client"; import { Icons } from "@/components/icons"; import { AnimatePresence, motion } from "framer-motion"; import { useState } from "react"; import { Button } from "../custom-btn"; interface OfferingProps { id: number; title: string; description: string; banner: string; } const OFFERINGS = [ { id: 1, title: "Designed to move fast", description: "ui/topia is a collection of ready-to-use UI components designed to enhance interactivity and user experience.", banner: "https://linear.app/cdn-cgi/imagedelivery/fO02fVwohEs9s9UHFwon6A/0e6d3edd-cd37-4bf8-c1bf-b93960169400/f=auto,dpr=2,q=95,fit=scale-down,metadata=none", }, // add more data here ]; export default function LinearCardDemo() { const [selectedOffering, setSelectedOffering] = useState(null); return ( <>

setSelectedOffering(offering)} /> ))}

setSelectedOffering(null)} /> ); } function Card(props: { offering: OfferingProps; onClick: () => void }) { return (

{props.offering.title}

); } function Modal(props: { offering: OfferingProps | null; onClick: () => void }) { return ( <> {!!props.offering && ( )} {!!props.offering && (

{props.offering.title} {props.offering.description}

)} ); } /* NOTE: Only required to work with Tailwind CDN. Include all conditionally rendered classes in a hidden div to ensure Tailwind generates these classes in advance. */ function TailwindCDNWorkaround() { return (

); }

Prop	Type	Default
`id`	`number`	-
`title`	`string`	-
`description`	`string`	-
`banner`	`string`	-

Linear Card

Props

On this page