Li Component

import { Li } from '@dashflowx/core'

export default function LiExample() {
  return (
    <ul>
      <Li>First item</Li>
      <Li>Second item</Li>
      <Li>Third item</Li>
    </ul>
  )
}

import { Li } from '@dashflowx/core'

export default function BasicLi() {
  return (
    <ul>
      <Li>Basic list item</Li>
    </ul>
  )
}

import { Li } from '@dashflowx/core'

export default function StyledLi() {
  return (
    <ul>
      <Li className="text-blue-600 font-semibold">
        Styled list item
      </Li>
    </ul>
  )
}

import { Li } from '@dashflowx/core'

export default function CustomStyledLi() {
  return (
    <ul>
      <Li className="text-lg font-bold text-purple-600 border-l-4 border-purple-600 pl-4">
        Custom styled item
      </Li>
    </ul>
  )
}

import { Li } from '@dashflowx/core'

export default function LiWithIcon() {
  return (
    <ul>
      <Li className="flex items-center space-x-2">
        <span className="text-green-500">✓</span>
        <span>Item with icon</span>
      </Li>
    </ul>
  )
}

import { Li } from '@dashflowx/core'

export default function NestedLi() {
  return (
    <ul>
      <Li>Parent item</Li>
      <ul className="ml-4">
        <Li>Child item 1</Li>
        <Li>Child item 2</Li>
      </ul>
    </ul>
  )
}

const featureList = (
  <ul>
    <Li>Feature 1</Li>
    <Li>Feature 2</Li>
    <Li>Feature 3</Li>
  </ul>
);

const navigationMenu = (
  <ul>
    <Li>Home</Li>
    <Li>About</Li>
    <Li>Contact</Li>
  </ul>
);

const checklist = (
  <ul>
    <Li className="flex items-center space-x-2">
      <span className="text-green-500">✓</span>
      <span>Completed task</span>
    </Li>
    <Li className="flex items-center space-x-2">
      <span className="text-gray-400">○</span>
      <span>Pending task</span>
    </Li>
  </ul>
);

const instructions = (
  <ol>
    <Li>Step 1: Prepare the ingredients</Li>
    <Li>Step 2: Mix the ingredients</Li>
    <Li>Step 3: Cook for 30 minutes</Li>
  </ol>
);

const benefitsList = (
  <ul>
    <Li className="text-green-600">✓ Fast delivery</Li>
    <Li className="text-green-600">✓ Quality guarantee</Li>
    <Li className="text-green-600">✓ 24/7 support</Li>
  </ul>
);

// ✅ Good - Proper semantic usage
<ul>
  <Li>Item 1</Li>
  <Li>Item 2</Li>
</ul>

// ❌ Avoid - Missing list container
<Li>Item 1</Li>
<Li>Item 2</Li>

// ✅ Good - Consistent styling
<ul>
  <Li className="standard-li-style">Item 1</Li>
  <Li className="standard-li-style">Item 2</Li>
</ul>

// ❌ Avoid - Inconsistent styling
<ul>
  <Li className="random-style-1">Item 1</Li>
  <Li className="random-style-2">Item 2</Li>
</ul>

// ✅ Good - Clear content
<Li>Complete the registration form</Li>

// ❌ Avoid - Unclear content
<Li>Do stuff</Li>

// ✅ Good - Appropriate nesting
<ul>
  <Li>Main item</Li>
  <ul>
    <Li>Sub item</Li>
  </ul>
</ul>

// ❌ Avoid - Too deep nesting
<ul>
  <Li>Main item</Li>
  <ul>
    <Li>Sub item</Li>
    <ul>
      <Li>Sub-sub item</Li>
      <ul>
        <Li>Sub-sub-sub item</Li>
      </ul>
    </ul>
  </ul>
</ul>

// ✅ Good - Accessible content
<Li>Clear and descriptive content</Li>

// ❌ Avoid - Unclear content
<Li>Click here</Li>

<Li className="text-lg font-bold text-blue-600">
  Custom styled item
</Li>

// Light theme
<Li className="text-gray-900" />

// Dark theme
<Li className="text-white" />

// Brand theme
<Li className="text-blue-600" />

// Small list item
<Li className="text-sm" />

// Standard list item
<Li className="text-base" />

// Large list item
<Li className="text-lg" />

const items = ['Item 1', 'Item 2', 'Item 3'];

<ul>
  {items.map((item, index) => (
    <Li key={index}>{item}</Li>
  ))}
</ul>

const [isCompleted, setIsCompleted] = useState(false);

<Li className={isCompleted ? 'text-green-600 line-through' : 'text-gray-600'}>
  Task item
</Li>

const [selectedItem, setSelectedItem] = useState(null);

<Li 
  className={selectedItem === 'item1' ? 'bg-blue-100' : ''}
  onClick={() => setSelectedItem('item1')}
>
  Interactive item
</Li>