feat: updates

packages/web/components/New/ArtistsInLine.tsx

@@ -0,0 +1,51 @@
+import { useNavigate } from 'react-router-dom'
+import { cx } from '@emotion/css'
+
+const ArtistInline = ({
+  artists,
+  className,
+  disableLink,
+  onClick,
+  hoverClassName,
+}: {
+  artists: Artist[]
+  className?: string
+  hoverClassName?: string
+  disableLink?: boolean
+  onClick?: (artistId: number) => void
+}) => {
+  const navigate = useNavigate()
+  const handleClick = (id: number) => {
+    if (id === 0 || disableLink) return
+    if (!onClick) {
+      navigate(`/artist/${id}`)
+    } else {
+      onClick(id)
+    }
+  }
+
+  if (!artists) return <div></div>
+
+  return (
+    <div
+      className={cx(
+        !className?.includes('line-clamp') && 'line-clamp-1',
+        className
+      )}
+    >
+      {artists.map((artist, index) => (
+        <span key={`${artist.id}-${artist.name}`}>
+          <span
+            onClick={() => handleClick(artist.id)}
+            className={cx(!!artist.id && !disableLink && hoverClassName)}
+          >
+            {artist.name}
+          </span>
+          {index < artists.length - 1 ? ', ' : ''}&nbsp;
+        </span>
+      ))}
+    </div>
+  )
+}
+
+export default ArtistInline