Awards 1 - Awards table with linked rows

1import React from "react";
2 
3import { cn } from "@/lib/utils";
4 
5interface Awards1Props {
6  className?: string;
7}
8 
9const Awards1 = ({ className }: Awards1Props) => {
10  const awards = [
11    {
12      name: "CSS Design Awards Winner",
13      description: "Recognized for excellence in web design and functionality.",
14      year: "2024",
15      url: "#",
16    },
17    {
18      name: "Awwwards Site of the Day",
19      description:
20        "Featured for outstanding creativity and innovation in web development.",
21      year: "2023",
22      url: "#",
23    },
24    {
25      name: "Shadcnblocks UI Blocks",
26      description:
27        "Awarded for exceptional user experience and interface design.",
28      year: "2023",
29      url: "https://www.shadcnblocks.com",
30    },
31    {
32      name: "Web Design Excellence",
33      description:
34        "Honored for superior design quality and technical implementation.",
35      year: "2022",
36      url: "#",
37    },
38  ];
39 
40  return (
41    <section className={cn("py-32", className)}>
42      <div className="container space-y-10 lg:space-y-12">
43        <h1 className="max-w-md text-5xl tracking-tighter lg:text-7xl">
44          Awards
45        </h1>
46        <table className="w-full border-collapse">
47          <thead>
48            <tr className="h-12 border-b text-left text-sm text-foreground/80">
49              <th className="font-semibold">Award</th>
50              <th className="font-semibold">Description</th>
51              <th className="text-right font-semibold">Year</th>
52            </tr>
53          </thead>
54          <tbody>
55            {awards.map((award, index) => (
56              <tr
57                key={index}
58                className="h-20 border-b text-left text-sm text-foreground/40"
59              >
60                <td className="text-lg font-light tracking-tight text-foreground lg:text-xl">
61                  <a
62                    href={award.url}
63                    target="_blank"
64                    className="hover:underline"
65                    title={award.name}
66                  >
67                    {award.name}
68                  </a>
69                </td>
70                <td>{award.description}</td>
71                <td className="text-right text-foreground">{award.year}</td>
72              </tr>
73            ))}
74          </tbody>
75        </table>
76      </div>
77    </section>
78  );
79};
80 
81export { Awards1 };