dh_demo

DreamHanks demo project
git clone git://git.lair.cx/dh_demo
Log | Files | Refs | README

Hero.tsx (899B)

      1 import Container from '@/components/layout/Container'
      2 import classNames from '@/lib/classnames'
      3 import { HTMLAttributes } from 'react'
      4 import styles from './Hero.module.css'
      5 
      6 export interface HeroProps extends HTMLAttributes<HTMLDivElement> {
      7   color?: 'primary' | 'secondary' | 'tertiary' | 'error'
      8     | 'primary-container' | 'secondary-container' | 'tertiary-container' | 'error-container'
      9   size?: 'small' | 'medium' | 'large'
     10 }
     11 
     12 export default function Hero (props: HeroProps) {
     13   const { className, color, size, children, ...restProps } = props
     14 
     15   return (
     16     <div
     17       {...classNames(
     18         className,
     19         styles['hero'],
     20         color ? styles[`is-${color}`] : null,
     21         size ? styles[`is-${size}`] : null,
     22       )}
     23       {...restProps}
     24     >
     25       <Container>
     26         <div className={styles['hero-body']}>
     27           {children}
     28         </div>
     29       </Container>
     30     </div>
     31   )
     32 }