43 lines
1.0 KiB
TypeScript
43 lines
1.0 KiB
TypeScript
|
import { ReactNode } from "react";
|
||
|
|
|
||
|
|
interface CardProps {
|
||
|
|
children: ReactNode;
|
||
|
|
}
|
||
|
|
|
||
|
|
const Card = ({ children }: CardProps) => {
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className="dark:from-black/10 dark:to-black/5 dark:border-white/[6%] px-4 pt-3 pb-4 flex flex-col gap-2 border rounded-lg bg-gradient-to-br from-white/90 to-white/80 border-black/[6%]"
|
||
|
|
data-tauri-drag-region
|
||
|
|
>
|
||
|
|
{children}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
const CardHeader = ({ children }: CardProps) => {
|
||
|
|
return (
|
||
|
|
<div className="flex items-center gap-2.5 tracking-wide">{children}</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
const CardIcon = ({ children }: CardProps) => {
|
||
|
|
return (
|
||
|
|
<div className="flex gap-1.5 items-center font-semibold">{children}</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
const CardTool = ({ children }: CardProps) => {
|
||
|
|
return (
|
||
|
|
<div className="flex items-center justify-end flex-grow gap-2">
|
||
|
|
{children}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
const CardBody = ({ children }: CardProps) => {
|
||
|
|
return <div className="text-sm tracking-wide text-zinc-800">{children}</div>;
|
||
|
|
};
|
||
|
|
|
||
|
|
export { Card, CardHeader, CardIcon, CardTool, CardBody };
|