Hugging Face's logo

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

App Files Community
9
ai-tube
File size: 3,490 Bytes 
b965e2b
 
d160b97
 
 
1f122c3
 
80ea539
e4d3d8a
1f122c3
 
 
f62b8d3
1f122c3
 
 
f62b8d3
1f122c3
 
b965e2b
 
 
 
80ea539
 
b965e2b
 
 
 
 
1f122c3
d160b97
 
1f122c3
b161bd3
1f122c3
 
b161bd3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1f122c3
b161bd3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1f122c3
d160b97
b161bd3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f27679f
1f122c3
b161bd3
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
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
 
import { useState } from "react"

import { RiCheckboxCircleFill } from "react-icons/ri"
import { IoAdd } from "react-icons/io5"

import { cn } from "@/lib/utils"
import { ChannelInfo } from "@/types"
import { isCertifiedUser } from "@/app/certification"
import { DefaultAvatar } from "../default-avatar"

export function ChannelCard({
  channel,
  onClick,
  className = "",
}: {
  channel: ChannelInfo
  onClick?: (channel: ChannelInfo) => void
  className?: string
 }) {
  const [channelThumbnail, setChannelThumbnail] = useState(channel.thumbnail)

  const handleBadChannelThumbnail = () => {
    try {
      if (channelThumbnail) {
        setChannelThumbnail("")
      }
    } catch (err) {
      
    }
  }

  const isCreateButton = !channel.id

  return (
    // <Link href={`/channel?c=${channel.id}`}>
      <div
        className={cn(
        `flex flex-col`,
        `items-center justify-center`,
        `space-y-1`,
        `w-52 h-52`,
        `rounded-lg`,
        `text-neutral-100/80`,
        isCreateButton ? '' : `hover:bg-neutral-800/30 hover:text-neutral-100/100`,
        `cursor-pointer`,
        className,
      )}
      onClick={() => {
        if (onClick) {
          onClick(channel)
        }
      }}
      >
        <div
          className={cn(
            `flex flex-col items-center justify-center`,
            `rounded-full overflow-hidden`,
            `w-26 h-26`
          )}
        >
          {isCreateButton
          ? <div className={cn(
            `flex flex-col justify-center items-center text-center`,
            `w-full h-full rounded-full`,
            `bg-neutral-700 hover:bg-neutral-600`,
            `border-2 border-neutral-400 hover:border-neutral-300`
            )}>
              <IoAdd className="w-8 h-8" />
            </div>
          : channelThumbnail
          ? <img
              src={channelThumbnail}
              onError={handleBadChannelThumbnail}
            />
          : <DefaultAvatar
            username={channel.datasetUser}
            bgColor="#fde047"
            textColor="#1c1917"
            width={104}
            roundShape
          />}
        </div>

        <div className={cn(
          `flex flex-col`,
          `items-center justify-center text-center`,
          `space-y-1`
        )}>
          <div className={cn(
            `text-center text-base font-medium text-zinc-100`,
            isCreateButton ? 'mt-2' : ''
          )}>{
            isCreateButton ? "Create a channel" : channel.label
          }</div>
          {/*<div className="text-center text-sm font-semibold">
            by <a href={
              `https://huggingface.co/${channel.datasetUser}`
            } target="_blank">@{channel.datasetUser}</a>
          </div>
          */}
          {!isCreateButton && <div className="flex flex-row items-center space-x-0.5">
            <div className="flex flex-row items-center text-center text-xs font-medium">@{channel.datasetUser}</div>
            {isCertifiedUser(channel.datasetUser) ? <div className="text-xs text-neutral-400"><RiCheckboxCircleFill className="" /></div> : null}
          </div>}
          {!isCreateButton && <div className="flex flex-row items-center justify-center text-neutral-400">
            <div className="text-center text-xs">{0} videos</div>
            <div className="px-1">-</div>
            <div className="text-center text-xs">{channel.likes} likes</div>
          </div>}
        </div>
      </div>
    // </Link>
  )
}