Avatar Badge Moving Marquee

1'use client';
2
3import React from 'react';
4import { Star } from 'lucide-react';
5
6const REVIEWS = [
7  { name: 'Chloe B.', score: '5.0', text: 'Stunning glass UI components.' },
8  { name: 'Liam S.', score: '5.0', text: 'Tailwind v4 production ready.' },
9  { name: 'Elena R.', score: '5.0', text: 'Best developer experience.' },
10  { name: 'Marcus T.', score: '5.0', text: 'Zero hydration errors.' },
11  { name: 'Amara O.', score: '5.0', text: 'Incredible spatial design.' }
12];
13
14export default function AvatarBadgeMarquee() {
15  return (
16    <div className="w-full overflow-hidden py-4 select-none">
17      <div className="group flex w-max gap-4 hover:[animation-play-state:paused] animate-[marquee_20s_linear_infinite]">
18        {[...REVIEWS, ...REVIEWS, ...REVIEWS].map((item, idx) => (
19          <div
20            key={idx}
21            className="flex items-center gap-3 shrink-0 rounded-full border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 px-4 py-2 shadow-lg"
22          >
23            <div className="h-8 w-8 rounded-full bg-blue-600 flex items-center justify-center font-bold text-white text-xs">
24              {item.name.charAt(0)}
25            </div>
26            <div>
27              <div className="flex items-center gap-1.5">
28                <span className="text-xs font-bold text-slate-900 dark:text-slate-100">{item.name}</span>
29                <span className="flex items-center gap-0.5 rounded-full bg-amber-100 dark:bg-amber-950/60 px-1.5 py-0.2 text-[9px] font-bold text-amber-700 dark:text-amber-400">
30                  <Star className="h-2.5 w-2.5 fill-amber-400 text-amber-400" /> {item.score}
31                </span>
32              </div>
33              <p className="text-[11px] text-slate-500 dark:text-slate-400 font-medium">{item.text}</p>
34            </div>
35          </div>
36        ))}
37      </div>
38    </div>
39  );
40}