From 913bc82350702b550860e21cc3d301ef83706a89 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Fri, 1 Nov 2024 10:52:54 -0500
Subject: [PATCH] feat: move animation to astro styles

---
 .../index.tsx => PreviewWrapper.tsx}          | 10 +++++-----
 .../Embeds/PreviewWrapper/index.css.ts        | 18 ------------------
 .../src/pages/tools/embed/[embed]/index.astro | 19 +++++++++++++++++++
 3 files changed, 24 insertions(+), 23 deletions(-)
 rename packages/website/src/components/Embeds/{PreviewWrapper/index.tsx => PreviewWrapper.tsx} (79%)
 delete mode 100644 packages/website/src/components/Embeds/PreviewWrapper/index.css.ts

diff --git a/packages/website/src/components/Embeds/PreviewWrapper/index.tsx b/packages/website/src/components/Embeds/PreviewWrapper.tsx
similarity index 79%
rename from packages/website/src/components/Embeds/PreviewWrapper/index.tsx
rename to packages/website/src/components/Embeds/PreviewWrapper.tsx
index beaa627cc..1c0f02772 100644
--- a/packages/website/src/components/Embeds/PreviewWrapper/index.tsx
+++ b/packages/website/src/components/Embeds/PreviewWrapper.tsx
@@ -1,8 +1,7 @@
 import { Box } from '@radix-ui/themes';
 import { useEffect, useRef } from 'react';
-import { embedPreviews } from '../../../constants/embeds';
-import { useEmbedStateCurry } from '../../../stores/embedState/utilities';
-import * as styles from './index.css';
+import { embedPreviews } from '../../constants/embeds';
+import { useEmbedStateCurry } from '../../stores/embedState/utilities';
 
 interface PreviewWrapperProps {
   name: keyof typeof embedPreviews;
@@ -19,9 +18,9 @@ export function PreviewWrapper({ name, naked }: PreviewWrapperProps) {
   useEffect(() => {
     if (!wrapper.current) return;
 
-    wrapper.current.classList.remove(styles.animated);
+    wrapper.current.classList.remove('preview-container-animated');
     void wrapper.current.offsetWidth;
-    wrapper.current.classList.add(styles.animated);
+    wrapper.current.classList.add('preview-container-animated');
   }, [width, height]);
 
   if (naked) {
@@ -47,6 +46,7 @@ export function PreviewWrapper({ name, naked }: PreviewWrapperProps) {
       overflow="hidden"
       style={{ transform: naked ? 'scale(0.25)' : 'translate(-50%, -50%)' }}
       ref={wrapper}
+      className="preview-container-animated"
       width={`${width}px`}
       height={`${height}px`}
     >
diff --git a/packages/website/src/components/Embeds/PreviewWrapper/index.css.ts b/packages/website/src/components/Embeds/PreviewWrapper/index.css.ts
deleted file mode 100644
index 2e34136f4..000000000
--- a/packages/website/src/components/Embeds/PreviewWrapper/index.css.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { keyframes, style } from '@vanilla-extract/css';
-
-const fadeOutBorder = keyframes({
-  from: {
-    outline: '1rem solid #ff0000ff',
-  },
-  to: {
-    outline: '1rem solid #ff000000',
-  },
-});
-
-export const animated = style({
-  animation: `${fadeOutBorder} 0.5s linear`,
-
-  ':hover': {
-    outline: '1rem solid #ff000080',
-  },
-});
diff --git a/packages/website/src/pages/tools/embed/[embed]/index.astro b/packages/website/src/pages/tools/embed/[embed]/index.astro
index 4ab9dec79..cda65e038 100644
--- a/packages/website/src/pages/tools/embed/[embed]/index.astro
+++ b/packages/website/src/pages/tools/embed/[embed]/index.astro
@@ -14,6 +14,25 @@ export const getStaticPaths = (() => {
 
 <title>BlitzKit - {capitalize(Astro.params.embed)} embed</title>
 
+<style is:global>
+  @keyframes fade-out-border {
+    from {
+      outline: 1rem solid #ff0000ff;
+    }
+    to {
+      outline: 0.75rem solid #ff000000;
+    }
+  }
+
+  .preview-container-animated {
+    animation: fade-out-border 0.5s linear;
+  }
+
+  .preview-container-animated:hover {
+    outline: 1rem solid #ff000080;
+  }
+</style>
+
 <BaseLayout>
   <Page client:load embed={Astro.params.embed} />
 </BaseLayout>