import { Kbd } from 'flowbite-react'

const DefaultKbdCode = () => {
  return (
    <>
      <div className='flex flex-wrap gap-3'>
        <Kbd className='rounded-md'>Shift</Kbd>
        <Kbd className='rounded-md'>Ctrl</Kbd>
        <Kbd className='rounded-md'>Tab</Kbd>
        <Kbd className='rounded-md'>Caps Lock</Kbd>
        <Kbd className='rounded-md'>Esc</Kbd>
        <Kbd className='rounded-md'>Spacebar</Kbd>
        <Kbd className='rounded-md'>Enter</Kbd>
      </div>
    </>
  )
}

export default DefaultKbdCode

import { Kbd } from 'flowbite-react'

const InsideTextCode = () => {
  return (
    <>
      <div>
        Please press <Kbd className='rounded-md'>Ctrl</Kbd> +{' '}
        <Kbd className='rounded-md'>Shift</Kbd> +{' '}
        <Kbd className='rounded-md'>R</Kbd> to re-render an MDN page.
      </div>
    </>
  )
}

export default InsideTextCode

import {
  Table,
  Kbd,
  TableBody,
  TableCell,
  TableHead,
  TableHeadCell,
  TableRow,
} from 'flowbite-react'
import {
  MdKeyboardArrowDown,
  MdKeyboardArrowLeft,
  MdKeyboardArrowRight,
  MdKeyboardArrowUp,
} from 'react-icons/md'

const InsideTableCode = () => {
  return (
    <div className='overflow-x-auto'>
      <Table>
        <TableHead>
          <TableRow>
            <TableHeadCell>Key</TableHeadCell>
            <TableHeadCell>Description</TableHeadCell>
          </TableRow>
        </TableHead>
        <TableBody className='divide-y divide-border'>
          <TableRow className='bg-white dark:border-darkborder dark:bg-gray-900'>
            <TableCell className='whitespace-nowrap font-medium text-gray-900 dark:text-white'>
              <Kbd className='rounded-md'>Shift</Kbd> <span>or</span>{' '}
              <Kbd className='rounded-md'>Tab</Kbd>
            </TableCell>
            <TableCell>Navigate to interactive elements</TableCell>
          </TableRow>
          <TableRow className='bg-white dark:border-darkborder dark:bg-gray-900'>
            <TableCell className='whitespace-nowrap font-medium text-gray-900 dark:text-white'>
              <Kbd className='rounded-md'>Enter</Kbd> or{' '}
              <Kbd className='rounded-md'>Spacebar</Kbd>
            </TableCell>
            <TableCell>
              Ensure elements with ARIA role="button" can be activated with both
              key commands.
            </TableCell>
          </TableRow>
          <TableRow className='bg-white dark:border-darkborder dark:bg-gray-900'>
            <TableCell className='whitespace-nowrap font-medium text-gray-900 dark:text-white'>
              <span className='inline-flex gap-2'>
                <Kbd icon={MdKeyboardArrowUp} />
                <Kbd icon={MdKeyboardArrowDown} />
              </span>
              <span> or </span>
              <span className='inline-flex gap-2'>
                <Kbd icon={MdKeyboardArrowLeft} />
                <Kbd icon={MdKeyboardArrowRight} />
              </span>
            </TableCell>
            <TableCell>Choose and activate previous/next tab.</TableCell>
          </TableRow>
        </TableBody>
      </Table>
    </div>
  )
}

export default InsideTableCode

'use client'

import {
  MdKeyboardArrowDown,
  MdKeyboardArrowLeft,
  MdKeyboardArrowRight,
  MdKeyboardArrowUp,
} from 'react-icons/md'
import { Kbd } from 'flowbite-react'

const ArrowKeysCode = () => {
  return (
    <>
      <div className='flex items-center flex-wrap gap-3'>
        <Kbd icon={MdKeyboardArrowUp} />
        <Kbd icon={MdKeyboardArrowDown} />
        <Kbd icon={MdKeyboardArrowLeft} />
        <Kbd icon={MdKeyboardArrowRight} />
      </div>
    </>
  )
}

export default ArrowKeysCode

import { Kbd } from 'flowbite-react'

const FunctionKeysCode = () => {
  return (
    <>
      <div className='flex items-center flex-wrap gap-3'>
        <Kbd>F1</Kbd>
        <Kbd>F2</Kbd>
        <Kbd>F3</Kbd>
        <Kbd>F4</Kbd>
        <Kbd>F5</Kbd>
        <Kbd>F6</Kbd>
        <Kbd>F7</Kbd>
        <Kbd>F8</Kbd>
        <Kbd>F9</Kbd>
        <Kbd>F10</Kbd>
        <Kbd>F11</Kbd>
        <Kbd>F12</Kbd>
      </div>
    </>
  )
}

export default FunctionKeysCode

import { Kbd } from 'flowbite-react'

const LetterKeysCode = () => {
  return (
    <>
      <div className='flex items-center flex-wrap gap-3'>
        <Kbd>Q</Kbd>
        <Kbd>W</Kbd>
        <Kbd>E</Kbd>
        <Kbd>R</Kbd>
        <Kbd>T</Kbd>
        <Kbd>Y</Kbd>
        <Kbd>I</Kbd>
        <Kbd>O</Kbd>
        <Kbd>P</Kbd>
        <Kbd>A</Kbd>
        <Kbd>S</Kbd>
        <Kbd>D</Kbd>
        <Kbd>F</Kbd>
        <Kbd>G</Kbd>
        <Kbd>H</Kbd>
        <Kbd>J</Kbd>
        <Kbd>K</Kbd>
        <Kbd>L</Kbd>
        <Kbd>Z</Kbd>
        <Kbd>X</Kbd>
        <Kbd>C</Kbd>
        <Kbd>V</Kbd>
        <Kbd>B</Kbd>
        <Kbd>N</Kbd>
        <Kbd>M</Kbd>
      </div>
    </>
  )
}

export default LetterKeysCode

import { Kbd } from 'flowbite-react'

const NumbersKeysCode = () => {
  return (
    <>
      <div className='flex items-center flex-wrap gap-3'>
        <Kbd>1</Kbd>
        <Kbd>2</Kbd>
        <Kbd>3</Kbd>
        <Kbd>4</Kbd>
        <Kbd>5</Kbd>
        <Kbd>6</Kbd>
        <Kbd>7</Kbd>
        <Kbd>8</Kbd>
        <Kbd>9</Kbd>
        <Kbd>0</Kbd>
      </div>
    </>
  )
}

export default NumbersKeysCode