カルーセルのrecommendationウィジェットテンプレート

// index.tsx
import { ChevronLeftIcon, ChevronRightIcon } from '@radix-ui/react-icons';
import type { RecommendationInitialState } from '@sitecore-search/react';
import { WidgetDataType, useRecommendation, widget } from '@sitecore-search/react';
import { ArticleCard, Carousel, Presence } from '@sitecore-search/ui';

type ArticleModel = {
  id: string;
  name: string;
  author?: string;
  url?: string;
  image_url?: string;
  source_id?: string;
};
type RecommendationCarouselProps = {
  title?: string;
  itemsToDisplay?: number;
};
type InitialState = RecommendationInitialState<'itemsPerPage'>;
const DEFAULT_IMG_URL = 'https://placehold.co/500x300?text=No%20Image'; // TODO: Update with corresponding fallback image

export const RecommendationCarouselComponent = ({ title = '', itemsToDisplay = 6 }: RecommendationCarouselProps) => {
  const {
    widgetRef,
    actions: { onNavigationNext, onNavigationPrev, onItemClick },
    queryResult: { isLoading, isFetching, data: { content: articles = [] } = {} },
  } = useRecommendation<ArticleModel, InitialState>({
    state: {
      itemsPerPage: itemsToDisplay,
    },
  });
  const loading = isLoading || isFetching;
  return (
    <div>
      <Presence present={loading}>
        <div>
          <svg aria-busy={loading} aria-hidden={!loading} focusable="false" role="progressbar" viewBox="0 0 20 20">
            <path d="M7.229 1.173a9.25 9.25 0 1 0 11.655 11.412 1.25 1.25 0 1 0-2.4-.698 6.75 6.75 0 1 1-8.506-8.329 1.25 1.25 0 1 0-.75-2.385z" />
          </svg>
        </div>
      </Presence>
      {!loading && articles.length > 0 && (
        <>
          {title && <h3>{title}</h3>}
          <Carousel.Root onNavigationNext={onNavigationNext} onNavigationPrev={onNavigationPrev} ref={widgetRef}>
            <Carousel.Slides>
              {articles.map((item, index) => (
                <Carousel.Slide key={item.id}>
                  <ArticleCard.Root key={item.id}>
                    <div>
                      <ArticleCard.Image src={item?.image_url || DEFAULT_IMG_URL} />
                    </div>
                    <div>
                      <a
                        href={item.url}
                        onClick={(event) => {
                          event.preventDefault();
                          onItemClick({
                            id: item.id,
                            index,
                            sourceId: item.source_id,
                          });
                        }}
                      >
                        <ArticleCard.Title>{item.name}</ArticleCard.Title>
                        <ArticleCard.Subtitle>{item.author}</ArticleCard.Subtitle>
                      </a>
                    </div>
                  </ArticleCard.Root>
                </Carousel.Slide>
              ))}
            </Carousel.Slides>

            <Carousel.Previous aria-label="Show previous demo" tabIndex={-1}>
              <ChevronLeftIcon />
            </Carousel.Previous>

            <Carousel.Next aria-label="Show next demo" tabIndex={-1}>
              <ChevronRightIcon />
            </Carousel.Next>
          </Carousel.Root>
        </>
      )}
    </div>
  );
};
const RecommendationCarouselWidget = widget(RecommendationCarouselComponent, WidgetDataType.RECOMMENDATION, 'content');
export default RecommendationCarouselWidget;

// index.tsx
import type { RecommendationInitialState } from '@sitecore-search/react';
import { WidgetDataType, useRecommendation, widget } from '@sitecore-search/react';
import { Presence } from '@sitecore-search/ui';

import {
  ArticleCardStyled,
  CarouselContainer,
  LeftIcon,
  LoaderAnimation,
  LoaderContainer,
  NextButton,
  PrevButton,
  RecommendationContainer,
  RightIcon,
  Slide,
  SliderList,
  TitleStyled,
} from './styled';

type ArticleModel = {
  id: string;
  name: string;
  author?: string;
  url?: string;
  image_url?: string;
  source_id?: string;
};

type RecommendationCarouselProps = {
  title?: string;
  itemsToDisplay?: number;
};

type InitialState = RecommendationInitialState<'itemsPerPage'>;

const DEFAULT_IMG_URL = 'https://placehold.co/500x300?text=No%20Image'; // TODO: Update with corresponding fallback image

export const RecommendationCarouselComponent = ({ title = '', itemsToDisplay = 6 }: RecommendationCarouselProps) => {
  const {
    widgetRef,
    actions: { onNavigationNext, onNavigationPrev, onItemClick },
    queryResult: { isLoading, isFetching, data: { content: articles = [] } = {} },
  } = useRecommendation<ArticleModel, InitialState>({
    state: {
      itemsPerPage: itemsToDisplay,
    },
  });

  const loading = isLoading || isFetching;

  return (
    <RecommendationContainer>
      <Presence present={loading}>
        <LoaderContainer>
          <LoaderAnimation
            aria-busy={loading}
            aria-hidden={!loading}
            focusable="false"
            role="progressbar"
            viewBox="0 0 20 20"
          >
            <path d="M7.229 1.173a9.25 9.25 0 1 0 11.655 11.412 1.25 1.25 0 1 0-2.4-.698 6.75 6.75 0 1 1-8.506-8.329 1.25 1.25 0 1 0-.75-2.385z" />
          </LoaderAnimation>
        </LoaderContainer>
      </Presence>
      {!loading && articles.length > 0 && (
        <>
          {title && <TitleStyled>{title}</TitleStyled>}
          <CarouselContainer onNavigationNext={onNavigationNext} onNavigationPrev={onNavigationPrev} ref={widgetRef}>
            <SliderList>
              {articles.map((item, index) => (
                <Slide key={item.id}>
                  <ArticleCardStyled.Root key={item.id}>
                    <ArticleCardStyled.ImageWrapper>
                      <ArticleCardStyled.Image src={item?.image_url || DEFAULT_IMG_URL} />
                    </ArticleCardStyled.ImageWrapper>
                    <ArticleCardStyled.Content>
                      <ArticleCardStyled.Link
                        href={item.url}
                        onClick={(event) => {
                          event.preventDefault();
                          onItemClick({ id: item.id, index, sourceId: item.source_id });
                        }}
                      >
                        <ArticleCardStyled.Title>{item.name}</ArticleCardStyled.Title>
                        <ArticleCardStyled.Subtitle>{item.author}</ArticleCardStyled.Subtitle>
                      </ArticleCardStyled.Link>
                    </ArticleCardStyled.Content>
                  </ArticleCardStyled.Root>
                </Slide>
              ))}
            </SliderList>

            <PrevButton aria-label="Show previous demo" tabIndex={-1}>
              <LeftIcon />
            </PrevButton>

            <NextButton aria-label="Show next demo" tabIndex={-1}>
              <RightIcon />
            </NextButton>
          </CarouselContainer>
        </>
      )}
    </RecommendationContainer>
  );
};

const RecommendationCarouselWidget = widget(RecommendationCarouselComponent, WidgetDataType.RECOMMENDATION, 'content');
export default RecommendationCarouselWidget;

// styled.ts
import styled, { css, keyframes } from 'styled-components';

import { ChevronLeftIcon, ChevronRightIcon } from '@radix-ui/react-icons';
import { ArticleCard, Carousel, theme } from '@sitecore-search/ui';

// Article
const ArticleCardRootStyled = styled(ArticleCard.Root)`
  cursor: pointer;
  box-sizing: border-box;
  box-shadow: 0 0 2px 2px ${theme.vars.palette.grey['400']};
  background: #fff;
  position: relative;
  -webkit-transition: 0.3s all ease;
  transition: 0.15s all ease;
  width: 250px;

  &:focus-within {
    box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.15);
    transform: scale(1.025);
    opacity: 1;
    transition: 0.35s all ease;
  }

  &:hover {
    box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.15);
    transform: scale(1.025);
    opacity: 1;
    transition: 0.35s all ease;
  }
`;

const ArticleCardContentStyled = styled.div`
  padding: ${theme.vars.spacing.m};
`;

const ArticleCardLinkStyled = styled.a`
  color: ${theme.vars.palette.text.primary};
  font-size: ${theme.vars.typography.fontSize3.fontSize};
  text-decoration: none;

  &:hover {
    text-decoration: none;
  }

  &:focus {
    text-decoration: none;
  }
  &::after {
    position: absolute;
    inset: 0;
    display: block;
    content: ' ';
  }
`;

const ArticleCardImageStyled = styled(ArticleCard.Image)`
  width: 100%;
`;

const ArticleCardImageWrapperStyled = styled.div`
  position: relative;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
`;

const ArticleCardTitleStyled = styled(ArticleCard.Title)`
  color: ${theme.vars.palette.text.primary};
  font-family: ${theme.vars.typography.fontFamilySystem};
  font-size: ${theme.vars.typography.h3.fontSize};
  font-weight: ${theme.vars.typography.h3.fontWeight};
  line-height: ${theme.vars.typography.h3.lineHeight};
  margin: 0 0 ${theme.vars.spacing.m};
`;

const ArticleCardSubtitleStyled = styled(ArticleCard.Subtitle)`
  color: ${theme.vars.palette.text.secondary};
  font-family: ${theme.vars.typography.fontFamilySystem};
  font-size: ${theme.vars.typography.fontSize3.fontSize};
  font-weight: ${theme.vars.typography.fontSize3.fontWeight};
  line-height: ${theme.vars.typography.fontSize3.lineHeight};
  margin: 0 0 ${theme.vars.spacing.m};
`;

// misc
export const TitleStyled = styled.h3`
  color: ${theme.vars.palette.primary.main};
  font-family: ${theme.vars.typography.fontFamilySystem};
  font-size: ${theme.vars.typography.fontSize3.fontSize};
`;

export const LoaderContainer = styled.div`
  align-items: center;
  display: flex;
  min-height: 50vh;
`;

const Rotate = keyframes`
  from {
      transform: rotate(0deg);
  }
  to {
      transform: rotate(360deg);
  }
`;

export const LoaderAnimation = styled.svg`
  animation: ${Rotate} 2s linear infinite;
  display: block;
  fill: ${theme.vars.palette.primary.main};
  height: 50px;
  margin: auto;
  width: 50px;
`;

export const ArticleCardStyled = {
  Root: ArticleCardRootStyled,
  Content: ArticleCardContentStyled,
  Link: ArticleCardLinkStyled,
  Image: ArticleCardImageStyled,
  ImageWrapper: ArticleCardImageWrapperStyled,
  Title: ArticleCardTitleStyled,
  Subtitle: ArticleCardSubtitleStyled,
};

/** Carousel styles  */
const containerWidth = '1145px';

export const RecommendationContainer = styled.div`
  display: inline-block;
  width: 100%;
`;

export const CarouselContainer = styled(Carousel.Root)`
  position: relative;
  max-width: ${containerWidth};
  width: 100%;
`;
export const SliderList = styled(Carousel.Slides)`
  padding: 8px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min-content;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  gap: ${theme.vars.spacing.l};
  // calculate the left padding to apply to the scrolling list
  // so that the carousel starts aligned with the container component
  scroll-padding: max(${theme.vars.spacing.l}, calc((100% - ${containerWidth}) / 2 + ${theme.vars.spacing.l}));
  -ms-overflow-style: none;
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
`;

export const Slide = styled(Carousel.Slide)`
  display: flex;
  flex-flow: row wrap;
`;

const arrows = css`
  color: ${theme.vars.palette.grey['900']};
  height: 30px;
  vertical-align: middle;
  width: 30px;
`;

const controlButton = css`
  cursor: pointer;
  background-color: ${theme.vars.palette.common.white};
  border: none;
  box-shadow: 0 1px 3px ${theme.vars.palette.grey['400']};
  height: 100px;
  line-height: 100px;
  position: absolute;
  text-align: center;
  top: calc(50% - 50px);
  width: 45px;

  &[aria-disabled='true'] {
    filter: opacity(0.5);
    cursor: not-allowed;
  }

  &:hover:not([aria-disabled='true']) svg {
    color: ${theme.vars.palette.primary.main};
  }
`;

export const NextButton = styled(Carousel.Next)`
  ${controlButton}
  border-radius: ${theme.vars.border.radius} 0 0 ${theme.vars.border.radius};
  clip: rect(-10px, 45px, 110px, -10px);
  padding-left: ${theme.vars.spacing.xs};
  right: 0;
`;
export const PrevButton = styled(Carousel.Previous)`
  ${controlButton}
  border-radius: 0 ${theme.vars.border.radius} ${theme.vars.border.radius} 0;
  clip: rect(-10px, 55px, 110px, 0);
  left: 0;
  padding-right: ${theme.vars.spacing.xs};
`;

export const LeftIcon = styled(ChevronLeftIcon)`
  ${arrows}
`;
export const RightIcon = styled(ChevronRightIcon)`
  ${arrows}
`;