feat(core): add Slide component (bigcommerce#1206)

.changeset/nine-flowers-matter.md

@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+Add `Slide` component to be used in `Slideshow`.

core/components/hero/index.tsx

@@ -1,53 +1,34 @@
-import Image from 'next/image';
-
-import { Button } from '~/components/ui/button';
 import { Slideshow } from '~/components/ui/slideshow';
 
+import { Slide } from '../ui/slide';
+
 import SlideshowBG from './slideshow-bg-01.jpg';
 
 const slides = [
-  <div className="relative" key={1}>
-    <Image
-      alt="An assortment of brandless products against a blank background"
-      blurDataURL="data:image/jpeg;base64,/9j/4QC8RXhpZgAASUkqAAgAAAAGABIBAwABAAAAAQAAABoBBQABAAAAVgAAABsBBQABAAAAXgAAACgBAwABAAAAAgAAABMCAwABAAAAAQAAAGmHBAABAAAAZgAAAAAAAABIAAAAAQAAAEgAAAABAAAABgAAkAcABAAAADAyMTABkQcABAAAAAECAwAAoAcABAAAADAxMDABoAMAAQAAAP//AAACoAQAAQAAAAoAAAADoAQAAQAAAAcAAAAAAAAA/9sAQwADAgIDAgIDAwMDBAMDBAUIBQUEBAUKBwcGCAwKDAwLCgsLDQ4SEA0OEQ4LCxAWEBETFBUVFQwPFxgWFBgSFBUU/9sAQwEDBAQFBAUJBQUJFA0LDRQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQU/8AAEQgABwAKAwERAAIRAQMRAf/EABUAAQEAAAAAAAAAAAAAAAAAAAMJ/8QAIBAAAQQBBAMAAAAAAAAAAAAAAQIDBAURABIhMQYjgf/EABYBAQEBAAAAAAAAAAAAAAAAAAEAAv/EABkRAAIDAQAAAAAAAAAAAAAAAAARAQIhQf/aAAwDAQACEQMRAD8AoZ5EzayKWW3Syo0GyKPTJlsF9ts9klsKTu46GQOfms2awJfAKywmt1sRNgqK7PS0gSHI4WltTmBuKQckJJzgE9aYa0tP/9k="
-      className="absolute -z-10 object-cover"
-      fill
-      placeholder="blur"
-      priority
-      sizes="(max-width: 1536px) 100vw, 1536px"
-      src={SlideshowBG}
-    />
-    <div className="flex flex-col gap-4 px-12 pb-48 pt-36">
-      <h2 className="text-5xl font-black lg:text-6xl">25% Off Sale</h2>
-      <p className="max-w-xl">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-        labore et dolore magna aliqua. Ut enim ad minim veniam.
-      </p>
-      <Button asChild className="w-fit">
-        <a href="/#">Shop now</a>
-      </Button>
-    </div>
-  </div>,
-  <div className="flex flex-col gap-4 bg-gray-100 px-12 pb-48 pt-36" key={2}>
-    <h2 className="text-5xl font-black lg:text-6xl">Great Deals</h2>
-    <p className="max-w-xl">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-      labore et dolore magna aliqua. Ut enim ad minim veniam.
-    </p>
-    <Button asChild className="w-fit">
-      <a href="/#">Shop now</a>
-    </Button>
-  </div>,
-  <div className="flex flex-col gap-4 bg-gray-100 px-12 pb-48 pt-36" key={3}>
-    <h2 className="text-5xl font-black lg:text-6xl">Low Prices</h2>
-    <p className="max-w-xl">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-      labore et dolore magna aliqua. Ut enim ad minim veniam.
-    </p>
-    <Button asChild className="w-fit">
-      <a href="/#">Shop now</a>
-    </Button>
-  </div>,
+  <Slide
+    cta={{ label: 'Shop now', url: '/#' }}
+    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."
+    image={{
+      src: SlideshowBG,
+      alt: 'An assortment of brandless products against a blank background',
+      blurDataUrl:
+        'data:image/jpeg;base64,/9j/4QC8RXhpZgAASUkqAAgAAAAGABIBAwABAAAAAQAAABoBBQABAAAAVgAAABsBBQABAAAAXgAAACgBAwABAAAAAgAAABMCAwABAAAAAQAAAGmHBAABAAAAZgAAAAAAAABIAAAAAQAAAEgAAAABAAAABgAAkAcABAAAADAyMTABkQcABAAAAAECAwAAoAcABAAAADAxMDABoAMAAQAAAP//AAACoAQAAQAAAAoAAAADoAQAAQAAAAcAAAAAAAAA/9sAQwADAgIDAgIDAwMDBAMDBAUIBQUEBAUKBwcGCAwKDAwLCgsLDQ4SEA0OEQ4LCxAWEBETFBUVFQwPFxgWFBgSFBUU/9sAQwEDBAQFBAUJBQUJFA0LDRQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQU/8AAEQgABwAKAwERAAIRAQMRAf/EABUAAQEAAAAAAAAAAAAAAAAAAAMJ/8QAIBAAAQQBBAMAAAAAAAAAAAAAAQIDBAURABIhMQYjgf/EABYBAQEBAAAAAAAAAAAAAAAAAAEAAv/EABkRAAIDAQAAAAAAAAAAAAAAAAARAQIhQf/aAAwDAQACEQMRAD8AoZ5EzayKWW3Syo0GyKPTJlsF9ts9klsKTu46GQOfms2awJfAKywmt1sRNgqK7PS0gSHI4WltTmBuKQckJJzgE9aYa0tP/9k=',
+    }}
+    key={1}
+    title="25% Off Sale"
+  />,
+  <Slide
+    cta={{ label: 'Shop now', url: '/#' }}
+    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."
+    key={2}
+    title="Great Deals"
+  />,
+  <Slide
+    cta={{ label: 'Shop now', url: '/#' }}
+    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."
+    key={3}
+    title="Low Prices"
+  />,
 ];
 
 export const Hero = () => <Slideshow slides={slides} />;

core/components/ui/slide/index.ts

@@ -0,0 +1 @@
+export * from './slide';

core/components/ui/slide/slide.tsx

@@ -0,0 +1,42 @@
+import Image, { StaticImageData } from 'next/image';
+
+import { cn } from '~/lib/utils';
+
+import { Button } from '../button';
+
+interface Props {
+  cta?: { url: string; label: string };
+  description: string;
+  image?: { src: StaticImageData; alt: string; blurDataUrl?: string };
+  title: string;
+}
+
+const Slide = ({ cta, description, image, title }: Props) => {
+  return (
+    <div className="relative">
+      {image && (
+        <Image
+          alt={image.alt}
+          blurDataURL={image.blurDataUrl}
+          className="absolute -z-10 object-cover"
+          fill
+          placeholder="blur"
+          priority
+          sizes="(max-width: 1536px) 100vw, 1536px"
+          src={image.src}
+        />
+      )}
+      <div className={cn('flex flex-col gap-4 px-12 pb-48 pt-36', !image && 'bg-gray-100')}>
+        <h2 className="text-5xl font-black lg:text-6xl">{title}</h2>
+        <p className="max-w-xl">{description}</p>
+        {cta && (
+          <Button asChild className="w-fit">
+            <a href={cta.url}>{cta.label}</a>
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export { Slide };