vertical image text cards

Author: davidlyons

src/components/AlbumCoversTextGrid.tsx

@@ -13,18 +13,18 @@ export const AlbumCoversTextGrid = ({
   onAlbumClick,
   activeAlbum,
 }: AlbumCoversTextGridProps) => (
-  <div className="grid gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-5">
+  <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 2xl:grid-cols-9">
     {releases.map(({ basic_information: { id, title, artists, year, formats, thumb } }, index) => (
       <button
         className={cn(
-          `hover:bg-foreground/8 group flex cursor-pointer gap-4 overflow-hidden rounded-sm border
-          p-3 text-start outline-2 outline-offset-2 outline-transparent transition-colors`,
+          `hover:bg-foreground/10 group focus-visible:bg-foreground/10 cursor-pointer
+          overflow-hidden rounded-sm p-3 text-start outline-1 outline-transparent transition-colors`,
           id === activeAlbum && 'outline-ring'
         )}
         key={`${title}-${index}`}
         onClick={() => onAlbumClick(id)}
       >
-        <div className="size-24 shrink-0 overflow-hidden rounded-xs">
+        <div className="mb-3 aspect-square overflow-hidden rounded-sm">
           {thumb ? (
             <img src={thumb} alt={title} className="size-full object-cover" />
           ) : (
@@ -34,15 +34,18 @@ export const AlbumCoversTextGrid = ({
           )}
         </div>
         <div className="grow">
-          <h2 className="max-w-40 truncate font-bold md:max-w-24 xl:max-w-36">
+          <h2 className="max-w-40 truncate md:max-w-24 xl:max-w-36">
             <span className="underline-offset-4 group-hover:underline">{title}</span>
           </h2>
-          <p className="mb-2 max-w-40 truncate md:max-w-24 xl:max-w-36">
+          <p className="mb-2 max-w-40 truncate opacity-70 md:max-w-24 xl:max-w-36">
             {artists.map((artist) => artist.name).join(', ')}
           </p>
-          <p className="text-sm">{year}</p>
           <p className="max-w-40 truncate text-sm opacity-50 md:max-w-24 xl:max-w-36">
-            {formats.map((format) => format.name).join(', ')}
+            {year} •{' '}
+            {formats
+              .filter((format) => format.name !== 'All Media')
+              .map((format) => format.name)
+              .join(', ')}
           </p>
         </div>
       </button>