refactor: move close icon to the icon component

khmm12 · Jun 20, 2024 · a51b1f3 · a51b1f3
1 parent 77890be
commit a51b1f3
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 8 deletions.
diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx
@@ -1,6 +1,8 @@
 import type { JSX } from 'solid-js'
 
-type IconProps = JSX.CoreSVGAttributes<SVGSVGElement> & JSX.StylableSVGAttributes
+type ForbiddenProps = 'xmlns' | 'viewBox' | 'preserveAspectRatio'
+
+type IconProps = Omit<JSX.SvgSVGAttributes<SVGSVGElement>, ForbiddenProps>
 
 export function SettingsIcon(props: IconProps): JSX.Element {
   return (
@@ -12,3 +14,14 @@ export function SettingsIcon(props: IconProps): JSX.Element {
     </svg>
   )
 }
+
+export function CloseIcon(props: IconProps): JSX.Element {
+  return (
+    <svg aria-hidden xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" {...props}>
+      <path
+        fill="currentColor"
+        d="M14 1.41L12.59 0 7 5.59 1.41 0 0 1.41 5.59 7 0 12.59 1.41 14 7 8.41 12.59 14 14 12.59 8.41 7z"
+      />
+    </svg>
+  )
+}
diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
@@ -1,6 +1,7 @@
 import { createEffect, type JSX, Show, useContext } from 'solid-js'
 import { Portal } from 'solid-js/web'
 import { Transition } from 'solid-transition-group'
+import { CloseIcon } from '@/components/Icon'
 import { ShowWithTransitionContext } from '@/components/ShowWithTransition'
 import createUniqueIds from '@/hooks/createUniqueIds'
 import useDialogHooks from './hooks/useDialogHooks'
@@ -62,9 +63,7 @@ export default function Modal(props: ModalProps): JSX.Element {
                   </h1>
                 </div>
                 <button class={css.closeButton} type="button" title="Close" onClick={handleCloseButtonClick}>
-                  <svg aria-hidden xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
-                    <path d="M14 1.41L12.59 0 7 5.59 1.41 0 0 1.41 5.59 7 0 12.59 1.41 14 7 8.41 12.59 14 14 12.59 8.41 7z" />
-                  </svg>
+                  <CloseIcon />
                 </button>
               </div>
               <div class={css.body}>{props.children}</div>

diff --git a/src/components/Modal/styles.ts b/src/components/Modal/styles.ts
@@ -157,10 +157,6 @@ export const closeButton = css`
   & > svg {
     width: 1.6rem;
     height: 1.6rem;
-
-    & > path {
-      fill: currentColor;
-    }
   }
 `