Vestride_Shuffle/apps/website/src/components/HomepageFeatures.jsx

import React from 'react';
import clsx from 'clsx';
// eslint-disable-next-line import/no-extraneous-dependencies
import { useColorMode } from '@docusaurus/theme-common';

import styles from './HomepageFeatures.module.css';
import responsiveSvg from '../../static/img/undraw-responsive-design.svg';
import findSvg from '../../static/img/undraw-find-things.svg';
import browsersSvg from '../../static/img/undraw-browsers.svg';
import responsiveSvgDark from '../../static/img/undraw-responsive-design-dark.svg';
import findSvgDark from '../../static/img/undraw-find-things-dark.svg';
import browsersSvgDark from '../../static/img/undraw-browsers-dark.svg';

const features = [
  {
    title: 'Responsive design',
    Svg: responsiveSvg,
    SvgDark: responsiveSvgDark,
    description: (
      <>Shuffle was built to make responsive design easy. Quickly update items in the grid by adding a class.</>
    ),
  },
  {
    title: 'Powerful filters',
    Svg: findSvg,
    SvgDark: findSvgDark,
    description: <>Let your users find what they&rsquo;re looking for with groups and custom filters.</>,
  },
  {
    title: 'Smooth animations',
    Svg: browsersSvg,
    SvgDark: browsersSvgDark,
    description: (
      <>Transitions are all handled by the CSS, which lets the browser optimize them for the user&rsquo;s device.</>
    ),
  },
];

function Feature({ Svg, SvgDark, title, description }) {
  const { colorMode } = useColorMode();
  return (
    <div className={clsx('col col--4')}>
      <div className="text--center">
        {colorMode === 'dark' ? (
          <SvgDark className={styles.featureSvg} alt={title} />
        ) : (
          <Svg className={styles.featureSvg} alt={title} />
        )}
      </div>
      <div className="text--center padding-horiz--md">
        <h3>{title}</h3>
        <p>{description}</p>
      </div>
    </div>
  );
}

export default function HomepageFeatures() {
  return (
    <section className={clsx(styles.features, 'padding-vert--lg')}>
      <div className="container">
        <div className="row">
          {features.map((props) => (
            // eslint-disable-next-line react/jsx-props-no-spreading
            <Feature key={props.title} {...props} />
          ))}
        </div>
      </div>
    </section>
  );
}