added nodes

Author: rishabharoraa

.env

@@ -0,0 +1 @@
+API_URL = ""

components/CustomNodes/Grayscale/GrayscaleNode.module.scss

@@ -0,0 +1,15 @@
+@import "@styles/colors.scss";
+
+.container {
+  border-radius: 0.5rem;
+  background-color: $gray;
+  color: #fff;
+  padding: 1rem;
+
+  .handle {
+    background-color: $white;
+    height: 0.5rem;
+    width: 0.5rem;
+    border: 1px solid $gray;
+  }
+}

components/CustomNodes/Grayscale/GrayscaleNode.tsx

@@ -0,0 +1,22 @@
+import { Handle, Position } from "react-flow-renderer";
+import styles from "./GrayscaleNode.module.scss";
+
+const GrayscaleNode = () => {
+  return (
+    <div className={styles.container}>
+      <Handle
+        type="target"
+        position={Position.Left}
+        className={styles.handle}
+      />
+      <div>Grayscale</div>
+      <Handle
+        type="source"
+        position={Position.Right}
+        className={styles.handle}
+      />
+    </div>
+  );
+};
+
+export default GrayscaleNode;

components/CustomNodes/ImageInputNode/ImageInputNode.module.scss

@@ -0,0 +1,15 @@
+@import "@styles/colors.scss";
+
+.container {
+  border-radius: 0.5rem;
+  background-color: $green;
+  color: #fff;
+  padding: 1rem;
+
+  .handle {
+    background-color: $white;
+    height: 0.5rem;
+    width: 0.5rem;
+    border: 1px solid $green;
+  }
+}

components/CustomNodes/ImageInputNode/ImageInputNode.tsx

@@ -0,0 +1,17 @@
+import { Handle, Position } from "react-flow-renderer";
+import styles from "./ImageInputNode.module.scss";
+
+const ImageInputNode = () => {
+  return (
+    <div className={styles.container}>
+      Image
+      <Handle
+        type="source"
+        position={Position.Right}
+        className={styles.handle}
+      />
+    </div>
+  );
+};
+
+export default ImageInputNode;

components/Navbar/Navbar.module.scss

@@ -1,5 +1,4 @@
-@import "../../styles/colors.scss";
-@import "../../styles/fonts.scss";
+@import "@styles/colors.scss";
 
 .navbarContainer {
   display: flex;
@@ -26,6 +25,7 @@
     .navbarItem {
       padding: 2rem 1.5rem;
       transition: all 0.35s;
+      font-weight: 500;
       &:hover {
         color: $green;
         background-color: $white;

components/Navbar/Navbar.tsx

@@ -1,6 +1,7 @@
 import styles from "./Navbar.module.scss";
-import logoWhite from "../../public/images/logo-white.svg";
+import logoWhite from "@public/images/logo-white.svg";
 import Image from "next/image";
+import Link from "next/link";
 
 const Navbar = () => {
   return (
@@ -12,6 +13,11 @@ const Navbar = () => {
       </div>
       <div className={styles.navbarCenter}>imageflow</div>
       <div className={styles.navbarRight}>
+        <Link href="/editor">
+          <a>
+            <div className={styles.navbarItem}>Try it out</div>
+          </a>
+        </Link>
         <div className={styles.navbarItem}>Sign In</div>
         <div className={styles.navbarItem}>Sign Up</div>
       </div>

hooks/data-access/useUser/useUser.ts

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import useAuthToken from "../useAuthToken/useAuthToken";
+import useAuthToken from "@hooks/useAuthToken/useAuthToken";
 
 const useUser = () => {
   const [isLoading, setIsloading] = useState(true);
@@ -8,7 +8,7 @@ const useUser = () => {
   const { authToken } = useAuthToken();
 
   const getUser = async () => {
-    const URL = `${process.env.BACKEND_URL}/user`;
+    const URL = `${process.env.API_URL}/user`;
     const body = {
       method: "GET",
       headers: {