wix-style-react/src/FillPreview/docs/FillPreview.demo.js

wix-style-react

import React from 'react';
import Box from '../../Box';
import FormField from '../../FormField';
import FillPreview from '..';
import { Layout } from '../..';

export default () => {
  const [selectedIndex, setSelectedIndex] = React.useState(0);

  return (
    <FormField label="Product color:">
      <Box height="24px">
        <Layout cols={7} gap="12px">
          <FillPreview
            fill="#ffbc42"
            selected={selectedIndex === 1}
            onClick={() => setSelectedIndex(1)}
          />
          <FillPreview
            fill="#d81159"
            selected={selectedIndex === 2}
            onClick={() => setSelectedIndex(2)}
          />
          <FillPreview
            fill="#8f2d56"
            selected={selectedIndex === 3}
            onClick={() => setSelectedIndex(3)}
          />
          <FillPreview
            fill="#218380"
            selected={selectedIndex === 4}
            onClick={() => setSelectedIndex(4)}
          />
          <FillPreview
            fill="#73d2de"
            selected={selectedIndex === 5}
            onClick={() => setSelectedIndex(5)}
          />
          <FillPreview
            fill="#3399ff"
            selected={selectedIndex === 6}
            onClick={() => setSelectedIndex(6)}
          />
        </Layout>
      </Box>
    </FormField>
  );
};