95 lines
2.1 KiB
TypeScript
95 lines
2.1 KiB
TypeScript
import Skeleton from "react-loading-skeleton";
|
|
import AspectRatio from "./AspectRatio";
|
|
import classNames from "classnames";
|
|
|
|
/* -------------------------------------------------------------------------- */
|
|
/* Props */
|
|
/* -------------------------------------------------------------------------- */
|
|
type Props = {
|
|
/**
|
|
* Card component accept children
|
|
*/
|
|
children?: React.ReactNode;
|
|
/**
|
|
* Styling the card component
|
|
*/
|
|
className?: string | undefined;
|
|
};
|
|
|
|
const SkeletonCard = ({ className, children }: Props) => {
|
|
return (
|
|
<div
|
|
className={classNames(
|
|
" justify-between p-4 items-start rounded border border-[#F000F0] overflow-hidden",
|
|
className
|
|
)}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// Media
|
|
SkeletonCard.Media = function SkeletonCardCardMedia() {
|
|
return (
|
|
<AspectRatio>
|
|
<AspectRatio.Content>
|
|
<Skeleton count={1} className="h-full" />
|
|
</AspectRatio.Content>
|
|
</AspectRatio>
|
|
);
|
|
};
|
|
|
|
// Content
|
|
SkeletonCard.Content = function SkeletonCardCardContent({
|
|
children,
|
|
className,
|
|
}: Props) {
|
|
return (
|
|
<div className={classNames([className, "flex flex-col gap-y-4 mb-3"])}>
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// Header
|
|
SkeletonCard.Header = function SkeletonCardCardHeader({
|
|
children,
|
|
className,
|
|
}: Props) {
|
|
return (
|
|
<div className={classNames([className, "flex items-start gap-4 w-full"])}>
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// Avatar
|
|
SkeletonCard.Avatar = function SkeletonCardCardAvatar() {
|
|
return <Skeleton circle width={48} height={48} />;
|
|
};
|
|
|
|
// Title
|
|
SkeletonCard.Title = function SkeletonCardCardTitle() {
|
|
return <Skeleton count={1} width={150} height={28} />;
|
|
};
|
|
|
|
// Body
|
|
SkeletonCard.Body = function SkeletonCardCardBody({
|
|
children,
|
|
className,
|
|
}: Props) {
|
|
return <Skeleton count={3} className={classNames("text-sm", className)} />;
|
|
};
|
|
|
|
// Action
|
|
SkeletonCard.Action = function SkeletonCardCardAction({ className }: Props) {
|
|
return (
|
|
<div className={classNames("w-1/2", className)}>
|
|
<Skeleton count={1} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SkeletonCard;
|