b08337deb7
* api-ref: added syncing between code tabs * updated comment * resolve metadata warning * fix colors
44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
TypeScript
import clsx from "clsx"
|
|
import Link from "next/link"
|
|
import IconArrowUpRightOnBox from "../Icons/ArrowUpRightOnBox"
|
|
|
|
type CardProps = {
|
|
title: string
|
|
text?: string
|
|
href?: string
|
|
className?: string
|
|
}
|
|
|
|
const Card = ({ title, text, href, className }: CardProps) => {
|
|
return (
|
|
<div
|
|
className={clsx(
|
|
"bg-medusa-bg-subtle dark:bg-medusa-code-bg-base-dark w-full rounded",
|
|
"shadow-card-rest dark:shadow-card-rest-dark py-0.75 relative px-1",
|
|
"flex items-center justify-between gap-1 transition-shadow",
|
|
href && "hover:shadow-card-hover dark:hover:shadow-card-hover-dark",
|
|
className
|
|
)}
|
|
>
|
|
<div className="flex flex-col">
|
|
<span className="text-compact-medium-plus text-medusa-fg-base dark:text-medusa-fg-base-dark">
|
|
{title}
|
|
</span>
|
|
{text && <span className="text-compact-medium">{text}</span>}
|
|
</div>
|
|
|
|
{href && (
|
|
<>
|
|
<IconArrowUpRightOnBox />
|
|
<Link
|
|
href={href}
|
|
className="absolute left-0 top-0 h-full w-full rounded"
|
|
/>
|
|
</>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Card
|