ethereum-org-website/src/components/ProductList.tsx at 49a71746aa8f8c2753d43c662562a641cc821593 · Anish-Gupta1/ethereum-org-website · GitHub

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
import type { ImageProps } from "next/image"
import { VisuallyHidden } from "@radix-ui/react-visually-hidden"

import { Image } from "@/components/Image"
import { ButtonLink } from "@/components/ui/buttons/Button"
import { Flex } from "@/components/ui/flex"
import { List, ListItem } from "@/components/ui/list"

import { cn } from "@/lib/utils/cn"

type Content = {
  title: string
  description: string
  contentItems?: React.ReactNode[]
  link?: string
  image?: ImageProps["src"]
  alt: string
  id?: string
  className?: string
}

export type ProductListProps = {
  content: Content[]
  category?: string
  actionLabel: string
}

const ProductList = ({ actionLabel, content, category }: ProductListProps) => {
  const CATEGORY_NAME = "category-name"

  return (
    <div className="w-full">
      {category && (
        <h3
          id={CATEGORY_NAME}
          className="mb-0 mt-10 border-b-2 border-border pb-4 text-2xl"
        >
          {category}
        </h3>
      )}
      <List aria-labelledby={CATEGORY_NAME} className="m-0 mb-4">
        {content.map(
          (
            {
              title,
              description,
              link,
              image,
              alt,
              id,
              contentItems,
              className,
            },
            idx
          ) => (
            <ListItem
              key={id || idx}
              color="text"
              className={cn(
                "mb-0 mt-8 flex pb-4",
                idx !== content.length - 1 && "border-b",
                className
              )}
            >
              <div className="w-20">
                {image && (
                  <Image
                    src={image}
                    alt={alt}
                    width={66}
                    height={66}
                    className="rounded-xl shadow-lg dark:shadow-body-light"
                  />
                )}
              </div>
              <Flex className="ms-4 w-full flex-col justify-between pb-4 sm:flex-row">
                <div className="flex flex-1 flex-col gap-2">
                  <div className="text-xl font-bold">{title}</div>
                  <div className="mb-0 text-sm opacity-60">{description}</div>
                  {contentItems && (
                    <div className="mb-0 flex flex-col gap-2 text-sm">
                      {contentItems}
                    </div>
                  )}
                </div>
                {link && (
                  <ButtonLink
                    variant="outline"
                    href={link}
                    className="ms-0 mt-4 min-h-fit gap-0 self-center rounded-sm px-6 py-1 sm:ms-8 sm:mt-0"
                  >
                    {actionLabel}
                    <VisuallyHidden>to {title} website</VisuallyHidden>
                  </ButtonLink>
                )}
              </Flex>
            </ListItem>
          )
        )}
      </List>
    </div>
  )
}

export default ProductList