import React from 'react'
import { Badge } from '@/app/components/shadcn-ui/Default-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 '@/app/components/shadcn-ui/Default-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 '@/app/components/shadcn-ui/Default-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 '@/app/components/shadcn-ui/Default-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 '@/app/components/shadcn-ui/Default-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