From 74cd3ea604c776815538245f3678be8101eac427 Mon Sep 17 00:00:00 2001
From: Mohammad Kazem Khajeh <kazem_kh95@hotmail.com>
Date: Sun, 10 Nov 2024 13:55:29 +0100
Subject: [PATCH] feat: create skeletons for component, create loading tsx

---
 .../(default)/rules/(main)/loading.tsx        |  9 +++++++
 src/components/rules/RuleCardListSkeleton.tsx | 14 +++++++++++
 src/components/rules/RuleCardSkeleton.tsx     | 24 +++++++++++++++++++
 3 files changed, 47 insertions(+)
 create mode 100644 src/app/[locale]/(default)/rules/(main)/loading.tsx
 create mode 100644 src/components/rules/RuleCardListSkeleton.tsx
 create mode 100644 src/components/rules/RuleCardSkeleton.tsx

diff --git a/src/app/[locale]/(default)/rules/(main)/loading.tsx b/src/app/[locale]/(default)/rules/(main)/loading.tsx
new file mode 100644
index 0000000..49b6223
--- /dev/null
+++ b/src/app/[locale]/(default)/rules/(main)/loading.tsx
@@ -0,0 +1,9 @@
+import { RuleCardListSkeleton } from '@/components/rules/RuleCardListSkeleton';
+
+export default function RulesSkeleton() {
+  return (
+    <>
+      <RuleCardListSkeleton />
+    </>
+  );
+}
diff --git a/src/components/rules/RuleCardListSkeleton.tsx b/src/components/rules/RuleCardListSkeleton.tsx
new file mode 100644
index 0000000..61e90da
--- /dev/null
+++ b/src/components/rules/RuleCardListSkeleton.tsx
@@ -0,0 +1,14 @@
+import { RuleCardSkeleton } from '@/components/rules/RuleCardSkeleton';
+import { useId } from 'react';
+
+function RuleCardListSkeleton() {
+  return (
+    <div className='mt-5 flex size-full flex-col items-center justify-center'>
+      {Array.from({ length: 5 }).map(() => (
+        <RuleCardSkeleton key={useId()} />
+      ))}
+    </div>
+  );
+}
+
+export { RuleCardListSkeleton };
diff --git a/src/components/rules/RuleCardSkeleton.tsx b/src/components/rules/RuleCardSkeleton.tsx
new file mode 100644
index 0000000..1091637
--- /dev/null
+++ b/src/components/rules/RuleCardSkeleton.tsx
@@ -0,0 +1,24 @@
+import { Button } from '@/components/ui/Button';
+import { Card, CardTitle } from '@/components/ui/Card';
+import { Skeleton } from '@/components/ui/Skeleton';
+import { cx } from '@/lib/utils';
+
+function RuleCardSkeleton() {
+  return (
+    <Button
+      className={cx('group whitespace-normal font-normal ring-0')}
+      asChild
+      variant='none'
+      size='none'
+    >
+      <Card className='mb-3 h-[68px] w-full max-w-[614px] shrink transform overflow-hidden rounded-xl brightness-95 transition delay-150 duration-300 ease-in-out hover:scale-105 hover:border-primary hover:shadow-lg hover:brightness-100 md:h-[138px] dark:brightness-100 hover:dark:brightness-110'>
+        <Skeleton className='h-full w-1/3 rounded-none' />
+        <CardTitle className='flex h-full w-2/3 items-center justify-center'>
+          <Skeleton className='h-4 w-full max-w-24 rounded-full sm:max-w-48 md:h-7' />
+        </CardTitle>
+      </Card>
+    </Button>
+  );
+}
+
+export { RuleCardSkeleton };