import { Progress } from 'flowbite-react'

const DefaultProgressCode = () => {
  return (
    <div>
      <div className='flex flex-col gap-2'>
        <Progress progress={20} />
        <Progress progress={40} />
        <Progress progress={60} />
        <Progress progress={80} />
        <Progress progress={100} />
      </div>
    </div>
  )
}

export default DefaultProgressCode

import { Progress } from 'flowbite-react'

const LabelProgressCode = () => {
  return (
    <div>
      <div className='flex flex-col gap-2'>
        <Progress
          progress={20}
          textLabel='Progress'
          size='lg'
          labelProgress
          labelText
        />
        <Progress
          progress={40}
          textLabel='Progress'
          size='lg'
          labelProgress
          labelText
        />
        <Progress
          progress={60}
          textLabel='Progress'
          size='lg'
          labelProgress
          labelText
        />
        <Progress
          progress={80}
          textLabel='Progress'
          size='lg'
          labelProgress
          labelText
        />
        <Progress
          progress={100}
          textLabel='Progress'
          size='lg'
          labelProgress
          labelText
        />
      </div>
    </div>
  )
}

export default LabelProgressCode

import { Progress } from 'flowbite-react'

const LabelPositionCode = () => {
  return (
    <div>
      <div className='flex flex-col gap-2'>
        <Progress
          progress={20}
          progressLabelPosition='inside'
          textLabel='MaterialM'
          textLabelPosition='outside'
          size='lg'
          labelProgress
          labelText
        />
        <Progress
          progress={40}
          progressLabelPosition='inside'
          textLabel='MaterialPro'
          textLabelPosition='outside'
          size='lg'
          labelProgress
          labelText
        />
        <Progress
          progress={60}
          progressLabelPosition='inside'
          textLabel='AdminProPro'
          textLabelPosition='outside'
          size='lg'
          labelProgress
          labelText
        />
        <Progress
          progress={80}
          progressLabelPosition='inside'
          textLabel='Flexy'
          textLabelPosition='outside'
          size='lg'
          labelProgress
          labelText
        />
        <Progress
          progress={100}
          progressLabelPosition='inside'
          textLabel='Spike'
          textLabelPosition='outside'
          size='lg'
          labelProgress
          labelText
        />
      </div>
    </div>
  )
}

export default LabelPositionCode

import { Progress } from 'flowbite-react'

const ProgressSizeCode = () => {
  return (
    <div>
      <div className='flex flex-col gap-2'>
        <div className='text-base font-medium dark:text-white'>Small</div>
        <Progress progress={45} size='sm' color='primary' />
        <div className='text-base font-medium dark:text-white'>Default</div>
        <Progress progress={45} size='md' color='primary' />
        <div className='text-lg font-medium dark:text-white'>Large</div>
        <Progress progress={45} size='lg' color='primary' />
        <div className='text-lg font-medium dark:text-white'>Extra Large</div>
        <Progress progress={45} size='xl' color='primary' />
      </div>
    </div>
  )
}

export default ProgressSizeCode

import { Progress } from 'flowbite-react'

const ProgressColorCode = () => {
  return (
    <div>
      <div className='flex flex-col gap-2'>
        <div className='text-base font-medium text-primary'>Primary</div>
        <Progress progress={45} color='primary' />
        <div className='text-base font-medium text-secondary'>Secondary</div>
        <Progress progress={45} color='secondary' />
        <div className='text-base font-medium text-error'>Error</div>
        <Progress progress={45} color='error' />
        <div className='text-base font-medium text-success'>Success</div>
        <Progress progress={45} color='success' />
        <div className='text-base font-medium text-warning'>Warning</div>
        <Progress progress={45} color='warning' />
        <div className='text-base font-medium text-info'>Info</div>
        <Progress progress={45} color='info' />
      </div>
    </div>
  )
}

export default ProgressColorCode