From ef0b02e2659310103c0772990f7e8f7fe77de63a Mon Sep 17 00:00:00 2001
From: Tyler Flowers <contact@ggtylerr.dev>
Date: Mon, 4 Dec 2023 18:23:33 -0500
Subject: Make Slider + Card and add to index

---
 apps/website/src/components/base/Card.astro   | 22 ++++++++++++++++
 apps/website/src/components/base/Slider.astro | 38 +++++++++++++++++++++++++++
 2 files changed, 60 insertions(+)
 create mode 100644 apps/website/src/components/base/Card.astro
 create mode 100644 apps/website/src/components/base/Slider.astro

(limited to 'apps/website/src/components/base')

diff --git a/apps/website/src/components/base/Card.astro b/apps/website/src/components/base/Card.astro
new file mode 100644
index 0000000..b3fbc00
--- /dev/null
+++ b/apps/website/src/components/base/Card.astro
@@ -0,0 +1,22 @@
+---
+import type { Icons } from '@components/icons/Icon.astro';
+import Icon from '@components/icons/Icon.astro';
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'div'> {
+	icon: Icons;
+	text?: string;
+}
+
+const {
+	icon,
+	text = 'Hiiii',
+	...rest
+} = Astro.props;
+---
+
+<!-- pt-1 added temporarily cause for some reason the icon's padding doesn't apply unless I add this. the wonders of CSS. -->
+<div {...rest} class="rounded-xl bg-gray-600 w-64 pt-1 shrink-0">
+	<Icon icon={icon} size={48} class="my-[20px] mx-auto text-white"></Icon>
+	<p class="text-white text-md mx-auto bg-primary-600 rounded-b-xl pl-[12px] pr-[32px]">{text}</p>
+</div>
diff --git a/apps/website/src/components/base/Slider.astro b/apps/website/src/components/base/Slider.astro
new file mode 100644
index 0000000..f40b747
--- /dev/null
+++ b/apps/website/src/components/base/Slider.astro
@@ -0,0 +1,38 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'div'> {
+	dir?: string;
+	wrapperClass?: string;
+}
+
+const {
+	dir = "left",
+	wrapperClass = ""
+} = Astro.props;
+---
+
+<div class={
+	`w-full bg-blue-100 flex flex-row gap-2.5 overflow-hidden slider
+	${dir === "right" ? "reverse" : ""}
+	${wrapperClass}`}>
+	<slot />
+</div>
+
+<!-- might be cheating a bit using global styles here but at least it lets you use slots -->
+<style is:global>
+	.slider > * {
+		animation: 5s linear infinite slide;
+	}
+	.slider.reverse > * {
+		animation-direction: reverse;
+	}
+	@keyframes slide {
+		from {
+			transform: translateX(0);
+		}
+		to {
+			transform: translateX(calc(-100% - 10px));
+		}
+	}
+</style>
-- 
cgit