Aurora Tweet Matrix

1'use client';
2
3import React from 'react';
4import { FaXTwitter, FaHeart, FaRetweet } from 'react-icons/fa6';
5
6const CARDS = [
7  {
8    name: 'Abhishek Kumar',
9    handle: '@mrabhi2k3',
10    avatar: 'AK',
11    text: 'Aurenza UI completely changes developer velocity. Copy-paste Tailwind components that just work.',
12    likes: '2.4k',
13    retweets: '512',
14    accent: 'hover:border-cyan-500/50 hover:shadow-cyan-500/10'
15  },
16  {
17    name: 'Elena Rostova',
18    handle: '@elena_dev',
19    avatar: 'ER',
20    text: 'Zero dependencies and pristine TypeScript support right out of the box. Essential UI library!',
21    likes: '1.8k',
22    retweets: '389',
23    accent: 'hover:border-purple-500/50 hover:shadow-purple-500/10'
24  },
25  {
26    name: 'Marcus Vance',
27    handle: '@marcus_v',
28    avatar: 'MV',
29    text: 'The 3D Globe and 5-layer orbital rings look so stunning in dark mode. Absolutely flawless.',
30    likes: '3.1k',
31    retweets: '840',
32    accent: 'hover:border-emerald-500/50 hover:shadow-emerald-500/10'
33  },
34  {
35    name: 'Sarah Chen',
36    handle: '@schen_ai',
37    avatar: 'SC',
38    text: 'Tailwind CSS v4 ready with high contrast light and dark modes. Incredible craftsmanship.',
39    likes: '1.5k',
40    retweets: '274',
41    accent: 'hover:border-pink-500/50 hover:shadow-pink-500/10'
42  }
43];
44
45export default function AuroraTweetCards() {
46  return (
47    <div className="relative w-full max-w-2xl overflow-hidden rounded-3xl border border-slate-200 dark:border-slate-800 bg-slate-950 p-5 sm:p-6 select-none shadow-2xl">
48      <div className="absolute -inset-10 opacity-30 blur-3xl bg-gradient-to-r from-teal-500 via-indigo-500 to-pink-500 pointer-events-none" />
49
50      <div className="relative z-10 grid grid-cols-1 sm:grid-cols-2 gap-4">
51        {CARDS.map((item, idx) => (
52          <div
53            key={idx}
54            className={`flex flex-col justify-between rounded-2xl border border-white/10 bg-slate-900/80 p-4 backdrop-blur-md shadow-lg transition-all duration-300 hover:scale-103 hover:bg-slate-900/95 ${item.accent}`}
55          >
56            <div>
57              <div className="flex items-center justify-between mb-2.5">
58                <div className="flex items-center gap-2">
59                  <div className="h-8 w-8 rounded-full bg-gradient-to-tr from-blue-600 to-indigo-600 flex items-center justify-center text-white font-bold text-xs">
60                    {item.avatar}
61                  </div>
62                  <div>
63                    <p className="text-xs font-bold text-white truncate">{item.name}</p>
64                    <p className="text-[10px] text-slate-400">{item.handle}</p>
65                  </div>
66                </div>
67                <FaXTwitter className="h-3.5 w-3.5 text-slate-400" />
68              </div>
69              <p className="text-xs text-slate-300 leading-relaxed">{item.text}</p>
70            </div>
71
72            <div className="flex items-center justify-between border-t border-white/10 pt-2.5 mt-3 text-[11px] text-slate-400">
73              <span className="flex items-center gap-1 hover:text-rose-400 transition cursor-pointer">
74                <FaHeart className="h-3 w-3" /> {item.likes}
75              </span>
76              <span className="flex items-center gap-1 hover:text-emerald-400 transition cursor-pointer">
77                <FaRetweet className="h-3 w-3" /> {item.retweets}
78              </span>
79              <span>10m ago</span>
80            </div>
81          </div>
82        ))}
83      </div>
84    </div>
85  );
86}