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;