feat(SW-368): added link chips component

components/TempDesignSystem/LinkChips/Chip/chip.module.css

@@ -0,0 +1,14 @@
+.linkChip {
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x-half);
+  padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
+  border-radius: var(--Corner-radius-Small);
+  background-color: var(--Base-Button-Inverted-Fill-Normal);
+  transition: background-color 0.3s;
+  text-decoration: none;
+}
+
+.linkChip:hover {
+  background-color: var(--Base-Button-Inverted-Fill-Hover-alt);
+}

components/TempDesignSystem/LinkChips/Chip/chip.ts

@@ -0,0 +1,4 @@
+export interface LinkChipProps {
+  url: string
+  title: string
+}

components/TempDesignSystem/LinkChips/Chip/index.tsx

@@ -0,0 +1,19 @@
+import Link from "next/link"
+
+import { ChevronRightSmallIcon } from "@/components/Icons"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+
+import { LinkChipProps } from "./chip"
+
+import styles from "./chip.module.css"
+
+export default function LinkChip({ url, title }: LinkChipProps) {
+  return (
+    <Caption textTransform="bold" color="burgundy" asChild>
+      <Link href={url} className={styles.linkChip}>
+        {title}
+        <ChevronRightSmallIcon color="burgundy" width={20} height={20} />
+      </Link>
+    </Caption>
+  )
+}

components/TempDesignSystem/LinkChips/index.tsx

@@ -0,0 +1,20 @@
+import LinkChip from "./Chip"
+import { LinkChipsProps } from "./linkChips"
+
+import styles from "./linkChips.module.css"
+
+export default function LinkChips({ chips }: LinkChipsProps) {
+  if (!chips.length) {
+    return null
+  }
+
+  return (
+    <ul className={styles.linkChips}>
+      {chips.map(({ url, title }) => (
+        <li key={`link-chip-${title}`}>
+          <LinkChip url={url} title={title} />
+        </li>
+      ))}
+    </ul>
+  )
+}

components/TempDesignSystem/LinkChips/linkChips.module.css

@@ -0,0 +1,8 @@
+.linkChips {
+  list-style: none;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: center;
+  gap: var(--Spacing-x1);
+}

components/TempDesignSystem/LinkChips/linkChips.ts

@@ -0,0 +1,5 @@
+import { LinkChipProps } from "./Chip/chip"
+
+export interface LinkChipsProps {
+  chips: LinkChipProps[]
+}