move icon to icon.tsx

calblueprint · Nov 19, 2024 · e41b103 · e41b103
1 parent dfcadd3
commit e41b103
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 40 deletions.
diff --git a/app/onboarding/page.tsx b/app/onboarding/page.tsx
@@ -2,7 +2,7 @@
 
 import React, { useState } from 'react';
 import { upsertProfile } from '@/api/supabase/queries/profiles';
-import BigButton from '@/components/BigButton';
+import { BigButton } from '@/components/Buttons';
 import LabeledCustomSelect from '@/components/EditableInput';
 import COLORS from '@/styles/colors';
 import { DropdownOption, Profile } from '@/types/schema';

diff --git a/components/BigButton/index.tsx → components/Buttons.tsx b/components/BigButton/index.tsx → components/Buttons.tsx
@@ -1,7 +1,8 @@
 import styled from 'styled-components';
+import COLORS from '@/styles/colors';
 
-const BigButton = styled.button<{ $color?: string }>`
-  background-color: ${props => props.color || 'blue'};
+export const BigButton = styled.button<{ $color?: string }>`
+  background-color: ${props => props.color || COLORS.shrub};
 
   color: white;
   padding: 0.625rem 1.25rem;
@@ -12,5 +13,3 @@ const BigButton = styled.button<{ $color?: string }>`
   height: 3rem;
   max-height: 3rem;
 `;
-
-export default BigButton;
diff --git a/components/CustomSelect/index.tsx b/components/CustomSelect/index.tsx
@@ -1,4 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
+import { DropdownOption } from '@/types/schema';
+import Icon from '../Icon';
 import {
   DropdownIcon,
   Option,
@@ -7,11 +9,6 @@ import {
   SelectedValue,
 } from './styles';
 
-interface DropdownOption<T> {
-  label: string;
-  value: T;
-}
-
 interface CustomSelectProps<T> {
   value: T;
   options: DropdownOption<T>[];
@@ -55,35 +52,7 @@ const CustomSelect = <T extends string | number | boolean>({
         {options.find(option => option.value === value)?.label || label}
       </SelectedValue>
       <DropdownIcon onClick={() => setIsOpen(!isOpen)}>
-        <svg
-          width="13"
-          height="13"
-          viewBox="0 0 13 13"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-          xmlnsXlink="http://www.w3.org/1999/xlink"
-        >
-          <rect width="13" height="13" fill="url(#pattern0_1025_14459)" />
-          <defs>
-            <pattern
-              id="pattern0_1025_14459"
-              patternContentUnits="objectBoundingBox"
-              width="1"
-              height="1"
-            >
-              <use
-                xlinkHref="#image0_1025_14459"
-                transform="scale(0.0111111)"
-              />
-            </pattern>
-            <image
-              id="image0_1025_14459"
-              width="90"
-              height="90"
-              xlinkHref="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAYAAAA4qEECAAAACXBIWXMAAAsTAAALEwEAmpwYAAACn0lEQVR4nO2cvYoUQRDHG02MRDMxEURQt2pPwVQwObeKO8VA9gVMRU62a9VAmEsEn8LPWBPTM/MVfIE7vVRBEb9AGW/hVr1dd3Znapzp/w8mHLbmR211dU/3hAAAAAAAAAAA4P9lxTpnJdJTjfxWjb6K0RsxfnQxLnHdsbWGXuQoRt/V+MdfV6RvYp3rdcfYeCTS+p6C/7gk0t26Y229ZIVsP8mQ7SgZsguisXt7EdGo2QWA7AaVkF+ZjdbPSXbeZ986TTP+XNrI4rIf1v0MqcjeDCmLk0jrRe+ZrwPhLyFFZEyYh2yJtBVSQ/YQVbVsifw4pIRMEVSV7NGq31JIBZlBTBWyxXgQUkEK/NXF6H6JM8gspILMM3iVIxuStXrZkKzF2rLCNbvoPSH1xSCdM7OTQUqUDNmOkiHbUTJkO0pOXrY4Sk5WttQgeXShT1ZIRiY3CkG5gORWIMhkSG4FgkyG5FYgyGRIbgWCTIbkViDIZEhuBchkByDZAUh2AJIdgGQHINmJ1Zvd4zKgNYn8Ci9SncjP3kmk55VuC4gJbTicRm9Il7AlwIEV6xzBvgsn1Hgbm1sc0MgvsIOoWS1f5hFv6gNiVvdzpDAgZnU/Q2NYvdM9rIPO+Xwyo8ZPxPg1JDuxPDx5VCNdnjSpwWSkZHoDPoVyMUlO7J4rU7aMlRJk8ogsC/t2PpBa3vED2W0BMfDtZl93uezsk50FKCwQjaNGD5I+WOPBhezYATF6l/wppqrpGV3FkTEH1PjZ1IV4lJHF0RsnDorRp3++9YDsxdAhX5tx2rxddp+dFGK0MVFupPd5N5K3fv1+f3/dsTYaNf7we4ngz/k6RT5A5t1I3fG1Bo18T40+ivHLvIxcWTtzqO6YAAAAAAAAAACEcvgJELWQyQ46Qq0AAAAASUVORK5CYII="
-            />
-          </defs>
-        </svg>
+        <Icon type="pencil" />
       </DropdownIcon>
       {isOpen && (
         <OptionsContainer>

diff --git a/lib/icons.tsx b/lib/icons.tsx
@@ -1,3 +1,32 @@
-export const IconSvgs = {};
+export const IconSvgs = {
+  pencil: (
+    <svg
+      width="13"
+      height="13"
+      viewBox="0 0 13 13"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+    >
+      <rect width="13" height="13" fill="url(#pattern0_1025_14459)" />
+      <defs>
+        <pattern
+          id="pattern0_1025_14459"
+          patternContentUnits="objectBoundingBox"
+          width="1"
+          height="1"
+        >
+          <use xlinkHref="#image0_1025_14459" transform="scale(0.0111111)" />
+        </pattern>
+        <image
+          id="image0_1025_14459"
+          width="90"
+          height="90"
+          xlinkHref="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAYAAAA4qEECAAAACXBIWXMAAAsTAAALEwEAmpwYAAACn0lEQVR4nO2cvYoUQRDHG02MRDMxEURQt2pPwVQwObeKO8VA9gVMRU62a9VAmEsEn8LPWBPTM/MVfIE7vVRBEb9AGW/hVr1dd3Znapzp/w8mHLbmR211dU/3hAAAAAAAAAAA4P9lxTpnJdJTjfxWjb6K0RsxfnQxLnHdsbWGXuQoRt/V+MdfV6RvYp3rdcfYeCTS+p6C/7gk0t26Y229ZIVsP8mQ7SgZsguisXt7EdGo2QWA7AaVkF+ZjdbPSXbeZ986TTP+XNrI4rIf1v0MqcjeDCmLk0jrRe+ZrwPhLyFFZEyYh2yJtBVSQ/YQVbVsifw4pIRMEVSV7NGq31JIBZlBTBWyxXgQUkEK/NXF6H6JM8gspILMM3iVIxuStXrZkKzF2rLCNbvoPSH1xSCdM7OTQUqUDNmOkiHbUTJkO0pOXrY4Sk5WttQgeXShT1ZIRiY3CkG5gORWIMhkSG4FgkyG5FYgyGRIbgWCTIbkViDIZEhuBchkByDZAUh2AJIdgGQHINmJ1Zvd4zKgNYn8Ci9SncjP3kmk55VuC4gJbTicRm9Il7AlwIEV6xzBvgsn1Hgbm1sc0MgvsIOoWS1f5hFv6gNiVvdzpDAgZnU/Q2NYvdM9rIPO+Xwyo8ZPxPg1JDuxPDx5VCNdnjSpwWSkZHoDPoVyMUlO7J4rU7aMlRJk8ogsC/t2PpBa3vED2W0BMfDtZl93uezsk50FKCwQjaNGD5I+WOPBhezYATF6l/wppqrpGV3FkTEH1PjZ1IV4lJHF0RsnDorRp3++9YDsxdAhX5tx2rxddp+dFGK0MVFupPd5N5K3fv1+f3/dsTYaNf7we4ngz/k6RT5A5t1I3fG1Bo18T40+ivHLvIxcWTtzqO6YAAAAAAAAAACEcvgJELWQyQ46Qq0AAAAASUVORK5CYII="
+        />
+      </defs>
+    </svg>
+  ),
+};
 
 export type IconType = keyof typeof IconSvgs;