import { ListGroup, ListGroupItem } from 'flowbite-react'

const DefaultListcode = () => {
  return (
    <div>
      <ListGroup>
        <ListGroupItem>Profile</ListGroupItem>
        <ListGroupItem>Settings</ListGroupItem>
        <ListGroupItem>Messages</ListGroupItem>
        <ListGroupItem disabled>Download</ListGroupItem>
      </ListGroup>
    </div>
  )
}

export default DefaultListcode

import { ListGroup, ListGroupItem } from 'flowbite-react';

const LinkListCode = () => {
  return (
    <div>
      <ListGroup>
        <ListGroupItem href='#' active>
          Profile
        </ListGroupItem>
        <ListGroupItem href='#'>Settings</ListGroupItem>
        <ListGroupItem href='#'>Messages</ListGroupItem>
        <ListGroupItem href='#'>Download</ListGroupItem>
      </ListGroup>
    </div>
  )
}

export default LinkListCode

import { ListGroup, ListGroupItem } from 'flowbite-react'

const ListButtonCode = () => {
  return (
    <div>
      <ListGroup>
        <ListGroupItem onClick={() => alert('Profile clicked!')} active>
          Profile
        </ListGroupItem>
        <ListGroupItem>Settings</ListGroupItem>
        <ListGroupItem>Messages</ListGroupItem>
        <ListGroupItem>Download</ListGroupItem>
      </ListGroup>
    </div>
  )
}

export default ListButtonCode

import { ListGroup, ListGroupItem } from 'flowbite-react'
import {
  HiCloudDownload,
  HiInbox,
  HiOutlineAdjustments,
  HiUserCircle,
} from 'react-icons/hi'

const ListIconCode = () => {
  return (
    <div>
      <ListGroup>
        <ListGroupItem icon={HiUserCircle} active>
          Profile
        </ListGroupItem>
        <ListGroupItem icon={HiOutlineAdjustments}>Settings</ListGroupItem>
        <ListGroupItem icon={HiInbox}>Messages</ListGroupItem>
        <ListGroupItem icon={HiCloudDownload}>Download</ListGroupItem>
      </ListGroup>
    </div>
  )
}

export default ListIconCode