Hugging Face's logo

Spaces:
jbilcke-hf
/
ai-tube
Running on CPU Upgrade

App Files Community
8
ai-tube
File size: 3,109 Bytes 
3d4392e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
 
import { cn } from "@/lib/utils/cn"
import { ReactNode } from "react"
import { IconType } from "react-icons/lib"
import { SingleIcon } from "../single-icon"

export function IconSwitch({
  onIcon,
  onIconAlt,
  offIcon,
  offIconAlt,
  onClick,
  isToggledOn = false,
  isAlt = false,
  disabled = false,
  className = "",
  size = "md",
  thickOnHover = false,
  children = null,
  iconClass = "",
}: {
  onIcon: IconType
  onIconAlt?: IconType
  offIcon: IconType
  offIconAlt?: IconType
  onClick?: () => void
  isToggledOn?: boolean
  isAlt?: boolean
  disabled?: boolean
  className?: string
  size?: "2xs" | "xs" | "sm" | "md"
  thickOnHover?: boolean
  children?: ReactNode
  iconClass?: string
}) {

  const iconSize = 
    size === "2xs" ? "w-4 h-4" :
    size === "xs" ? "w-5 h-5" :
    size === "sm" ? "w-6 h-6" :
    size === "md" ? "w-7 h-7" :
    "w-8 h-8"

  return (
    <div className={cn(
      // this `group` is important to coordinate the behavior of the inner icon
      // (toggle a class during a "mouse hover" over the group)
      `group`,
      `relative`,
      `select-none`,
      `flex flex-row items-center justify-center cursor-pointer`,
      `transition-all ease-in-out duration-100`,
      `rounded-full`,
      `text-sm font-light`,
      disabled
        ? `pointer-events-none opacity-50`
        : `cursor-pointer text-gray-400  hover:text-gray-100`,
      className
    )}
    onClick={onClick ? () => {
      if (!disabled) {
        onClick()
      }
    } : undefined}
    >
      <div className={cn(`
        flex flex-row items-center justify-center
        transition-all ease-in-out duration-100
        w-12 h-12
        `,
        {
          "w-9 h-9": size === "sm",
        },
      )}>
        <SingleIcon
          type={offIcon}
          className={cn(
            iconSize,
            {
              "opacity-0 pointer-events-none": isToggledOn || isAlt
            },
            iconClass
          )}
          thickOnHover={thickOnHover}
        />
        <SingleIcon
          type={onIcon}
          className={cn(
            iconSize,
            {
              "opacity-0 pointer-events-none": !isToggledOn || isAlt
            },
            iconClass
          )}
          thickOnHover={thickOnHover}
        />
        <SingleIcon
          type={offIconAlt}
          className={cn(
            iconSize,
            {
              "opacity-0 pointer-events-none": isToggledOn || !isAlt
            },
            iconClass
          )}
          thickOnHover={thickOnHover}
        />
        <SingleIcon
          type={onIconAlt}
          className={cn(
            iconSize,
            {
              "opacity-0 pointer-events-none": !isToggledOn || !isAlt
            },
            iconClass
          )}
          thickOnHover={thickOnHover}
        />
      </div>
      {children
        ? <div className={cn(
            `transition-all duration-100 ease-in-out`,
            `group-hover:cursor-pointer -ml-2`,
            `pointer-events-none`,
          )}>
         {children}
      </div> : null}
    </div>
  )
}