feat: Add Carousel slice for displaying images in a carousel

prismicio-types.d.ts

@@ -711,6 +711,66 @@ export type CallToActionSlice = prismic.SharedSlice<
   CallToActionSliceVariation
 >;
 
+/**
+ * Item in *Carousel → Default → Primary → Images*
+ */
+export interface CarouselSliceDefaultPrimaryImagesItem {
+  /**
+   * Image field in *Carousel → Default → Primary → Images*
+   *
+   * - **Field Type**: Image
+   * - **Placeholder**: *None*
+   * - **API ID Path**: carousel.default.primary.images[].image
+   * - **Documentation**: https://prismic.io/docs/field#image
+   */
+  image: prismic.ImageField<never>;
+}
+
+/**
+ * Primary content in *Carousel → Default → Primary*
+ */
+export interface CarouselSliceDefaultPrimary {
+  /**
+   * Images field in *Carousel → Default → Primary*
+   *
+   * - **Field Type**: Group
+   * - **Placeholder**: *None*
+   * - **API ID Path**: carousel.default.primary.images[]
+   * - **Documentation**: https://prismic.io/docs/field#group
+   */
+  images: prismic.GroupField<Simplify<CarouselSliceDefaultPrimaryImagesItem>>;
+}
+
+/**
+ * Default variation for Carousel Slice
+ *
+ * - **API ID**: `default`
+ * - **Description**: Default
+ * - **Documentation**: https://prismic.io/docs/slice
+ */
+export type CarouselSliceDefault = prismic.SharedSliceVariation<
+  "default",
+  Simplify<CarouselSliceDefaultPrimary>,
+  never
+>;
+
+/**
+ * Slice variation for *Carousel*
+ */
+type CarouselSliceVariation = CarouselSliceDefault;
+
+/**
+ * Carousel Shared Slice
+ *
+ * - **API ID**: `carousel`
+ * - **Description**: Carousel
+ * - **Documentation**: https://prismic.io/docs/slice
+ */
+export type CarouselSlice = prismic.SharedSlice<
+  "carousel",
+  CarouselSliceVariation
+>;
+
 /**
  * Primary content in *Hero → Default → Primary*
  */
@@ -1674,6 +1734,11 @@ declare module "@prismicio/client" {
       CallToActionSliceDefaultPrimary,
       CallToActionSliceVariation,
       CallToActionSliceDefault,
+      CarouselSlice,
+      CarouselSliceDefaultPrimaryImagesItem,
+      CarouselSliceDefaultPrimary,
+      CarouselSliceVariation,
+      CarouselSliceDefault,
       HeroSlice,
       HeroSliceDefaultPrimary,
       HeroSliceVariation,

src/slices/Carousel/index.tsx

@@ -0,0 +1,40 @@
+import Bounded from "@/components/bounded";
+import { Carousel as CarouselEmbla, CarouselContent, CarouselItem } from "@/components/ui/carousel";
+import { Content } from "@prismicio/client";
+import { PrismicNextImage } from "@prismicio/next";
+import { SliceComponentProps } from "@prismicio/react";
+
+/**
+ * Props for `Carousel`.
+ */
+export type CarouselProps = SliceComponentProps<Content.CarouselSlice>;
+
+/**
+ * Component for "Carousel" Slices.
+ */
+const Carousel = ({ slice }: CarouselProps): JSX.Element => {
+  return (
+    <Bounded data-slice-type={slice.slice_type} data-slice-variation={slice.variation}>
+      <CarouselEmbla
+        opts={{
+          align: "start",
+          loop: true,
+        }}
+        className="w-full h-full"
+      >
+        <CarouselContent>
+          {slice.primary.images.map((item) => (
+            <CarouselItem
+              key={item.image.alt}
+              className="rounnded-lg overflow-hidden w-full h-full"
+            >
+              <PrismicNextImage field={item.image} className="w-full h-full object-contain" />
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+      </CarouselEmbla>
+    </Bounded>
+  );
+};
+
+export default Carousel;

src/slices/Carousel/mocks.json

@@ -0,0 +1,43 @@
+[
+	{
+		"__TYPE__": "SharedSliceContent",
+		"variation": "default",
+		"primary": {
+			"images": {
+				"__TYPE__": "GroupContentType",
+				"value": [
+					{
+						"__TYPE__": "GroupItemContent",
+						"value": [
+							[
+								"image",
+								{
+									"__TYPE__": "ImageContent",
+									"origin": {
+										"id": "main",
+										"url": "https://images.unsplash.com/photo-1560762484-813fc97650a0",
+										"width": 3344,
+										"height": 2509
+									},
+									"url": "https://images.unsplash.com/photo-1560762484-813fc97650a0",
+									"width": 3344,
+									"height": 2509,
+									"edit": {
+										"zoom": 1,
+										"crop": {
+											"x": 0,
+											"y": 0
+										},
+										"background": "transparent"
+									},
+									"thumbnails": {}
+								}
+							]
+						]
+					}
+				]
+			}
+		},
+		"items": []
+	}
+]

src/slices/Carousel/model.json

@@ -0,0 +1,36 @@
+{
+  "id": "carousel",
+  "type": "SharedSlice",
+  "name": "Carousel",
+  "description": "Carousel",
+  "variations": [
+    {
+      "id": "default",
+      "name": "Default",
+      "docURL": "...",
+      "version": "initial",
+      "description": "Default",
+      "imageUrl": "",
+      "primary": {
+        "images": {
+          "type": "Group",
+          "config": {
+            "label": "Images",
+            "repeat": true,
+            "fields": {
+              "image": {
+                "type": "Image",
+                "config": {
+                  "label": "Image",
+                  "constraint": {},
+                  "thumbnails": []
+                }
+              }
+            }
+          }
+        }
+      },
+      "items": {}
+    }
+  ]
+}

src/slices/index.ts

@@ -5,6 +5,7 @@ import dynamic from "next/dynamic";
 export const components = {
   article: dynamic(() => import("./Article")),
   call_to_action: dynamic(() => import("./CallToAction")),
+  carousel: dynamic(() => import("./Carousel")),
   hero: dynamic(() => import("./Hero")),
   info_grid: dynamic(() => import("./InfoGrid")),
   info_header: dynamic(() => import("./InfoHeader")),