From 3511e6134b7acd3f6409044bd4e94f099743658d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CSalar?= <“salar.sali97@gmail.com”>
Date: Tue, 30 Aug 2022 14:24:35 +0300
Subject: [PATCH]  Skeleton Component

---
 src/components/SkeletonCard.tsx | 94 +++++++++++++++++++++++++++++++++
 1 file changed, 94 insertions(+)
 create mode 100644 src/components/SkeletonCard.tsx

diff --git a/src/components/SkeletonCard.tsx b/src/components/SkeletonCard.tsx
new file mode 100644
index 0000000..98bc621
--- /dev/null
+++ b/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;