feat: add Skeleton component

src/components/Skeleton.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+import clsxm from '@/lib/clsxm';
+
+type SkeletonProps = React.ComponentPropsWithoutRef<'div'>;
+
+export default function Skeleton({ className, ...rest }: SkeletonProps) {
+  return (
+    <div
+      className={clsxm('animate-shimmer bg-[#f6f7f8]', className)}
+      style={{
+        backgroundImage:
+          'linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%)',
+        backgroundSize: '700px 100%',
+        backgroundRepeat: 'no-repeat',
+      }}
+      {...rest}
+    />
+  );
+}

src/pages/components.tsx

@@ -11,6 +11,7 @@ import UnderlineLink from '@/components/links/UnderlineLink';
 import UnstyledLink from '@/components/links/UnstyledLink';
 import NextImage from '@/components/NextImage';
 import Seo from '@/components/Seo';
+import Skeleton from '@/components/Skeleton';
 
 type Color = typeof colorList[number];
 
@@ -304,6 +305,13 @@ export default function ComponentsPage() {
                   alt='Icon'
                 />
               </li>
+              <li className='space-y-2'>
+                <h2 className='text-lg md:text-xl'>Skeleton</h2>
+                <p className={clsx('!mt-1 text-sm', textColor)}>
+                  Skeleton with shimmer effect
+                </p>
+                <Skeleton className='h-72 w-72' />
+              </li>
             </ol>
           </div>
         </section>

tailwind.config.js

@@ -46,9 +46,18 @@ module.exports = {
             filter: 'none',
           },
         },
+        shimmer: {
+          '0%': {
+            backgroundPosition: '-700px 0',
+          },
+          '100%': {
+            backgroundPosition: '700px 0',
+          },
+        },
       },
       animation: {
         flicker: 'flicker 3s linear infinite',
+        shimmer: 'shimmer 1.3s linear infinite',
       },
     },
   },