📦 hyoban / kodoku

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70import Image from "next/image"

import Link from "~/components/link"
import { Separator } from "~/components/ui/separator"
import { getFeedInfoList } from "~/lib/unsafe"
import { cn } from "~/lib/utils"

export const revalidate = 3600

const ICON_MAP = new Map<string, string>([
  ["twitter.com", "i-simple-icons-twitter"],
  ["github.com", "i-simple-icons-github"],
  ["www.youtube.com", "i-simple-icons-youtube"],
  ["space.bilibili.com", "i-simple-icons-bilibili"],
  ["discord.com", "i-simple-icons-discord"],
  ["t.me", "i-simple-icons-telegram"],
])

function IconLink({ link }: { link: string }) {
  if (!ICON_MAP.get(new URL(link).hostname)) return null

  return (
    <Link href={link} className="flex items-center text-sm">
      <div className={cn(ICON_MAP.get(new URL(link).hostname))}></div>
    </Link>
  )
}

export default async function SubscriptionPage() {
  const feedInfoList = await getFeedInfoList()
  if (!feedInfoList) return null

  return (
    <div className="m-5 sm:m-10">
      {feedInfoList
        .sort((a, b) => a.title.localeCompare(b.title))
        .map((feedInfo) => (
          <div
            key={feedInfo.id}
            className="group mx-auto my-4 flex w-full max-w-xl items-center rounded-md px-4 py-3 hover:bg-accent"
          >
            <Image
              src={feedInfo.avatar}
              className="h-12 w-12 shrink-0 grow-0 rounded-full bg-white object-cover"
              alt="avatar"
              width={48}
              height={48}
            />
            <div className="ml-4 flex w-full flex-col self-stretch">
              <div className="flex grow flex-col sm:flex-row sm:items-center sm:justify-between">
                <Link href={feedInfo.url} className="flex items-center">
                  <h3 className="text-lg font-semibold">{feedInfo.title}</h3>
                </Link>

                <span className="my-2 flex gap-3">
                  {feedInfo.socials
                    .filter((link) => link)
                    .map((link) => (
                      <IconLink key={link} link={link} />
                    ))}
                </span>
              </div>
              <Separator className="group-hover:bg-accent" />
            </div>
          </div>
        ))}
    </div>
  )
}