mirror of
https://github.com/urbit/developers.urbit.org.git
synced 2024-09-11 13:55:59 +03:00
41 lines
1.2 KiB
JavaScript
41 lines
1.2 KiB
JavaScript
import Link from "next/link";
|
|
|
|
export default function TallCard({
|
|
image,
|
|
title,
|
|
description,
|
|
callout,
|
|
href,
|
|
className = "",
|
|
}) {
|
|
return (
|
|
<div
|
|
className={`cursor-pointer lg:aspect-w-8 lg:aspect-h-10 xl:aspect-w-8 xl:aspect-h-8 ${className}`}
|
|
>
|
|
<div key={title} className={`bg-wall-100 rounded-xl min-h-0 `}>
|
|
<Link href={href}>
|
|
<div className="flex flex-col space-y-4 p-6 justify-center items-center h-full relative">
|
|
<div className="rounded-lg self-center overflow-hidden border-transparent border w-full shrink-0">
|
|
{image({ className: "w-full h-full" })}
|
|
</div>
|
|
<div className={`grow-1 flex flex-col h-full w-full`}>
|
|
<h3 className="mb-2">{title}</h3>
|
|
<p>{description}</p>
|
|
</div>
|
|
<div className="self-start">
|
|
<Link href={href} passHref>
|
|
<a
|
|
className="button-sm bg-green-400 text-white w-fit"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
{callout}
|
|
</a>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|