import React from 'react'
import { Badge } from '@/components/ui/badge'

const DefaultBadgeCode = () => {
  return (
    <>
      <div className='flex items-center gap-3 mt-4'>
        <Badge>Primary</Badge>
        <Badge variant='secondary'>Secondary</Badge>
        <Badge variant='success'>Success</Badge>
        <Badge variant='warning'>Warning</Badge>
        <Badge variant='info'>Info</Badge>
        <Badge variant='error'>Error</Badge>
      </div>
    </>
  )
}

export default DefaultBadgeCode

import React from 'react'
import { Badge } from '@/components/ui/badge'

const OutlineBadgeCode = () => {
  return (
    <>
      <div className='flex items-center gap-3 mt-4'>
        <Badge variant='outline'>Primary</Badge>
        <Badge variant='outlineSecondary'>Secondary</Badge>
        <Badge variant='outlineSuccess'>Success</Badge>
        <Badge variant='outlineWarning'>Warning</Badge>
        <Badge variant='outlineInfo'>Info</Badge>
        <Badge variant='outlineError'>Error</Badge>
      </div>
    </>
  )
}

export default OutlineBadgeCode

import React from 'react'
import { badgeVariants } from '@/components/ui/badge'
import Link from 'next/link'

const LinkBadgeCode = () => {
  return (
    <>
      <div className='flex items-center flex-wrap gap-3 mt-4'>
        <Link
          href='/ui-components/badge'
          className={badgeVariants({ variant: 'default' })}>
          Badge Link 1
        </Link>
        <Link
          href='/ui-components/badge'
          className={badgeVariants({ variant: 'secondary' })}>
          Badge Link 2
        </Link>
        <Link
          href='/ui-components/badge'
          className={badgeVariants({ variant: 'success' })}>
          Badge Link 3
        </Link>
        <Link
          href='/ui-components/badge'
          className={badgeVariants({ variant: 'warning' })}>
          Badge Link 4
        </Link>
        <Link
          href='/ui-components/badge'
          className={badgeVariants({ variant: 'error' })}>
          Badge Link 5
        </Link>
        <Link
          href='/ui-components/badge'
          className={badgeVariants({ variant: 'info' })}>
          Badge Link 6
        </Link>
      </div>
    </>
  )
}

export default LinkBadgeCode

import React from 'react'
import { Badge } from '@/components/ui/badge'
import { Icon } from '@iconify/react/dist/iconify.js'

const BadgeWithIconCode = () => {
  return (
    <>
      <div className='flex items-center flex-wrap gap-3 mt-4'>
        <Badge>
          <div className='flex items-center gap-1'>
            <Icon icon='tabler:check' className='text-base' />2 minutes ago
          </div>
        </Badge>
        <Badge variant='secondary'>
          <div className='flex items-center gap-1'>
            <Icon icon='tabler:time-duration-30' className='text-base' />3 days
            ago
          </div>
        </Badge>
        <Badge variant='success'>
          <div className='flex items-center gap-1'>
            <Icon icon='tabler:time-duration-60' className='text-base' />4
            minutes dago
          </div>
        </Badge>
        <Badge variant='error'>
          <div className='flex items-center gap-1'>
            <Icon icon='tabler:calendar-time' className='text-base' />6 days ago
          </div>
        </Badge>
        <Badge variant='info'>
          <div className='flex items-center gap-1'>
            <Icon icon='tabler:file-time' className='text-base' />
            10 days ago
          </div>
        </Badge>
      </div>
    </>
  )
}

export default BadgeWithIconCode

import React from 'react'
import { Badge } from '@/components/ui/badge'
import { Icon } from '@iconify/react/dist/iconify.js'

const IconBadgeCode = () => {
  return (
    <>
      <div className='flex items-center gap-3 mt-4'>
        <Badge>
          <Icon icon='tabler:check' className='text-base' />
        </Badge>
        <Badge variant='secondary'>
          <Icon icon='tabler:time-duration-30' className='text-base' />
        </Badge>
        <Badge variant='success'>
          <Icon icon='tabler:time-duration-60' className='text-base' />
        </Badge>
        <Badge variant='error'>
          <Icon icon='tabler:calendar-time' className='text-base' />
        </Badge>
        <Badge variant='info'>
          <Icon icon='tabler:file-time' className='text-base' />
        </Badge>
      </div>
    </>
  )
}

export default IconBadgeCode