From ef15be10dddb068ba4e56fed1aa726bf3d9bbd93 Mon Sep 17 00:00:00 2001 From: Charlie Rabiller Date: Thu, 21 Oct 2021 11:58:00 -0400 Subject: [PATCH] feat: add skeletons components --- components/kit/components/elements/index.tsx | 8 ++++- .../skeleton/HorizontalSkeletonCard.tsx | 24 +++++++++++++ .../skeleton/PictureAndTextSkeleton.tsx | 21 +++++++++++ .../elements/skeleton/SimpleSkeleton.tsx | 16 +++++++++ components/site/section/SectionDesc.tsx | 8 +++-- pages/components/skeleton/index.tsx | 33 ++++++++++++++++++ public/images/sections/skeleton.png | Bin 0 -> 4215 bytes 7 files changed, 106 insertions(+), 4 deletions(-) create mode 100644 components/kit/components/elements/skeleton/HorizontalSkeletonCard.tsx create mode 100644 components/kit/components/elements/skeleton/PictureAndTextSkeleton.tsx create mode 100644 components/kit/components/elements/skeleton/SimpleSkeleton.tsx create mode 100644 pages/components/skeleton/index.tsx create mode 100644 public/images/sections/skeleton.png diff --git a/components/kit/components/elements/index.tsx b/components/kit/components/elements/index.tsx index 98df1e7..c1f1aef 100644 --- a/components/kit/components/elements/index.tsx +++ b/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 ; diff --git a/components/kit/components/elements/skeleton/HorizontalSkeletonCard.tsx b/components/kit/components/elements/skeleton/HorizontalSkeletonCard.tsx new file mode 100644 index 0000000..e7d019d --- /dev/null +++ b/components/kit/components/elements/skeleton/HorizontalSkeletonCard.tsx @@ -0,0 +1,24 @@ +import React from 'react'; + +const HorizontalSkeletonCard = () => { + return ( +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ); +}; +export default HorizontalSkeletonCard; diff --git a/components/kit/components/elements/skeleton/PictureAndTextSkeleton.tsx b/components/kit/components/elements/skeleton/PictureAndTextSkeleton.tsx new file mode 100644 index 0000000..c4e589f --- /dev/null +++ b/components/kit/components/elements/skeleton/PictureAndTextSkeleton.tsx @@ -0,0 +1,21 @@ +import React from 'react'; + +const PictureAndTextSkeleton = () => { + return ( +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ); +}; +export default PictureAndTextSkeleton; diff --git a/components/kit/components/elements/skeleton/SimpleSkeleton.tsx b/components/kit/components/elements/skeleton/SimpleSkeleton.tsx new file mode 100644 index 0000000..3989c13 --- /dev/null +++ b/components/kit/components/elements/skeleton/SimpleSkeleton.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +const SimpleSkeleton = () => { + return ( +
+
+
+
+
+
+
+
+
+ ); +}; +export default SimpleSkeleton; diff --git a/components/site/section/SectionDesc.tsx b/components/site/section/SectionDesc.tsx index 6236b60..7cb4b07 100644 --- a/components/site/section/SectionDesc.tsx +++ b/components/site/section/SectionDesc.tsx @@ -30,15 +30,17 @@ const SectionDesc = ({ title, items, id, hasCommingSoon, isTemplate, withPub }: return (
{section.isNew && ( -
+
diff --git a/pages/components/skeleton/index.tsx b/pages/components/skeleton/index.tsx new file mode 100644 index 0000000..841d386 --- /dev/null +++ b/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 ( + + + } component={SimpleSkeleton} /> + } + component={PictureAndTextSkeleton} + /> + } + component={HorizontalSkeletonCard} + /> + + ); +}; + +export default ComponentsPage; diff --git a/public/images/sections/skeleton.png b/public/images/sections/skeleton.png new file mode 100644 index 0000000000000000000000000000000000000000..50142bce41e03927e9ccf3ba70bd9f49459a0829 GIT binary patch literal 4215 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 Mu`@@j94_Aa2kMuSzyJUM literal 0 HcmV?d00001