From 9257ebdd1e215b86d6eb65f090136fb2e618315c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Wed, 15 Nov 2023 16:42:56 -0600
Subject: [PATCH] feat: skeletons

---
 src/components/Skeleton/index.css.ts | 13 +++++++++++++
 src/components/Skeleton/index.tsx    |  6 ++++++
 2 files changed, 19 insertions(+)
 create mode 100644 src/components/Skeleton/index.css.ts
 create mode 100644 src/components/Skeleton/index.tsx

diff --git a/src/components/Skeleton/index.css.ts b/src/components/Skeleton/index.css.ts
new file mode 100644
index 000000000..99acbb31b
--- /dev/null
+++ b/src/components/Skeleton/index.css.ts
@@ -0,0 +1,13 @@
+import { slateDarkA } from '@radix-ui/colors';
+import { keyframes, style } from '@vanilla-extract/css';
+
+const animation = keyframes({
+  '0%': { backgroundColor: slateDarkA.slateA2 },
+  '50%': { backgroundColor: slateDarkA.slateA3 },
+  '100%': { backgroundColor: slateDarkA.slateA2 },
+});
+
+export const skeleton = style({
+  borderRadius: 8,
+  animation: `${animation} 2s ease-in-out infinite`,
+});
diff --git a/src/components/Skeleton/index.tsx b/src/components/Skeleton/index.tsx
new file mode 100644
index 000000000..ca110b831
--- /dev/null
+++ b/src/components/Skeleton/index.tsx
@@ -0,0 +1,6 @@
+import { ComponentProps } from 'react';
+import { skeleton } from './index.css';
+
+export function Skeleton({ className, ...props }: ComponentProps<'div'>) {
+  return <div {...props} className={`${className} ${skeleton}`} />;
+}