react/lib/components/customization/colors.tsx

import React from 'react'
import { Card, useTheme } from 'components'
import { CardTypes } from 'components/utils/prop-types'

const types = ['secondary', 'success', 'warning', 'error',
  'dark', 'alert', 'purple', 'violet', 'cyan', 'lite']

const Colors: React.FC<React.PropsWithChildren<{}>> = () => {
  const theme = useTheme()
  
  return (
    <div className="colors">
      {types.map((type, index) => {
        return (
          <div key={`${type}-${index}`} className="color-card">
            <Card type={type as CardTypes}>{type}</Card>
          </div>
        )
      })}
      <style jsx>{`
        .colors {
          display: flex;
          flex-wrap: wrap;
        }
        
        .color-card {
          display: flex;
          width: 9rem;
          margin-right: ${theme.layout.gapHalf};
          margin-bottom: ${theme.layout.gapHalf};
        }
      `}</style>
    </div>
  )
}

export default Colors