128 lines
3.1 KiB
TypeScript
128 lines
3.1 KiB
TypeScript
import classNames from "classnames";
|
|
import React from "react";
|
|
|
|
/* -------------------------------------------------------------------------- */
|
|
/* Components */
|
|
/* -------------------------------------------------------------------------- */
|
|
import Typography from "./typography/Typography";
|
|
import Heading from "./typography/Heading";
|
|
import Link from "./typography/Link";
|
|
/* -------------------------------------------------------------------------- */
|
|
/* Props */
|
|
/* -------------------------------------------------------------------------- */
|
|
type Props = {
|
|
/**
|
|
* Card component accept children
|
|
*/
|
|
children: React.ReactNode;
|
|
/**
|
|
* Styling the card component
|
|
*/
|
|
className?: string | undefined;
|
|
};
|
|
|
|
const Card = ({ children, className }: Props) => {
|
|
return (
|
|
<div
|
|
className={classNames([
|
|
className,
|
|
"inline-flex flex-col justify-between p-4 items-start rounded border border-gray-75 gap-y-8 overflow-hidden",
|
|
])}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// Avatar function
|
|
type AvatarProps = {
|
|
children?: React.ReactNode;
|
|
};
|
|
Card.Avatar = function CardAvatar({ children }: AvatarProps) {
|
|
return <div>{children}</div>;
|
|
};
|
|
|
|
// Title function
|
|
Card.Title = function CardTitle({ children, className }: Props) {
|
|
return (
|
|
<Heading className={classNames([className, "select-none "])}>
|
|
{children}
|
|
</Heading>
|
|
);
|
|
};
|
|
|
|
// SubTitle function
|
|
Card.SubTitle = function CardSubTitle({ children, className }: Props) {
|
|
return (
|
|
<Typography className={classNames([className, ""])}>{children}</Typography>
|
|
);
|
|
};
|
|
|
|
// Body function
|
|
Card.Body = function CardTitle({ children, className }: Props) {
|
|
return (
|
|
<Typography //
|
|
fontWeightVariant="normal"
|
|
className={classNames([className, "text-sm h-14 overflow-hidden "])}
|
|
>
|
|
{children}
|
|
</Typography>
|
|
);
|
|
};
|
|
|
|
// Cardheader function
|
|
Card.CardHeader = function CardCardHeader({ children, className }: Props) {
|
|
return (
|
|
<div className={classNames([className, "flex items-start gap-4"])}>
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// Cardcontent function
|
|
Card.CardContent = function CardCardContent({ children, className }: Props) {
|
|
return (
|
|
<div className={classNames([className, "flex flex-col gap-y-4 "])}>
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// Cardaction function
|
|
type CardActionProps = {
|
|
children: React.ReactNode;
|
|
className?: string | undefined;
|
|
href?: string;
|
|
};
|
|
Card.CardAction = function CardCardAction({
|
|
children,
|
|
className,
|
|
href = "#",
|
|
}: CardActionProps) {
|
|
return (
|
|
<Link
|
|
to={href}
|
|
className={classNames([className, "flex items-center gap-2"])}
|
|
>
|
|
{children}
|
|
</Link>
|
|
);
|
|
};
|
|
|
|
// CardMedia function
|
|
type CardMediaProps = {
|
|
children?: React.ReactNode;
|
|
className?: string | undefined;
|
|
src?: string;
|
|
};
|
|
Card.CardMedia = function CardCardMedia({
|
|
className,
|
|
src = "#",
|
|
}: CardMediaProps) {
|
|
return (
|
|
<img src={src} className={classNames([className, "w-full h-32 rounded"])} />
|
|
);
|
|
};
|
|
|
|
export default Card;
|