Refactor add to playlist modal (#1236)

* Refactor add to playlist modal * redesign base modal component, add ModalButton component * improve visibility of filled button focus --------- Co-authored-by: jeffvli <jeffvictorli@gmail.com>
2026-06-17 08:54:27 +02:00 · 2025-11-02 04:57:12 +00:00
parent 829c27a5e9
commit 1a176fd118
18 changed files with 667 additions and 225 deletions
@@ -0,0 +1,29 @@
+import { Pill as MantinePill, PillProps as MantinePillProps } from '@mantine/core';
+import clsx from 'clsx';
+
+import styles from './pill.module.css';
+
+export const Pill = ({ children, size = 'md', ...props }: MantinePillProps) => {
+    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,
+            }}
+            size="md"
+            {...props}
+        >
+            {children}
+        </MantinePill>
+    );
+};
+
+Pill.Group = MantinePill.Group;