animated sql feature card

withastro · Apr 10, 2024 · 486c3ec · 486c3ec
1 parent 7f82433
commit 486c3ec
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 22 deletions.
diff --git a/src/pages/db/_components/UseCaseTab.astro b/src/pages/db/_components/UseCaseTab.astro
@@ -20,7 +20,7 @@ const { icon, title, active = false } = Astro.props
     <div
       data-tab-icon-container={title.toLowerCase()}
       aria-selected={active ? "true" : undefined}
-      class='w-fit h-fit landing-section rounded-full p-[4px] bg-astro-gray-300 aria-selected:text-white aria-selected:bg-red-pink-gradient'
+      class='w-fit h-fit landing-section rounded-full p-[4px] bg-astro-gray-300 text-astro-gray-300 aria-selected:text-white aria-selected:bg-red-pink-gradient'
     >
       <div class='bg-black w-16 h-16 landing-section rounded-full'>
         <div

diff --git a/src/pages/db/_components/UseCaseTabs.astro b/src/pages/db/_components/UseCaseTabs.astro
@@ -21,14 +21,14 @@ const useCasesBg = await getImage({ src: background, format: "webp", width: 1280
     >
       <Tab title='Comments' icon='uil:comments-alt' active />
       <Tab title='Blog' icon='uil:notes' />
-      <Tab title='Forms' icon='uil:document-layout-left' />
+      <Tab title='Forms' icon='uil:edit-alt' />
       <Tab title='Feedback' icon='uil:question-circle' />
-      <Tab title='Auth' icon='uil:users-alt' />
+      <Tab title='Auth' icon='uil:lock-alt' />
     </ul>
   </div>
 
   <div class="z-100 mt-16 sm:mt-10 pt-[1.95rem] border-t border-t-astro-gray-600 bg-cover bg-center bg-no-repeat" 
-  style={{backgroundImage: `url(${useCasesBg.src})`}}>
+    style={{backgroundImage: `url(${useCasesBg.src})`}}>
 
     <ul class='mx-auto w-full max-w-screen-xl px-4 sm:px-8'>
       <Blog />

diff --git a/src/pages/db/_components/features/SQLCommands.astro b/src/pages/db/_components/features/SQLCommands.astro
@@ -7,23 +7,79 @@ const queries = ["select", "insert", "update", "delete"]
 const keys = ["primary", "foreign", "unique", "composite", "alternate"]
 const constraints = ["not null", "check", "index", "default", "unique"]
 
-const a = [...arithmetic, ...data]
-const b = [...queries, ...joins, ...operators]
-const c = [...keys, ...constraints]
+const arithmeticAndData = [...arithmetic, ...data]
+const queriesJoinsAndOperators = [...queries, ...joins, ...operators]
+const keysAndContraints = [...keys, ...constraints]
 
-const all = [a, b, c]
+const allCommands = [
+  arithmeticAndData,
+  queriesJoinsAndOperators,
+  keysAndContraints,
+]
 ---
 
-<div class="body -ml-8 flex flex-col items-start gap-2 whitespace-nowrap text-astro-gray-400">
-	{
-		all.map((group) => (
-			<div class="flex w-fit gap-2">
-				{group.map((operator) => (
-					<div class="rounded-full border border-[#4B4B4B]/30 bg-[#2C2C2C]/20 px-4 py-2 uppercase ">
-						{operator}
-					</div>
-				))}
-			</div>
-		))
-	}
-</div>
+<section
+  class='m-auto w-full h-full whitespace-nowrap overflow-hidden boder-box'
+>
+  <div class='w-full h-fit flex flex-col gap-2'>
+    <ul
+      class='marquee-container body -ml-8 flex items-start gap-2 text-astro-gray-400'
+    >
+      {
+        arithmeticAndData.map((operator) => (
+          <li class='rounded-full border border-[#4B4B4B]/30 bg-[#2C2C2C]/20 px-4 py-2 uppercase list-none'>
+            {operator}
+          </li>
+        ))
+      }
+    </ul>
+
+    <ul
+      class='reverse-marquee-container body -ml-8 flex items-start gap-2 text-astro-gray-400'
+    >
+      {
+        queriesJoinsAndOperators.map((operator) => (
+          <li class='rounded-full border border-[#4B4B4B]/30 bg-[#2C2C2C]/20 px-4 py-2 uppercase list-none'>
+            {operator}
+          </li>
+        ))
+      }
+    </ul>
+
+    <ul
+      class='marquee-container body -ml-8 flex items-start gap-2 text-astro-gray-400'
+    >
+      {
+        keysAndContraints.map((operator) => (
+          <li class='rounded-full border border-[#4B4B4B]/30 bg-[#2C2C2C]/20 px-4 py-2 uppercase list-none'>
+            {operator}
+          </li>
+        ))
+      }
+    </ul>
+  </div>
+</section>
+
+<style>
+  .marquee-container {
+    animation: marquee 20s linear infinite forwards;
+  }
+
+  .marquee-container:hover {
+    animation-play-state: paused;
+  }
+
+  .reverse-marquee-container {
+    animation-direction: reverse;
+    animation: marquee 15s linear infinite forwards;
+  }
+
+  @keyframes marquee {
+    0% {
+      transform: translateX(0);
+    }
+    100% {
+      transform: translateX(-100%);
+    }
+  }
+</style>
diff --git a/src/pages/db/_components/use-cases/Feedback.astro b/src/pages/db/_components/use-cases/Feedback.astro
@@ -139,7 +139,7 @@ import { Code } from "astro-expressive-code/components"
       const shownCount = count + (enabled ? 1 : 0)
       button.innerText = `${emoji} ${shownCount}`
       button.setAttribute("aria-selected", String(enabled))
-    });
+    })
   }
 
   createToggleButton(1121, '🔥', fireReactionButton)