add PillLink component

src/shared/components/pill/pill.module.css

@@ -41,3 +41,23 @@
         color: var(--theme-colors-foreground-muted);
     }
 }
+
+.group.sm {
+    --pg-gap: var(--theme-spacing-sm) !important;
+}
+
+.group.md {
+    --pg-gap: var(--theme-spacing-md) !important;
+}
+
+.group.lg {
+    --pg-gap: var(--theme-spacing-lg) !important;
+}
+
+.group.xl {
+    --pg-gap: var(--theme-spacing-xl) !important;
+}
+
+.group.xs {
+    --pg-gap: var(--theme-spacing-xs) !important;
+}

src/shared/components/pill/pill.tsx

@@ -1,5 +1,11 @@
-import { Pill as MantinePill, PillProps as MantinePillProps } from '@mantine/core';
+import {
+    Pill as MantinePill,
+    PillGroupProps as MantinePillGroupProps,
+    PillProps as MantinePillProps,
+} from '@mantine/core';
 import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { Link } from 'react-router';
 
 import styles from './pill.module.css';
 
@@ -30,4 +36,60 @@ export const Pill = ({ children, classNames, radius = 'md', size = 'md', ...prop
     );
 };
 
-Pill.Group = MantinePill.Group;
+interface PillGroupProps extends MantinePillGroupProps {}
+
+const PillGroup = ({ children, classNames, gap = 'sm', ...props }: PillGroupProps) => {
+    return (
+        <MantinePill.Group
+            classNames={{
+                group: clsx(styles.group, {
+                    [styles.lg]: gap === 'lg',
+                    [styles.md]: gap === 'md',
+                    [styles.sm]: gap === 'sm',
+                    [styles.xl]: gap === 'xl',
+                    [styles.xs]: gap === 'xs',
+                }),
+                ...classNames,
+            }}
+            gap={gap}
+            {...props}
+        >
+            {children}
+        </MantinePill.Group>
+    );
+};
+
+Pill.Group = PillGroup;
+
+interface PillLinkProps
+    extends Omit<React.ComponentPropsWithoutRef<typeof Link>, keyof PillProps>,
+        PillProps {}
+
+export const PillLink = forwardRef<HTMLDivElement, PillLinkProps>(({ children, ...props }, ref) => {
+    const { classNames, radius = 'md', size = 'md', ...rest } = props;
+
+    return (
+        <MantinePill
+            classNames={{
+                label: clsx({
+                    [styles.label]: true,
+                    [styles.lg]: size === 'lg',
+                    [styles.md]: size === 'md',
+                    [styles.sm]: size === 'sm',
+                    [styles.xl]: size === 'xl',
+                    [styles.xs]: size === 'xs',
+                }),
+                remove: styles.remove,
+                root: styles.root,
+                ...classNames,
+            }}
+            component={Link}
+            radius={radius}
+            ref={ref}
+            size={size}
+            {...rest}
+        >
+            {children}
+        </MantinePill>
+    );
+});