From b1fcca40f29fa639237c8d46ce86a9556a4b814d Mon Sep 17 00:00:00 2001 From: Alan Pledger Date: Sun, 15 Dec 2024 18:18:47 -0500 Subject: [PATCH 1/2] fix: move font variables to html element --- core/app/[locale]/layout.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/core/app/[locale]/layout.tsx b/core/app/[locale]/layout.tsx index 10179999f..6610a3a93 100644 --- a/core/app/[locale]/layout.tsx +++ b/core/app/[locale]/layout.tsx @@ -1,5 +1,6 @@ import { Analytics } from '@vercel/analytics/react'; import { SpeedInsights } from '@vercel/speed-insights/next'; +import { clsx } from 'clsx'; import type { Metadata } from 'next'; import { DM_Serif_Text, Inter, Roboto_Mono } from 'next/font/google'; import { NextIntlClientProvider } from 'next-intl'; @@ -108,8 +109,11 @@ export default async function RootLayout({ params, children }: Props) { const messages = await getMessages(); return ( - - + + From a0305c8330d749add5fd78f4716e9541580fa42d Mon Sep 17 00:00:00 2001 From: Alan Pledger Date: Sun, 15 Dec 2024 18:18:59 -0500 Subject: [PATCH 2/2] feat: add props and css variables for slideshow --- core/app/globals.css | 16 +++ core/vibes/soul/sections/slideshow/index.tsx | 118 +++++++++++-------- 2 files changed, 87 insertions(+), 47 deletions(-) diff --git a/core/app/globals.css b/core/app/globals.css index 7eedfc454..e5c49cc33 100644 --- a/core/app/globals.css +++ b/core/app/globals.css @@ -78,4 +78,20 @@ --accordion-title-font-family: var(--font-family-mono); --accordion-content-font-family: var(--font-family-body); + + /* Slideshow */ + + --slideshow-focus: hsl(var(--primary)); + --slideshow-mask: hsl(var(--foreground) / 80%); + --slideshow-background: color-mix(in oklab, hsl(var(--primary)), black 75%); + --slideshow-title: hsl(var(--background)); + --slideshow-title-font-family: var(--font-family-heading); + --slideshow-description: hsl(var(--background) / 80%); + --slideshow-description-font-family: var(--font-family-body); + --slideshow-pagination: hsl(var(--background)); + --slideshow-play-border: hsl(var(--contrast-300) / 50%); + --slideshow-play-border-hover: hsl(var(--contrast-300) / 80%); + --slideshow-play-text: hsl(var(--background)); + --slideshow-number: hsl(var(--background)); + --slideshow-number-font-family: var(--font-family-mono); } diff --git a/core/vibes/soul/sections/slideshow/index.tsx b/core/vibes/soul/sections/slideshow/index.tsx index 2dc994be8..f77b76d0f 100644 --- a/core/vibes/soul/sections/slideshow/index.tsx +++ b/core/vibes/soul/sections/slideshow/index.tsx @@ -6,20 +6,31 @@ import Autoplay from 'embla-carousel-autoplay'; import Fade from 'embla-carousel-fade'; import useEmblaCarousel from 'embla-carousel-react'; import { Pause, Play } from 'lucide-react'; -import { useCallback, useEffect, useState } from 'react'; +import { ComponentPropsWithoutRef, useCallback, useEffect, useState } from 'react'; import { ButtonLink } from '@/vibes/soul/primitives/button-link'; import { Image } from '~/components/image'; +type ButtonLinkProps = ComponentPropsWithoutRef; + interface Slide { title: string; description?: string; + showDescription?: boolean; image?: { alt: string; blurDataUrl?: string; src: string }; - cta?: { label: string; href: string }; + cta?: { + label: string; + href: string; + variant?: ButtonLinkProps['variant']; + size?: ButtonLinkProps['size']; + shape?: ButtonLinkProps['shape']; + }; + showCta?: boolean; } interface Props { slides: Slide[]; + playOnInit?: boolean; interval?: number; className?: string; } @@ -70,9 +81,9 @@ const useProgressButton = ( }; }; -export function Slideshow({ slides, interval = 5000, className }: Props) { +export function Slideshow({ slides, playOnInit = true, interval = 5000, className }: Props) { const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true, duration: 20 }, [ - Autoplay({ delay: interval }), + Autoplay({ delay: interval, playOnInit }), Fade(), ]); const { selectedIndex, scrollSnaps, onProgressButtonClick } = useProgressButton(emblaApi); @@ -117,58 +128,71 @@ export function Slideshow({ slides, interval = 5000, className }: Props) { }, [emblaApi, playCount]); return ( -
+
- {slides.map(({ title, description, image, cta }, idx) => { - return ( -
-
-
-

- {title} -

- {description != null && description !== '' && ( -

- {description} -

- )} - {cta != null && cta.href !== '' && cta.label !== '' && ( - - {cta.label} - - )} + {slides.map( + ({ title, description, showDescription = true, image, cta, showCta = true }, idx) => { + return ( +
+
+
+

+ {title} +

+ {showDescription && ( +

+ {description} +

+ )} + {showCta && ( + + {cta?.label ?? 'Learn more'} + + )} +
-
- {image?.src != null && image.src !== '' && ( - {image.alt} - )} -
- ); - })} + {image?.src != null && image.src !== '' && ( + {image.alt} + )} +
+ ); + }, + )}
{/* Controls */} -
+
{/* Progress Buttons */} {scrollSnaps.map((_: number, index: number) => { return (