Icon

'use client'

import React, { useState } from 'react'
import { Input, Stack, Grid, Text, Select, Icon, useToast } from 'biibaos'
import { Search } from 'lucide-react'

export default function App() {
  const [search, setSearch] = useState('')
  const [size, setSize] = useState(24)
  const [strokeWidth, setStrokeWidth] = useState(2)
  const [color, setColor] = useState('currentColor')
  const [limit, setLimit] = useState(80)
  const { toast } = useToast()

  const iconEntries = Object.entries(icons).filter(([_, IconComp]) => typeof IconComp === 'function' || typeof IconComp === 'object')

  const filtered = search
    ? iconEntries.filter(([name]) => name.toLowerCase().includes(search.toLowerCase())).slice(0, 100)
    : iconEntries.slice(0, limit)

  return (
    <div style={{ width: '100%' }}>
      <div style={{ marginBottom: 32, padding: 24, background: 'var(--biiba-surface)', borderRadius: 24, border: '1px solid var(--biiba-border)' }}>
        <Stack direction={{ xs: 'column', md: 'row' }} justify="between" align="start" gap={24} style={{ marginBottom: 24 }}>
          <div>
            <Text variant="h4" weight="bold" style={{ marginBottom: 4 }}>Icon Library</Text>
            <Text color="muted" size="sm">Explore premium Lucide icons.</Text>
          </div>
          <div style={{ width: '100%', maxWidth: 320 }}>
            <Input
              placeholder="Search icons..."
              leftIcon={<Icon icon={Search} size={16} />}
              value={search}
              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                setSearch(e.target.value)
                setLimit(80)
              }}
            />
          </div>
        </Stack>

        <Grid columns={{ base: 1, sm: 2, md: 3 }} gap={16}>
          <Select
            label="Global Size"
            value={String(size)}
            onChange={(val: any) => setSize(Number(val))}
            options={[
              { label: 'Small (16px)', value: '16' },
              { label: 'Medium (24px)', value: '24' },
              { label: 'Large (32px)', value: '32' },
            ]}
          />
          <Select
            label="Global Stroke"
            value={String(strokeWidth)}
            onChange={(val: any) => setStrokeWidth(Number(val))}
            options={[
              { label: 'Thin (1px)', value: '1' },
              { label: 'Regular (2px)', value: '2' },
              { label: 'Bold (3px)', value: '3' },
            ]}
          />
          <Select
            label="Global Color"
            value={color}
            onChange={(val: any) => setColor(val)}
            options={[
              { label: 'Default (Current)', value: 'currentColor' },
              { label: 'Primary Brand', value: 'var(--biiba-primary)' },
            ]}
          />
        </Grid>
      </div>

      <Grid columns={{ base: 3, sm: 4, md: 6, lg: 8 }} gap={12} style={{ width: '100%' }}>
        {filtered.map(([name, IconComp]: [string, any]) => (
          <motion.div
            key={name}
            whileHover={{ scale: 1.05, y: -2 }}
            whileTap={{ scale: 0.95 }}
            onClick={() => {
              const code = `<Icon icon={${name}} size={${size}} strokeWidth={${strokeWidth}} />`
              navigator.clipboard.writeText(code)
              toast?.success(`Copied "${name}" code`)
            }}
            style={{
              padding: '20px 8px',
              background: 'var(--biiba-surface-raised)',
              borderRadius: 20,
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              justifyContent: 'center',
              gap: 12,
              cursor: 'pointer',
              border: '1px solid var(--biiba-border-light)',
            }}
          >
            <Icon icon={IconComp} size={size} strokeWidth={strokeWidth} color={color} />
            <Text color="muted" align="center" size="xs">{name}</Text>
          </motion.div>
        ))}
      </Grid>
    </div>
  )
}

'use client'

import React from 'react'
import { Stack, Icon } from 'biibaos'
import { Bell, Settings, Zap } from 'lucide-react'

export default function App() {
  return (
    <Stack gap={20} align="center" wrap>
          <Icon icon={Zap} color="var(--biiba-primary)" size={24} />
          <Icon icon={Bell} color="var(--biiba-warning)" />
          <Icon icon={Settings} strokeWidth={1} size={32} />
        </Stack>
  )
}

'use client'

import React from 'react'
import { Stack, Grid, Text, Icon } from 'biibaos'
import { Bell, Heart, Settings, Star, Zap, ArrowUp, Cloud } from 'lucide-react'

export default function App() {
  return (
    <Stack direction="column" gap={32} fullWidth>
      <Grid columns={{ base: 2, sm: 3, md: 5 }} gap={16}>
        <Stack direction="column" align="center" gap={12} style={{ padding: 20, background: 'var(--biiba-surface)', borderRadius: 20 }}>
          <Icon icon={Zap} animation="pulse" color="var(--biiba-primary)" size={32} />
          <Text size="xs" color="muted">Pulse</Text>
        </Stack>
        <Stack direction="column" align="center" gap={12} style={{ padding: 20, background: 'var(--biiba-surface)', borderRadius: 20 }}>
          <Icon icon={Settings} animation="spin" size={32} />
          <Text size="xs" color="muted">Spin</Text>
        </Stack>
        <Stack direction="column" align="center" gap={12} style={{ padding: 20, background: 'var(--biiba-surface)', borderRadius: 20 }}>
          <Icon icon={ArrowUp} animation="bounce" size={32} />
          <Text size="xs" color="muted">Bounce</Text>
        </Stack>
        <Stack direction="column" align="center" gap={12} style={{ padding: 20, background: 'var(--biiba-surface)', borderRadius: 20 }}>
          <Icon icon={Bell} animation="shake" color="var(--biiba-danger)" size={32} />
          <Text size="xs" color="muted">Shake</Text>
        </Stack>
        <Stack direction="column" align="center" gap={12} style={{ padding: 20, background: 'var(--biiba-surface)', borderRadius: 20 }}>
          <Icon icon={Cloud} animation="float" color="var(--biiba-primary)" size={32} />
          <Text size="xs" color="muted">Float</Text>
        </Stack>
      </Grid>

      <div style={{ padding: 24, background: 'var(--biiba-surface-raised)', borderRadius: 24, border: '1px solid var(--biiba-border)' }}>
        <Text variant="h6" weight="bold" style={{ marginBottom: 16 }}>Interactive Hover Effects</Text>
        <Text color="muted" size="sm" style={{ marginBottom: 24 }}>Hover over the icons to see custom Framer Motion properties applied.</Text>
        <Grid columns={{ base: 2, sm: 3, md: 5 }} gap={16}>
          <Stack direction="column" align="center" gap={12} style={{ padding: 20, background: 'var(--biiba-bg)', borderRadius: 20 }}>
            <Icon icon={Star} whileHover={{ scale: 1.3 }} size={32} />
            <Text size="xs" color="muted">Scale Up</Text>
          </Stack>
          <Stack direction="column" align="center" gap={12} style={{ padding: 20, background: 'var(--biiba-bg)', borderRadius: 20 }}>
            <Icon icon={Settings} whileHover={{ rotate: 90 }} transition={{ type: 'spring' }} size={32} />
            <Text size="xs" color="muted">Rotate</Text>
          </Stack>
          <Stack direction="column" align="center" gap={12} style={{ padding: 20, background: 'var(--biiba-bg)', borderRadius: 20 }}>
            <Icon icon={Bell} whileHover={{ rotate: [0, -15, 15, -15, 15, 0] }} transition={{ duration: 0.4 }} size={32} />
            <Text size="xs" color="muted">Wiggle</Text>
          </Stack>
          <Stack direction="column" align="center" gap={12} style={{ padding: 20, background: 'var(--biiba-bg)', borderRadius: 20 }}>
            <Icon icon={ArrowUp} whileHover={{ y: -8 }} size={32} />
            <Text size="xs" color="muted">Jump</Text>
          </Stack>
          <Stack direction="column" align="center" gap={12} style={{ padding: 20, background: 'var(--biiba-bg)', borderRadius: 20 }}>
            <Icon icon={Heart} whileHover={{ color: 'var(--biiba-danger)', scale: 1.1 }} color="var(--biiba-text-muted)" size={32} />
            <Text size="xs" color="muted">Color Shift</Text>
          </Stack>
        </Grid>
      </div>
    </Stack>
  )
}