An interactive layout component based on the Tile component that can be used as a generic container to build the pase of panels, cards, lists and other components.
<div className="flex gap-3 justify-center bg-grey-100 p-3 w-full">
<TileInteractive onClick={() => alert('onClick')} className="size-25" borderRadius="md" />
<TileInteractive href='/' className="size-25" borderRadius="md" border />
</div>
Color Scheme
<div className="flex gap-3">
<TileInteractive onClick={()=>alert('1')} className="size-25" borderRadius="md" border colorScheme={{ base: 'blue1' }} />
<TileInteractive onClick={()=>alert('2')} className="size-25" borderRadius="md" border colorScheme={{ base: 'purple2' }} />
<TileInteractive onClick={()=>alert('3')} className="size-25" borderRadius="md" border colorScheme={{ base: 'grey2' }} />
</div>
Example use case (Card)
<TileInteractive
href='/'
border
borderRadius='md'
className="w-80"
>
<article>
<Image src="https://picsum.photos/id/919/320/200" alt="Pine Forest" />
<div className="flex flex-col gap-4 px-3 py-4">
<Heading as="h2" size="xs">
Pine Forest
</Heading>
<Text>
Tall pine trees with slender trunks rise from a lush green forest floor.
</Text>
</div>
</article>
</TileInteractive>