Skeleton Component

src/components/SkeletonCard.tsx

@@ -0,0 +1,94 @@
+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;