feat: monorepo

packages/web/components/Cover.tsx

@@ -0,0 +1,66 @@
+import SvgIcon from '@/web/components/SvgIcon'
+import cx from 'classnames'
+import { useState } from 'react'
+
+const Cover = ({
+  imageUrl,
+  onClick,
+  roundedClass = 'rounded-xl',
+  showPlayButton = false,
+  showHover = true,
+  alwaysShowShadow = false,
+}: {
+  imageUrl: string
+  onClick?: () => void
+  roundedClass?: string
+  showPlayButton?: boolean
+  showHover?: boolean
+  alwaysShowShadow?: boolean
+}) => {
+  const [isError, setIsError] = useState(imageUrl.includes('3132508627578625'))
+
+  return (
+    <div onClick={onClick} className='group relative z-0'>
+      {/* Neon shadow */}
+      {showHover && (
+        <div
+          className={cx(
+            'absolute top-2 z-[-1] h-full w-full scale-x-[.92] scale-y-[.96] bg-cover  blur-lg filter transition duration-300 ',
+            roundedClass,
+            !alwaysShowShadow && 'opacity-0 group-hover:opacity-60'
+          )}
+          style={{
+            backgroundImage: `url("${imageUrl}")`,
+          }}
+        ></div>
+      )}
+
+      {/* Cover */}
+      {isError ? (
+        <div className='box-content flex aspect-square h-full w-full items-center justify-center rounded-xl border border-black border-opacity-5  bg-gray-800 text-gray-300 '>
+          <SvgIcon name='music-note' className='h-1/2 w-1/2' />
+        </div>
+      ) : (
+        <img
+          className={cx(
+            'box-content aspect-square h-full w-full border border-black border-opacity-5 dark:border-white  dark:border-opacity-[.03]',
+            roundedClass
+          )}
+          src={imageUrl}
+          onError={() => imageUrl && setIsError(true)}
+        />
+      )}
+
+      {/* Play button */}
+      {showPlayButton && (
+        <div className='absolute top-0 hidden h-full w-full place-content-center group-hover:grid'>
+          <button className='btn-pressed-animation grid h-11 w-11 cursor-default place-content-center rounded-full border border-white border-opacity-[.08] bg-white bg-opacity-[.14] text-white backdrop-blur backdrop-filter transition-all hover:bg-opacity-[.44]'>
+            <SvgIcon className='ml-0.5 h-6 w-6' name='play-fill' />
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default Cover