mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
100 lines
3.8 KiB
TypeScript
100 lines
3.8 KiB
TypeScript
const App = `import {Card, CardHeader, CardBody, CardFooter, Image, Button} from "@nextui-org/react";
|
|
|
|
export default function App() {
|
|
return (
|
|
<div className="max-w-[900px] gap-2 grid grid-cols-12 grid-rows-2 px-8">
|
|
<Card className="col-span-12 sm:col-span-4 h-[300px]">
|
|
<CardHeader className="absolute z-10 top-1 flex-col !items-start">
|
|
<p className="text-xs text-white/60 uppercase font-bold">What to watch</p>
|
|
<h4 className="text-white font-medium text-lg">Stream the Acme event</h4>
|
|
</CardHeader>
|
|
<Image
|
|
removeWrapper
|
|
alt="Card background"
|
|
className="z-0 w-full h-full object-cover"
|
|
src="/images/card-example-4.jpeg"
|
|
/>
|
|
</Card>
|
|
<Card className="col-span-12 sm:col-span-4 h-[300px]">
|
|
<CardHeader className="absolute z-10 top-1 flex-col !items-start">
|
|
<p className="text-xs text-white/60 uppercase font-bold">Plant a tree</p>
|
|
<h4 className="text-white font-medium text-lg">Contribute to the planet</h4>
|
|
</CardHeader>
|
|
<Image
|
|
removeWrapper
|
|
alt="Card background"
|
|
className="z-0 w-full h-full object-cover"
|
|
src="/images/card-example-3.jpeg"
|
|
/>
|
|
</Card>
|
|
<Card className="col-span-12 sm:col-span-4 h-[300px]">
|
|
<CardHeader className="absolute z-10 top-1 flex-col !items-start">
|
|
<p className="text-xs text-white/60 uppercase font-bold">Supercharged</p>
|
|
<h4 className="text-white font-medium text-lg">Creates beauty like a beast</h4>
|
|
</CardHeader>
|
|
<Image
|
|
removeWrapper
|
|
alt="Card background"
|
|
className="z-0 w-full h-full object-cover"
|
|
src="/images/card-example-2.jpeg"
|
|
/>
|
|
</Card>
|
|
<Card isFooterBlurred className="w-full h-[300px] col-span-12 sm:col-span-5">
|
|
<CardHeader className="absolute z-10 top-1 flex-col items-start">
|
|
<p className="text-xs text-white/60 uppercase font-bold">New</p>
|
|
<h4 className="text-black font-medium text-2xl">Acme camera</h4>
|
|
</CardHeader>
|
|
<Image
|
|
removeWrapper
|
|
alt="Card example background"
|
|
className="z-0 w-full h-full scale-125 -translate-y-6 object-cover"
|
|
src="/images/card-example-6.jpeg"
|
|
/>
|
|
<CardFooter className="absolute bg-white/30 bottom-0 border-t border-zinc-100/50 z-10 justify-between">
|
|
<div>
|
|
<p className="text-black text-xs">Available soon.</p>
|
|
<p className="text-black text-xs">Get notified.</p>
|
|
</div>
|
|
<Button color="secondary" radius="full" size="sm" variant="flat">
|
|
Notify Me
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
<Card isFooterBlurred className="w-full h-[300px] col-span-12 sm:col-span-7">
|
|
<CardHeader className="absolute z-10 top-1 flex-col items-start">
|
|
<p className="text-xs text-white/60 uppercase font-bold">Your day your way</p>
|
|
<h4 className="text-white/90 font-medium text-xl">Your checklist for better sleep</h4>
|
|
</CardHeader>
|
|
<Image
|
|
removeWrapper
|
|
alt="Relaxing app background"
|
|
className="z-0 w-full h-full object-cover"
|
|
src="/images/card-example-5.jpeg"
|
|
/>
|
|
<CardFooter className="absolute bg-black/40 bottom-0 z-10 border-t border-default-600 dark:border-default-100">
|
|
<div className="flex flex-grow gap-2 items-center">
|
|
<img
|
|
alt="Breathing app icon"
|
|
className="rounded-full w-10 h-11 bg-black"
|
|
src="/images/breathing-app-icon.jpeg"
|
|
/>
|
|
<div className="flex flex-col">
|
|
<p className="text-xs text-white/60">Breathing App</p>
|
|
<p className="text-xs text-white/60">Get a good night's sleep.</p>
|
|
</div>
|
|
</div>
|
|
<Button radius="full" size="sm">Get App</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}`;
|
|
|
|
const react = {
|
|
"/App.jsx": App,
|
|
};
|
|
|
|
export default {
|
|
...react,
|
|
};
|