Make Slider + Card and add to index

1 files changed, 38 insertions, 0 deletions

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>