Social Links 01

1import { cn } from "@/lib/utils"
2import { IconPlaceholder } from "@/registry/icons/icon-placeholder"
3 
4export function SocialLinks01() {
5  return (
6    <div className="max-w-screen overflow-x-clip">
7      <div className="container mx-auto px-4">
8        <div className="relative border-x border-line">
9          <div className="pointer-events-none absolute inset-0 -z-1 hidden gap-2 sm:grid sm:grid-cols-2 md:grid-cols-3">
10            <div className="border-r border-line" />
11            <div className="border-l border-line md:border-x" />
12            <div className="border-l border-line max-md:hidden" />
13          </div>
14 
15          <ul className="grid grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-3">
16            {SOCIAL_LINKS.map((link, index) => {
17              return (
18                <li
19                  key={index}
20                  className={cn(
21                    "max-sm:screen-line-top max-sm:screen-line-bottom",
22                    "sm:max-md:nth-[2n+1]:screen-line-top sm:max-md:nth-[2n+1]:screen-line-bottom",
23                    "md:nth-[3n+1]:screen-line-top md:nth-[3n+1]:screen-line-bottom"
24                  )}
25                >
26                  <SocialLinkItem {...link} />
27                </li>
28              )
29            })}
30          </ul>
31        </div>
32      </div>
33    </div>
34  )
35}
36 
37type SocialLink = {
38  icon: string
39  title: string
40  href: string
41}
42 
43function SocialLinkItem({ icon, title, href }: SocialLink) {
44  return (
45    <div className="relative flex cursor-pointer items-center gap-4 p-4 pr-2 transition-[background-color] ease-out hover:bg-accent/50 dark:hover:bg-accent/20">
46      <div className="relative shrink-0 [--image-radius:var(--radius-lg)]">
47        <img
48          className="size-8 rounded-(--image-radius) select-none"
49          src={icon}
50          alt={`${title} logo`}
51        />
52        <div className="pointer-events-none absolute inset-0 rounded-(--image-radius) inset-ring-1 inset-ring-black/10 dark:inset-ring-white/15" />
53      </div>
54 
55      <h3 className="flex-1 font-medium">
56        <a href={href} target="_blank" rel="noopener">
57          <span className="absolute inset-0" aria-hidden />
58          {title}
59        </a>
60      </h3>
61 
62      <IconPlaceholder
63        lucide="ArrowUpRightIcon"
64        tabler="IconArrowUpRight"
65        hugeicons="ArrowUpRight03Icon"
66        phosphor="ArrowUpRightIcon"
67        remixicon="RiArrowRightUpLine"
68        className="size-4 shrink-0 text-muted-foreground"
69      />
70    </div>
71  )
72}
73 
74// … truncated