Add ratings to each crafting station. Tags on <CraftStationLink> polished with left and right gradient fade out

Author: xmliszt

app/craft/components/craft-station-link.tsx

@@ -4,6 +4,7 @@ import { motion } from 'motion/react';
 import Link from 'next/link';
 
 import type { CraftStation } from '@/app/craft/types';
+import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
 import { cn } from '@/lib/utils';
 
 type CraftStationLinkProps = {
@@ -16,27 +17,34 @@ export function CraftStationLink(props: CraftStationLinkProps) {
       <motion.div
         layoutId={`craft_station.container.${props.station.id}`}
         className={cn(
-          'group bg-background flex h-20 w-full flex-col justify-center overflow-hidden rounded-lg border p-4 text-left',
+          'group bg-background flex h-20 w-full flex-col justify-center overflow-hidden rounded-lg border py-4 text-left',
           'transition-shadow duration-300 hover:shadow-md'
         )}
       >
         <motion.div
           layoutId={`craft_station.title.${props.station.id}`}
-          className='shrink-0 truncate text-sm font-semibold'
+          className='shrink-0 truncate px-4 text-sm font-semibold'
         >
           {props.station.title}
         </motion.div>
-        <div className='text-muted-foreground mt-2 flex shrink-0 items-center gap-x-2 text-xs'>
-          {props.station.tags.map((tag) => (
-            <motion.span
-              layoutId={`craft_station.tag.${props.station.id}.${tag}`}
-              className='bg-muted rounded-md border px-2.5 py-1'
-              key={tag}
-            >
-              {tag}
-            </motion.span>
-          ))}
-        </div>
+        <ScrollArea className='relative w-full'>
+          <div className='text-muted-foreground mt-2 flex shrink-0 items-center gap-x-2 px-4 text-xs'>
+            {props.station.tags.map((tag) => (
+              <motion.span
+                layoutId={`craft_station.tag.${props.station.id}.${tag}`}
+                className='bg-muted rounded-md border px-2.5 py-1'
+                key={tag}
+              >
+                {tag}
+              </motion.span>
+            ))}
+          </div>
+          <ScrollBar orientation='horizontal' className='sr-only' />
+          {/* left gradient blur */}
+          <div className='from-background absolute top-0 left-0 h-full w-6 bg-gradient-to-r to-transparent' />
+          {/* right gradient blur */}
+          <div className='from-background absolute top-0 right-0 h-full w-6 bg-gradient-to-l to-transparent' />
+        </ScrollArea>
       </motion.div>
     </Link>
   );

app/craft/components/craft-station-modal-content.tsx

@@ -3,6 +3,7 @@
 import { motion } from 'motion/react';
 
 import type { CraftStation } from '@/app/craft/types';
+import { Ratings } from '@/components/ui/ratings';
 
 import { Sandbox } from './sandbox';
 
@@ -19,27 +20,38 @@ export function CraftStationModalContent(props: CraftStationModalContentProps) {
       >
         {props.station.title}
       </motion.div>
-      <motion.p
-        className='text-muted-foreground'
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        exit={{ opacity: 0 }}
-      >
-        {props.station.description}
-      </motion.p>
-      <div className='flex gap-2'>
-        {props.station.tags.map((tag) => (
-          <motion.span
-            layoutId={`craft_station.tag.${props.station.id}.${tag}`}
-            key={tag}
-            className='bg-muted text-muted-foreground rounded-md px-2.5 py-1 text-sm'
+      <div className='flex flex-col items-stretch gap-x-4 sm:flex-row sm:items-center'>
+        <div className='flex grow flex-col gap-y-2'>
+          <motion.p
+            className='text-muted-foreground flex-1'
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
           >
-            {tag}
-          </motion.span>
-        ))}
+            {props.station.description}
+          </motion.p>
+          <div className='flex gap-2'>
+            {props.station.tags.map((tag) => (
+              <motion.span
+                layoutId={`craft_station.tag.${props.station.id}.${tag}`}
+                key={tag}
+                className='bg-muted text-muted-foreground rounded-md px-2.5 py-1 text-sm'
+              >
+                {tag}
+              </motion.span>
+            ))}
+          </div>
+        </div>
+        <div className='hidden shrink-0 grow md:block'>
+          <Ratings id={`craft_station.${props.station.id}`} />
+        </div>
       </div>
       {/* Code */}
       <Sandbox code={props.station.code} />
+      {/* Display ratings on smaller screens */}
+      <div className='block md:hidden'>
+        <Ratings id={`craft_station.${props.station.id}`} />
+      </div>
     </motion.div>
   );
 }