Icon

import { Icon } from '@fairgarden-private/design/components/Icon'

export function IconSizes() {
  return (
    <>
      <Icon name="search" size="inline" label="Search, inline (16 px)" />
      <Icon name="search" size="tag" label="Search, tag (20 px)" />
      <Icon name="search" size="block" label="Search, block (36 px)" />
    </>
  )
}

import { Icon } from '@fairgarden-private/design/components/Icon'
import { iconTierWeights } from '@fairgarden-private/design/icons/paths'
import styles from './weights.module.css'

const tiers = [
  { size: 'inline', px: 16 },
  { size: 'tag', px: 20 },
  { size: 'block', px: 36 },
] as const

/** Each tier at rest and at emphasis: the stroke steps up one tier, the size never changes. */
export function IconWeights() {
  return (
    <div className={styles.grid}>
      <span className={styles.head}>Tier</span>
      <span className={styles.head}>Rest</span>
      <span className={styles.head}>Emphasis</span>
      {tiers.map(({ size, px }) => (
        <div key={size} className={styles.row}>
          <code className={styles.name}>
            {size} {px} px
          </code>
          <span className={styles.sample}>
            <Icon name="search" size={size} />
            <Icon name="close" size={size} />
            <code className={styles.weight}>{iconTierWeights[size].rest}</code>
          </span>
          <span className={styles.sample}>
            <Icon name="search" size={size} weight="emphasis" />
            <Icon name="close" size={size} weight="emphasis" />
            <code className={styles.weight}>{iconTierWeights[size].emphasis}</code>
          </span>
        </div>
      ))}
    </div>
  )
}

import { Icon, iconHost } from '@fairgarden-private/design/components/Icon'
import styles from './hover.module.css'

/**
 * `weight="interactive"` draws the rest weight and swaps to emphasis while
 * the element carrying `iconHost` is hovered or pressed. A disabled host
 * keeps the rest weight.
 */
export function IconHover() {
  return (
    <div className={styles.row}>
      <button type="button" className={`${iconHost} ${styles.button}`}>
        <Icon name="close" weight="interactive" label="Close" />
      </button>
      <button type="button" className={`${iconHost} ${styles.button}`}>
        <Icon name="menu" size="tag" weight="interactive" label="Menu" />
      </button>
      <a href="#hover" className={`${iconHost} ${styles.link}`}>
        See all
        <Icon name="chevron_right" weight="interactive" className={styles.glyph} />
      </a>
      <button type="button" disabled className={`${iconHost} ${styles.button}`}>
        <Icon name="add" weight="interactive" label="Add (unavailable)" />
      </button>
    </div>
  )
}

import { Icon } from '@fairgarden-private/design/components/Icon'
import { iconNames } from '@fairgarden-private/design/icons/paths'
import styles from './inventory.module.css'

export function IconInventory() {
  return (
    <ul className={styles.grid}>
      {iconNames.map((name) => (
        <li key={name} className={styles.cell}>
          <Icon name={name} size="tag" />
          <code className={styles.name}>{name}</code>
        </li>
      ))}
    </ul>
  )
}

import { PresetGround } from '@/components/PresetGround'
import { Icon } from '@fairgarden-private/design/components/Icon'
import styles from './grounds.module.css'

const presets = ['paper', 'forest', 'leaf'] as const

/** No color props: the icon is filled in currentColor, so it takes the ink around it. */
export function IconGrounds() {
  return (
    <div className={styles.row}>
      {presets.map((preset) => (
        <PresetGround key={preset} preset={preset} className={styles.face}>
          <Icon name="check" size="block" label="Checked" />
          <span className={styles.name}>{preset}</span>
        </PresetGround>
      ))}
    </div>
  )
}