Created PlusIcon

wizelineacademy · Apr 10, 2024 · aaa6f4a · aaa6f4a
1 parent af8fc7a
commit aaa6f4a
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 42 deletions.
diff --git a/components/ProjectCard.tsx b/components/ProjectCard.tsx
@@ -4,6 +4,7 @@ import React from "react";
 import { usePathname } from "next/navigation";
 import UserProfileButton from "@/components/UserProfileButton";
 import ChevronRightIcon from "./icons/ChevronRightIcon";
+import PlusIcon from "./icons/PlusIcon";
 
 export default function ProjectCard() {
   const pathname = usePathname();
@@ -17,27 +18,7 @@ export default function ProjectCard() {
           <UserProfileButton size="xs" className="mx-[-6px]" />
           <UserProfileButton size="xs" className="mx-[-6px]" />
           <UserProfileButton size="xs" className="mx-[-6px]" />
-          <button
-            disabled
-            className={
-              "group mx-[-6px] rounded-full bg-white p-2 text-primary drop-shadow-lg"
-            }
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              strokeWidth={2.5}
-              stroke="currentColor"
-              className="h-4 w-4"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M12 4.5v15m7.5-7.5h-15"
-              />
-            </svg>
-          </button>
+          <PlusIcon size="h-4 w-4" color="primary" />
         </div>
       </div>
       <ChevronRightIcon path="/projects/1" currentPath={pathname} />

diff --git a/components/ProjectExtendedCard.tsx b/components/ProjectExtendedCard.tsx
@@ -4,6 +4,7 @@ import React from "react";
 import { usePathname } from "next/navigation";
 import UserProfileButton from "@/components/UserProfileButton";
 import ChevronRightIcon from "./icons/ChevronRightIcon";
+import PlusIcon from "./icons/PlusIcon";
 
 const ProjectExtendedCard = () => {
   const pathname = usePathname();
@@ -22,27 +23,7 @@ const ProjectExtendedCard = () => {
             <UserProfileButton size="xs" className="mx-[-6px]" />
             <UserProfileButton size="xs" className="mx-[-6px]" />
             <UserProfileButton size="xs" className="mx-[-6px]" />
-            <button
-              disabled
-              className={
-                "group mx-[-6px] rounded-full bg-white p-2 text-primary drop-shadow-lg"
-              }
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                strokeWidth={2.5}
-                stroke="currentColor"
-                className="h-4 w-4"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  d="M12 4.5v15m7.5-7.5h-15"
-                />
-              </svg>
-            </button>
+            <PlusIcon size="h-4 w-4" color="primary" />
           </div>
           <ChevronRightIcon path="/projects/1" currentPath={pathname} />
         </div>

diff --git a/components/icons/PlusIcon.tsx b/components/icons/PlusIcon.tsx
@@ -0,0 +1,33 @@
+interface PlusIconInterface {
+  color: string;
+  size: string;
+}
+
+const PlusIcon = ({ color, size }: PlusIconInterface) => {
+  return (
+    <button
+      disabled
+      className={
+        "group mx-[-6px] rounded-full bg-white p-2 text-primary drop-shadow-lg"
+      }
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        strokeWidth={2.5}
+        stroke="currentColor"
+        // className="h-4 w-4"
+        className={`${size} ${color}`}
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M12 4.5v15m7.5-7.5h-15"
+        />
+      </svg>
+    </button>
+  );
+};
+
+export default PlusIcon;