File size: 1,191 Bytes
1f122c3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
d160b97
1f122c3
 
 
2156c54
 
 
 
 
1f122c3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
import { ReactNode } from "react"

import { cn } from "@/lib/utils"

export function MenuItem({
  icon = null,
  children = null,
  selected = false,
  onClick = undefined,
  className = "",
}: {
  icon?: ReactNode
  children?: ReactNode
  selected?: boolean
  onClick?: () => void
  className?: string
}) {

  return (
    <div className={cn(
      `flex flex-col`,
      `items-center justify-center justify-items-stretch`,
      // `bg-green-500`,
      `cursor-pointer`,
      `w-20 h-18 sm:w-full sm:h-21`, 
      `p-1`,
      `group`
    )}
      onClick={onClick ? () => {
        if (!selected) {
          onClick()
        }
      } : undefined}
    >
      <div
        className={cn(
        `flex flex-col`,
        `items-center justify-center`,
        `w-full h-full`,
        `space-y-1.5`,
        `rounded-xl`,
        `text-xs`,
        `transition-all duration-300 ease-in-out`,
        // `bg-yellow-500`,
  
        selected
          ? `bg-neutral-100/10`
          : `group-hover:bg-neutral-100/10 bg-neutral-100/0`,
     

        className,
      )}
      >
      {icon}
      <div className="text-center">
        {children}
      </div>
    </div>
  </div>
  )
}