feat: add skeletons components

components/kit/components/elements/index.tsx

@@ -35,7 +35,6 @@ const Elements: FC = () => {
         },
         {
             title: 'Dashboards',
-            isNew: true,
             items: 26,
             img: 'images/sections/data.png',
             link: '/components/data',
@@ -46,6 +45,13 @@ const Elements: FC = () => {
             img: 'images/sections/progress.png',
             link: '/components/progress',
         },
+        {
+            title: 'Skeleton',
+            isNew: true,
+            items: 3,
+            img: 'images/sections/skeleton.png',
+            link: '/components/skeleton',
+        },
     ];
 
     return <SectionDesc withPub id="elements" items={elementsSection} title="Elements" />;

components/kit/components/elements/skeleton/HorizontalSkeletonCard.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+const HorizontalSkeletonCard = () => {
+    return (
+        <div className="bg-white w-1/2 mx-auto p-2 sm:p-4 sm:h-64 rounded-2xl shadow-lg flex flex-col sm:flex-row gap-5 select-none ">
+            <div className="h-52 sm:h-full sm:w-72 rounded-xl bg-gray-200 animate-pulse"></div>
+            <div className="flex flex-col flex-1 gap-5 sm:p-2">
+                <div className="flex flex-1 flex-col gap-3">
+                    <div className="bg-gray-200 w-full animate-pulse h-14 rounded-2xl"></div>
+                    <div className="bg-gray-200 w-full animate-pulse h-3 rounded-2xl"></div>
+                    <div className="bg-gray-200 w-full animate-pulse h-3 rounded-2xl"></div>
+                    <div className="bg-gray-200 w-full animate-pulse h-3 rounded-2xl"></div>
+                    <div className="bg-gray-200 w-full animate-pulse h-3 rounded-2xl"></div>
+                </div>
+                <div className="mt-auto flex gap-3">
+                    <div className="bg-gray-200 w-20 h-8 animate-pulse rounded-full"></div>
+                    <div className="bg-gray-200 w-20 h-8 animate-pulse rounded-full"></div>
+                    <div className="bg-gray-200 w-20 h-8 animate-pulse rounded-full ml-auto"></div>
+                </div>
+            </div>
+        </div>
+    );
+};
+export default HorizontalSkeletonCard;

components/kit/components/elements/skeleton/PictureAndTextSkeleton.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+const PictureAndTextSkeleton = () => {
+    return (
+        <div className="bg-white rounded w-96 mx-auto rounded-2xl shadow-lg">
+            <div className="bg-gray-200 h-48 p-3 overflow-hidden animate-pulse"> </div>
+            <div className="h- p-3">
+                <div className="grid grid-cols-3 gap-4 mt-2">
+                    <div className="h-8 bg-gray-200 rounded animate-pulse"></div>
+                    <div className="h-8 bg-gray-200 rounded animate-pulse"></div>
+                    <div className="h-8 bg-gray-200 rounded animate-pulse"></div>
+                    <div className="h-8 col-span-2 bg-gray-200 rounded animate-pulse"></div>
+                    <div className=" h-8 bg-gray-200 rounded animate-pulse"></div>
+                    <div className="..."></div>
+                    <div className="col-span-2 ..."></div>
+                </div>
+            </div>
+        </div>
+    );
+};
+export default PictureAndTextSkeleton;

components/kit/components/elements/skeleton/SimpleSkeleton.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+const SimpleSkeleton = () => {
+    return (
+        <div className="w-60 h-24 border-2 rounded-md mx-auto">
+            <div className="flex animate-pulse flex-row items-center h-full justify-center space-x-5">
+                <div className="w-12 bg-gray-300 h-12 rounded-full "></div>
+                <div className="flex flex-col space-y-3">
+                    <div className="w-36 bg-gray-300 h-6 rounded-md "></div>
+                    <div className="w-24 bg-gray-300 h-6 rounded-md "></div>
+                </div>
+            </div>
+        </div>
+    );
+};
+export default SimpleSkeleton;

components/site/section/SectionDesc.tsx

@@ -30,15 +30,17 @@ const SectionDesc = ({ title, items, id, hasCommingSoon, isTemplate, withPub }:
                     return (
                         <div
                             key={section.title}
-                            className="border rounded-lg relative w-full sm:w-1/3 m-2 md:m-0  md:w-1/5"
+                            className={`${
+                                section.isNew ? 'border-2 border-green-500' : 'border'
+                            } rounded-lg relative w-full sm:w-1/3 m-2 md:m-0  md:w-1/5`}
                         >
                             {section.isNew && (
-                                <div className="absolute z-20 top-4 right-4">
+                                <div className="absolute z-20 -top-3 -right-4">
                                     <Badge
                                         color="bg-green-500"
                                         textColor="text-white"
                                         rounded="rounded"
-                                        label="New items"
+                                        label="New !"
                                         isSmall={true}
                                         isMediumWeight={true}
                                     />

pages/components/skeleton/index.tsx

@@ -0,0 +1,33 @@
+import React, { FC } from 'react';
+import AppLayout from '../../../components/layout/AppLayout';
+import ComponentLayout from '../../../components/layout/ComponentLayout';
+import SectionHeader from '../../../components/site/header/SectionHeader';
+import SimpleSkeleton from '../../../components/kit/components/elements/skeleton/SimpleSkeleton';
+import PictureAndTextSkeleton from '../../../components/kit/components/elements/skeleton/PictureAndTextSkeleton';
+import HorizontalSkeletonCard from '../../../components/kit/components/elements/skeleton/HorizontalSkeletonCard';
+
+const ComponentsPage: FC = () => {
+    return (
+        <AppLayout
+            title="Skeleton free Tailwind components"
+            desc="Skeleton, banner, placeolder and more components for tailwind css"
+        >
+            <SectionHeader title="Skeletons" />
+            <ComponentLayout vertical={true} title="Simple" element={<SimpleSkeleton />} component={SimpleSkeleton} />
+            <ComponentLayout
+                vertical={true}
+                title="Card skeleton"
+                element={<PictureAndTextSkeleton />}
+                component={PictureAndTextSkeleton}
+            />
+            <ComponentLayout
+                vertical={true}
+                title="Horizontal Card skeleton"
+                element={<HorizontalSkeletonCard />}
+                component={HorizontalSkeletonCard}
+            />
+        </AppLayout>
+    );
+};
+
+export default ComponentsPage;