diff options
Diffstat (limited to 'apps/website/src/components/base/Slider.astro')
| -rw-r--r-- | apps/website/src/components/base/Slider.astro | 38 |
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> |