Ol Component

import { Ol } from '@dashflowx/core'

export default function OlExample() {
  return (
    <Ol>
      <li>First item</li>
      <li>Second item</li>
      <li>Third item</li>
    </Ol>
  )
}

import { Ol } from '@dashflowx/core'

export default function BasicOl() {
  return (
    <Ol>
      <li>Step 1: Prepare ingredients</li>
      <li>Step 2: Mix ingredients</li>
      <li>Step 3: Cook for 30 minutes</li>
    </Ol>
  )
}

import { Ol } from '@dashflowx/core'

export default function StyledOl() {
  return (
    <Ol className="text-blue-600 font-semibold">
      <li>First styled item</li>
      <li>Second styled item</li>
      <li>Third styled item</li>
    </Ol>
  )
}

import { Ol } from '@dashflowx/core'

export default function CustomStyledOl() {
  return (
    <Ol className="text-lg font-bold text-purple-600 border-l-4 border-purple-600 pl-4">
      <li>Custom styled item 1</li>
      <li>Custom styled item 2</li>
      <li>Custom styled item 3</li>
    </Ol>
  )
}

import { Ol } from '@dashflowx/core'

export default function NestedOl() {
  return (
    <Ol>
      <li>Main step 1</li>
      <li>Main step 2</li>
      <Ol className="ml-4">
        <li>Sub step 2.1</li>
        <li>Sub step 2.2</li>
      </Ol>
      <li>Main step 3</li>
    </Ol>
  )
}

const instructionsList = (
  <Ol>
    <li>Read the instructions carefully</li>
    <li>Gather all required materials</li>
    <li>Follow each step in order</li>
    <li>Test the final result</li>
  </Ol>
);

const processSteps = (
  <Ol>
    <li>Initial consultation</li>
    <li>Requirements gathering</li>
    <li>Design and planning</li>
    <li>Development phase</li>
    <li>Testing and quality assurance</li>
    <li>Deployment and launch</li>
  </Ol>
);

const priorityList = (
  <Ol>
    <li>High priority task</li>
    <li>Medium priority task</li>
    <li>Low priority task</li>
  </Ol>
);

const checklist = (
  <Ol>
    <li>Review project requirements</li>
    <li>Create project timeline</li>
    <li>Assign team members</li>
    <li>Set up development environment</li>
    <li>Begin development work</li>
  </Ol>
);

const rankingList = (
  <Ol>
    <li>First place winner</li>
    <li>Second place winner</li>
    <li>Third place winner</li>
  </Ol>
);

// ✅ Good - Logical order
<Ol>
  <li>Step 1: Prepare</li>
  <li>Step 2: Mix</li>
  <li>Step 3: Cook</li>
</Ol>

// ❌ Avoid - Illogical order
<Ol>
  <li>Step 3: Cook</li>
  <li>Step 1: Prepare</li>
  <li>Step 2: Mix</li>
</Ol>

// ✅ Good - Clear content
<Ol>
  <li>Complete the registration form</li>
  <li>Verify your email address</li>
  <li>Set up your profile</li>
</Ol>

// ❌ Avoid - Unclear content
<Ol>
  <li>Do stuff</li>
  <li>More stuff</li>
  <li>Final stuff</li>
</Ol>

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

// ❌ Avoid - Inconsistent styling
<Ol className="random-styles">
  <li>Item 1</li>
  <li>Item 2</li>
</Ol>

// ✅ Good - Appropriate nesting
<Ol>
  <li>Main step</li>
  <Ol>
    <li>Sub step</li>
  </Ol>
</Ol>

// ❌ Avoid - Too deep nesting
<Ol>
  <li>Main step</li>
  <Ol>
    <li>Sub step</li>
    <Ol>
      <li>Sub-sub step</li>
      <Ol>
        <li>Sub-sub-sub step</li>
      </Ol>
    </Ol>
  </Ol>
</Ol>

// ✅ Good - Accessible content
<Ol>
  <li>Clear and descriptive step</li>
</Ol>

// ❌ Avoid - Unclear content
<Ol>
  <li>Click here</li>
</Ol>

<Ol className="text-lg font-bold text-blue-600 border-l-4 border-blue-600 pl-4">
  <li>Custom styled item</li>
</Ol>

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

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

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

// Small ordered list
<Ol className="text-sm" />

// Standard ordered list
<Ol className="text-base" />

// Large ordered list
<Ol className="text-lg" />

const steps = ['Prepare', 'Mix', 'Cook', 'Serve'];

<Ol>
  {steps.map((step, index) => (
    <li key={index}>Step {index + 1}: {step}</li>
  ))}
</Ol>

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

<Ol className={isCompleted ? 'text-green-600' : 'text-gray-600'}>
  <li>Task item</li>
</Ol>

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

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