Add plus icons to add new character and tag buttons

bombies · Oct 26, 2023 · 214a77b · 214a77b
1 parent 9d8ed04
commit 214a77b
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 0 deletions.
diff --git a/src/app/(site)/(internal)/dashboard/components/dreams/forms/log/DreamCharacterSelect.tsx b/src/app/(site)/(internal)/dashboard/components/dreams/forms/log/DreamCharacterSelect.tsx
@@ -8,6 +8,7 @@ import {SelectItem} from "@nextui-org/react";
 import {DreamCharactersState} from "@/app/(site)/(internal)/dashboard/components/dreams/hooks/useDreamCharacters";
 import {UseFormRegister} from "react-hook-form";
 import AddCharacterModal from "@/app/(site)/(internal)/dashboard/components/dreams/forms/characters/AddCharacterModal";
+import PlusIcon from "@/app/(site)/components/icons/PlusIcon";
 
 type Props = {
     register?: UseFormRegister<any>,
@@ -29,6 +30,7 @@ const DreamCharacterSelect: FC<Props> = ({characters, register}) => {
                     color="cta"
                     size="sm"
                     onPress={() => setModalOpen(true)}
+                    startContent={<PlusIcon width={20} />}
                 >
                     Add New Character
                 </Button>

diff --git a/src/app/(site)/(internal)/dashboard/components/dreams/forms/log/DreamTagSelect.tsx b/src/app/(site)/(internal)/dashboard/components/dreams/forms/log/DreamTagSelect.tsx
@@ -8,6 +8,7 @@ import {SelectItem} from "@nextui-org/react";
 import {UseFormRegister} from "react-hook-form";
 import {DreamTagsState} from "@/app/(site)/(internal)/dashboard/components/dreams/hooks/useDreamTags";
 import AddTagModal from "@/app/(site)/(internal)/dashboard/components/dreams/forms/tags/AddTagModal";
+import PlusIcon from "@/app/(site)/components/icons/PlusIcon";
 
 type Props = {
     register?: UseFormRegister<any>,
@@ -29,6 +30,7 @@ const DreamTagSelect: FC<Props> = ({tags, register}) => {
                     color="cta"
                     size="sm"
                     onPress={() => setModalOpen(true)}
+                    startContent={<PlusIcon width={20} />}
                 >
                     Add New Tag
                 </Button>

diff --git a/src/app/(site)/components/icons/PlusIcon.tsx b/src/app/(site)/components/icons/PlusIcon.tsx
@@ -0,0 +1,22 @@
+import * as React from "react";
+import {IconProps} from "./icon-utils";
+import clsx from "clsx";
+
+const PlusIcon = ({className, fill, width, height}: IconProps) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className={clsx("self-center", className)}
+        width={width ?? 24}
+        height={height ?? width ?? 24}
+        fill="none"
+        viewBox="0 0 24 24"
+    >
+        <path
+            fill={clsx(fill ?? "currentColor")}
+            fillRule="evenodd"
+            d="M13 6a1 1 0 1 0-2 0v5H6a1 1 0 1 0 0 2h5v5a1 1 0 1 0 2 0v-5h5a1 1 0 1 0 0-2h-5V6Z"
+            clipRule="evenodd"
+        />
+    </svg>
+);
+export default PlusIcon;