From ed69848489d7c96150fa76b5e20f1aa6a41d9cb8 Mon Sep 17 00:00:00 2001
From: Zeke Abshire <zekeabshire@gmail.com>
Date: Fri, 9 Jun 2023 14:09:49 -0500
Subject: [PATCH] Started different page modes

---
 package-lock.json                    | 1081 ++++++++++++++++++++++++++
 package.json                         |    1 +
 src/components/ProfilePicture.tsx    |   30 +
 src/components/projects/Displays.tsx |  220 ++++++
 src/components/projects/Panels.tsx   |    0
 src/pages/projects/[projectId].tsx   |  137 +---
 src/pages/projects/new/index.tsx     |    2 +-
 src/utils/types/projects.ts          |    6 +
 8 files changed, 1381 insertions(+), 96 deletions(-)
 create mode 100644 src/components/ProfilePicture.tsx
 create mode 100644 src/components/projects/Displays.tsx
 create mode 100644 src/components/projects/Panels.tsx
 create mode 100644 src/utils/types/projects.ts

diff --git a/package-lock.json b/package-lock.json
index c7767a2..3c083e3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
         "@radix-ui/react-hover-card": "^1.0.5",
         "@radix-ui/react-scroll-area": "^1.0.3",
         "@radix-ui/react-tabs": "^1.0.3",
+        "@radix-ui/react-toolbar": "^1.0.4",
         "@radix-ui/react-tooltip": "^1.0.5",
         "@tanstack/react-query": "^4.20.0",
         "@trpc/client": "^10.9.0",
@@ -1139,6 +1140,87 @@
         "react-dom": "^16.8 || ^17.0 || ^18.0"
       }
     },
+    "node_modules/@radix-ui/react-separator": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.0.3.tgz",
+      "integrity": "sha512-itYmTy/kokS21aiV5+Z56MZB54KrhPgn6eHDKkFeOLR34HMN2s8PaN47qZZAGnvupcjxHaFZnW4pQEh0BvvVuw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-separator/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
+      "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-separator/node_modules/@radix-ui/react-primitive": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
+      "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-slot": "1.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-separator/node_modules/@radix-ui/react-slot": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
+      "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.1.tgz",
@@ -1171,6 +1253,644 @@
         "react-dom": "^16.8 || ^17.0 || ^18.0"
       }
     },
+    "node_modules/@radix-ui/react-toggle": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.0.3.tgz",
+      "integrity": "sha512-Pkqg3+Bc98ftZGsl60CLANXQBBQ4W3mTFS9EJvNxKMZ7magklKV69/id1mlAlOFDDfHvlCms0fx8fA4CMKDJHg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle-group": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle-group/-/react-toggle-group-1.0.4.tgz",
+      "integrity": "sha512-Uaj/M/cMyiyT9Bx6fOZO0SAG4Cls0GptBWiBmBxofmDbNVnYYoyRWj/2M/6VCi/7qcXFWnHhRUfdfZFvvkuu8A==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-roving-focus": "1.0.4",
+        "@radix-ui/react-toggle": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle-group/node_modules/@radix-ui/primitive": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz",
+      "integrity": "sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
+    "node_modules/@radix-ui/react-toggle-group/node_modules/@radix-ui/react-collection": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz",
+      "integrity": "sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle-group/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
+      "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle-group/node_modules/@radix-ui/react-context": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.1.tgz",
+      "integrity": "sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle-group/node_modules/@radix-ui/react-direction": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.0.1.tgz",
+      "integrity": "sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle-group/node_modules/@radix-ui/react-id": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz",
+      "integrity": "sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle-group/node_modules/@radix-ui/react-primitive": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
+      "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-slot": "1.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle-group/node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.4.tgz",
+      "integrity": "sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-collection": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle-group/node_modules/@radix-ui/react-slot": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
+      "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle-group/node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
+      "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle-group/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz",
+      "integrity": "sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle-group/node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz",
+      "integrity": "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle/node_modules/@radix-ui/primitive": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz",
+      "integrity": "sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
+    "node_modules/@radix-ui/react-toggle/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
+      "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle/node_modules/@radix-ui/react-primitive": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
+      "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-slot": "1.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle/node_modules/@radix-ui/react-slot": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
+      "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle/node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
+      "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz",
+      "integrity": "sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toolbar": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toolbar/-/react-toolbar-1.0.4.tgz",
+      "integrity": "sha512-tBgmM/O7a07xbaEkYJWYTXkIdU/1pW4/KZORR43toC/4XWyBCURK0ei9kMUdp+gTPPKBgYLxXmRSH1EVcIDp8Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-roving-focus": "1.0.4",
+        "@radix-ui/react-separator": "1.0.3",
+        "@radix-ui/react-toggle-group": "1.0.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toolbar/node_modules/@radix-ui/primitive": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz",
+      "integrity": "sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
+    "node_modules/@radix-ui/react-toolbar/node_modules/@radix-ui/react-collection": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz",
+      "integrity": "sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toolbar/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
+      "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toolbar/node_modules/@radix-ui/react-context": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.1.tgz",
+      "integrity": "sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toolbar/node_modules/@radix-ui/react-direction": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.0.1.tgz",
+      "integrity": "sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toolbar/node_modules/@radix-ui/react-id": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz",
+      "integrity": "sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toolbar/node_modules/@radix-ui/react-primitive": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
+      "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-slot": "1.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toolbar/node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.4.tgz",
+      "integrity": "sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-collection": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toolbar/node_modules/@radix-ui/react-slot": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
+      "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toolbar/node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
+      "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toolbar/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz",
+      "integrity": "sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toolbar/node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz",
+      "integrity": "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-tooltip": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.0.5.tgz",
@@ -9527,6 +10247,43 @@
         "@radix-ui/react-use-layout-effect": "1.0.0"
       }
     },
+    "@radix-ui/react-separator": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.0.3.tgz",
+      "integrity": "sha512-itYmTy/kokS21aiV5+Z56MZB54KrhPgn6eHDKkFeOLR34HMN2s8PaN47qZZAGnvupcjxHaFZnW4pQEh0BvvVuw==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "dependencies": {
+        "@radix-ui/react-compose-refs": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
+          "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        },
+        "@radix-ui/react-primitive": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
+          "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-slot": "1.0.2"
+          }
+        },
+        "@radix-ui/react-slot": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
+          "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-compose-refs": "1.0.1"
+          }
+        }
+      }
+    },
     "@radix-ui/react-slot": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.1.tgz",
@@ -9552,6 +10309,330 @@
         "@radix-ui/react-use-controllable-state": "1.0.0"
       }
     },
+    "@radix-ui/react-toggle": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.0.3.tgz",
+      "integrity": "sha512-Pkqg3+Bc98ftZGsl60CLANXQBBQ4W3mTFS9EJvNxKMZ7magklKV69/id1mlAlOFDDfHvlCms0fx8fA4CMKDJHg==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      },
+      "dependencies": {
+        "@radix-ui/primitive": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz",
+          "integrity": "sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==",
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        },
+        "@radix-ui/react-compose-refs": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
+          "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        },
+        "@radix-ui/react-primitive": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
+          "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-slot": "1.0.2"
+          }
+        },
+        "@radix-ui/react-slot": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
+          "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-compose-refs": "1.0.1"
+          }
+        },
+        "@radix-ui/react-use-callback-ref": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
+          "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==",
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        },
+        "@radix-ui/react-use-controllable-state": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz",
+          "integrity": "sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-use-callback-ref": "1.0.1"
+          }
+        }
+      }
+    },
+    "@radix-ui/react-toggle-group": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle-group/-/react-toggle-group-1.0.4.tgz",
+      "integrity": "sha512-Uaj/M/cMyiyT9Bx6fOZO0SAG4Cls0GptBWiBmBxofmDbNVnYYoyRWj/2M/6VCi/7qcXFWnHhRUfdfZFvvkuu8A==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-roving-focus": "1.0.4",
+        "@radix-ui/react-toggle": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      },
+      "dependencies": {
+        "@radix-ui/primitive": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz",
+          "integrity": "sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==",
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        },
+        "@radix-ui/react-collection": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz",
+          "integrity": "sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-compose-refs": "1.0.1",
+            "@radix-ui/react-context": "1.0.1",
+            "@radix-ui/react-primitive": "1.0.3",
+            "@radix-ui/react-slot": "1.0.2"
+          }
+        },
+        "@radix-ui/react-compose-refs": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
+          "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        },
+        "@radix-ui/react-context": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.1.tgz",
+          "integrity": "sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==",
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        },
+        "@radix-ui/react-direction": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.0.1.tgz",
+          "integrity": "sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA==",
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        },
+        "@radix-ui/react-id": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz",
+          "integrity": "sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-use-layout-effect": "1.0.1"
+          }
+        },
+        "@radix-ui/react-primitive": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
+          "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-slot": "1.0.2"
+          }
+        },
+        "@radix-ui/react-roving-focus": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.4.tgz",
+          "integrity": "sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/primitive": "1.0.1",
+            "@radix-ui/react-collection": "1.0.3",
+            "@radix-ui/react-compose-refs": "1.0.1",
+            "@radix-ui/react-context": "1.0.1",
+            "@radix-ui/react-direction": "1.0.1",
+            "@radix-ui/react-id": "1.0.1",
+            "@radix-ui/react-primitive": "1.0.3",
+            "@radix-ui/react-use-callback-ref": "1.0.1",
+            "@radix-ui/react-use-controllable-state": "1.0.1"
+          }
+        },
+        "@radix-ui/react-slot": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
+          "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-compose-refs": "1.0.1"
+          }
+        },
+        "@radix-ui/react-use-callback-ref": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
+          "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==",
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        },
+        "@radix-ui/react-use-controllable-state": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz",
+          "integrity": "sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-use-callback-ref": "1.0.1"
+          }
+        },
+        "@radix-ui/react-use-layout-effect": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz",
+          "integrity": "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==",
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        }
+      }
+    },
+    "@radix-ui/react-toolbar": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toolbar/-/react-toolbar-1.0.4.tgz",
+      "integrity": "sha512-tBgmM/O7a07xbaEkYJWYTXkIdU/1pW4/KZORR43toC/4XWyBCURK0ei9kMUdp+gTPPKBgYLxXmRSH1EVcIDp8Q==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-roving-focus": "1.0.4",
+        "@radix-ui/react-separator": "1.0.3",
+        "@radix-ui/react-toggle-group": "1.0.4"
+      },
+      "dependencies": {
+        "@radix-ui/primitive": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz",
+          "integrity": "sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==",
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        },
+        "@radix-ui/react-collection": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz",
+          "integrity": "sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-compose-refs": "1.0.1",
+            "@radix-ui/react-context": "1.0.1",
+            "@radix-ui/react-primitive": "1.0.3",
+            "@radix-ui/react-slot": "1.0.2"
+          }
+        },
+        "@radix-ui/react-compose-refs": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
+          "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        },
+        "@radix-ui/react-context": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.1.tgz",
+          "integrity": "sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==",
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        },
+        "@radix-ui/react-direction": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.0.1.tgz",
+          "integrity": "sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA==",
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        },
+        "@radix-ui/react-id": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz",
+          "integrity": "sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-use-layout-effect": "1.0.1"
+          }
+        },
+        "@radix-ui/react-primitive": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
+          "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-slot": "1.0.2"
+          }
+        },
+        "@radix-ui/react-roving-focus": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.4.tgz",
+          "integrity": "sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/primitive": "1.0.1",
+            "@radix-ui/react-collection": "1.0.3",
+            "@radix-ui/react-compose-refs": "1.0.1",
+            "@radix-ui/react-context": "1.0.1",
+            "@radix-ui/react-direction": "1.0.1",
+            "@radix-ui/react-id": "1.0.1",
+            "@radix-ui/react-primitive": "1.0.3",
+            "@radix-ui/react-use-callback-ref": "1.0.1",
+            "@radix-ui/react-use-controllable-state": "1.0.1"
+          }
+        },
+        "@radix-ui/react-slot": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
+          "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-compose-refs": "1.0.1"
+          }
+        },
+        "@radix-ui/react-use-callback-ref": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
+          "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==",
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        },
+        "@radix-ui/react-use-controllable-state": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz",
+          "integrity": "sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-use-callback-ref": "1.0.1"
+          }
+        },
+        "@radix-ui/react-use-layout-effect": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz",
+          "integrity": "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==",
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        }
+      }
+    },
     "@radix-ui/react-tooltip": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.0.5.tgz",
diff --git a/package.json b/package.json
index 7fa4dba..6dc767f 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "@radix-ui/react-hover-card": "^1.0.5",
     "@radix-ui/react-scroll-area": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.3",
+    "@radix-ui/react-toolbar": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.5",
     "@tanstack/react-query": "^4.20.0",
     "@trpc/client": "^10.9.0",
diff --git a/src/components/ProfilePicture.tsx b/src/components/ProfilePicture.tsx
new file mode 100644
index 0000000..732f964
--- /dev/null
+++ b/src/components/ProfilePicture.tsx
@@ -0,0 +1,30 @@
+import * as Avatar from "@radix-ui/react-avatar";
+
+interface ProfilePictureProps {
+  name: string | undefined | null;
+  username: string | undefined | null;
+  image: string | undefined | null;
+}
+
+export const ProfilePicture: React.FC<ProfilePictureProps> = ({
+  name,
+  image,
+}) => {
+  // TODO: on hover, show "Name @username" tool tip
+  // TODO: on click, navigate to profile
+  return (
+    <Avatar.Root className="flex min-w-max select-none items-center justify-center overflow-hidden rounded-full bg-quaternary p-2 align-middle shadow-solid-medium">
+      <Avatar.Image
+        className="h-10 w-10 rounded-[inherit] object-cover"
+        src={image ?? undefined}
+        alt={name ?? "User avatar"}
+      />
+      <Avatar.Fallback
+        className="leading-1 flex h-10 w-10 items-center justify-center rounded-[inherit] bg-tertiary font-medium"
+        delayMs={600}
+      >
+        {name?.charAt(0)}
+      </Avatar.Fallback>
+    </Avatar.Root>
+  );
+};
diff --git a/src/components/projects/Displays.tsx b/src/components/projects/Displays.tsx
new file mode 100644
index 0000000..4df83aa
--- /dev/null
+++ b/src/components/projects/Displays.tsx
@@ -0,0 +1,220 @@
+import type { User, Project, ProjectPreview } from "@prisma/client";
+import type { MDXRemoteSerializeResult } from "next-mdx-remote";
+import { PropsWithChildren } from "react";
+import * as Toolbar from "@radix-ui/react-toolbar";
+import Image from "next/image";
+import { MDX } from "@components/MDX";
+import { FiEdit3, FiSettings, FiEye } from "react-icons/fi";
+import { ProjectPageMode } from "@utils/types/projects";
+import { useRouter } from "next/router";
+import { toast } from "react-hot-toast";
+
+// TODO: all icon buttons should have tooltips
+
+/* === Toolbar ===
+ * Visitor: join, leave a comment/review (later)
+ * Member: edit, settings
+ * Editor: save, cancel
+ * Preview: exit
+ */
+
+type FetchedProjectAsProps = {
+  project:
+    | (Project & {
+        author: User;
+        members: User[];
+        previews: ProjectPreview[];
+      })
+    | null
+    | undefined;
+};
+
+interface DisplayProps extends FetchedProjectAsProps, PropsWithChildren {
+  description: MDXRemoteSerializeResult<
+    Record<string, unknown>,
+    Record<string, unknown>
+  >;
+}
+
+type CanSetMode = {
+  setMode: React.Dispatch<React.SetStateAction<ProjectPageMode>>;
+};
+
+type GenericDisplayProps = DisplayProps & PropsWithChildren;
+type MemberDisplayProps = DisplayProps & CanSetMode;
+type EditorDisplayProps = DisplayProps & CanSetMode;
+type PreviewDisplayProps = DisplayProps & CanSetMode;
+
+const GenericDisplay: React.FC<GenericDisplayProps> = ({
+  project,
+  description,
+  children: toolbarItems,
+}) => {
+  return (
+    <div className="flex-1">
+      <div className="relative h-44 w-full shadow">
+        <Image
+          src={
+            project?.bannerImageUrl ??
+            `https://picsum.photos/seed/${project?.id ?? "A"}/800/200.webp`
+          }
+          alt="project banner"
+          className="object-cover"
+          fill
+        />
+      </div>
+      <Toolbar.Root
+        className="flex w-full flex-row items-center border-y-2 border-y-fg/10 bg-bg-600 px-5 py-3"
+        aria-label="Project options"
+      >
+        {toolbarItems}
+      </Toolbar.Root>
+      <article className="mx-5 my-3">
+        <h1 className="font-bold text-primary text-r-5xl">{project?.title}</h1>
+        <MDX {...description} />
+      </article>
+    </div>
+  );
+};
+
+export const VisitorDisplay: React.FC<DisplayProps> = (props) => {
+  const router = useRouter();
+
+  const handleGoBack = () => {
+    router.back();
+  };
+
+  const handleJoinRequest = () => {
+    toast.error("TODO: Implement 'request to join'");
+  };
+
+  return (
+    <GenericDisplay {...props}>
+      <span className="text-r-base">You are not a member of this project.</span>
+      <Toolbar.Separator className="mx-3 h-5 w-[2px] rounded-full bg-fg/30" />
+      <div className="flex-grow" />
+      <Toolbar.Button asChild>
+        <button
+          className="mr-5 text-fg/80 text-r-base hover:text-fg-600/80"
+          onClick={handleGoBack}
+        >
+          Go back
+        </button>
+      </Toolbar.Button>
+      <Toolbar.Button asChild>
+        <button
+          className="font-semibold text-fg text-r-base hover:text-fg-600"
+          onClick={handleJoinRequest}
+        >
+          Request to join
+        </button>
+      </Toolbar.Button>
+    </GenericDisplay>
+  );
+};
+
+export const PreviewDisplay: React.FC<PreviewDisplayProps> = ({
+  setMode,
+  ...rest
+}) => {
+  const handleExitPreview = () => {
+    setMode(ProjectPageMode.editor);
+  };
+
+  return (
+    <GenericDisplay {...rest}>
+      <span className="text-r-base">This is a preview.</span>
+      <div className="flex-grow" />
+      <Toolbar.Button asChild>
+        <button
+          className="font-semibold text-fg text-r-base hover:text-fg-600"
+          onClick={handleExitPreview}
+        >
+          Exit preview
+        </button>
+      </Toolbar.Button>
+    </GenericDisplay>
+  );
+};
+
+export const MemberDisplay: React.FC<MemberDisplayProps> = ({
+  setMode,
+  ...rest
+}) => {
+  const handleEditMode = () => {
+    setMode(ProjectPageMode.editor);
+  };
+
+  return (
+    <GenericDisplay {...rest}>
+      <span className="text-r-base">You are a member of this project.</span>
+      <Toolbar.Separator className="mx-3 h-5 w-[2px] rounded-full bg-fg/30" />
+      <span className="text-r-base">Last updated X minutes ago.</span>
+      <div className="flex-grow" />
+      <Toolbar.Button asChild>
+        <button
+          className="-my-2 mr-1 rounded-full p-2 hover:bg-bg-300/30"
+          onClick={handleEditMode}
+        >
+          <FiEdit3 className="font-bold text-r-2xl" />
+        </button>
+      </Toolbar.Button>
+      {/* TODO: Make dropdown menu popup */}
+      <Toolbar.Button asChild>
+        <button className="-my-2 -mr-2 rounded-full p-2 hover:bg-bg-300/30">
+          <FiSettings className="font-bold text-r-2xl" />
+        </button>
+      </Toolbar.Button>
+    </GenericDisplay>
+  );
+};
+
+export const EditorDisplay: React.FC<EditorDisplayProps> = ({
+  setMode,
+  ...rest
+}) => {
+  const handleCancel = () => {
+    setMode(ProjectPageMode.member);
+  };
+
+  const handleSave = () => {
+    toast.error("TODO: Need to save changes");
+    setMode(ProjectPageMode.member);
+  };
+
+  const handlePreview = () => {
+    setMode(ProjectPageMode.preview);
+  };
+
+  return (
+    <GenericDisplay {...rest}>
+      <span className="text-r-base">Editing</span>
+      <Toolbar.Separator className="mx-3 h-5 w-[2px] rounded-full bg-fg/30" />
+      <Toolbar.Button asChild>
+        <button
+          className="-my-2 mr-1 rounded-full p-2 hover:bg-bg-300/30"
+          onClick={handlePreview}
+        >
+          <FiEye className="font-bold text-r-2xl" />
+        </button>
+      </Toolbar.Button>
+      <div className="flex-grow" />
+      <Toolbar.Button asChild>
+        <button
+          className="mr-5 text-fg/80 text-r-base hover:text-fg-600/80"
+          onClick={handleCancel}
+        >
+          Cancel
+        </button>
+      </Toolbar.Button>
+      <Toolbar.Button asChild>
+        <button
+          className="font-semibold text-fg text-r-base hover:text-fg-600"
+          onClick={handleSave}
+        >
+          Save changes
+        </button>
+      </Toolbar.Button>
+    </GenericDisplay>
+  );
+};
diff --git a/src/components/projects/Panels.tsx b/src/components/projects/Panels.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/projects/[projectId].tsx b/src/pages/projects/[projectId].tsx
index dca5e72..a354f66 100644
--- a/src/pages/projects/[projectId].tsx
+++ b/src/pages/projects/[projectId].tsx
@@ -18,19 +18,16 @@ import superjson from "superjson";
 import { appRouter } from "@server/api/root";
 import { getServerAuthSession } from "@server/auth";
 import { createProxySSGHelpers } from "@trpc/react-query/ssg";
-import { MDX } from "@components/MDX";
-import Image from "next/image";
-import { FiEdit3 } from "react-icons/fi";
-import { MDXRemoteSerializeResult } from "next-mdx-remote";
-import React, { useState } from "react";
-import * as Avatar from "@radix-ui/react-avatar";
-
-enum PageMode {
-  visitor,
-  member,
-  editor,
-  preview,
-}
+import React, { useEffect, useMemo, useState } from "react";
+import { ProfilePicture } from "@components/ProfilePicture";
+import {
+  EditorDisplay,
+  MemberDisplay,
+  PreviewDisplay,
+  VisitorDisplay,
+} from "@components/projects/Displays";
+import { useSession } from "next-auth/react";
+import { ProjectPageMode } from "@utils/types/projects";
 
 type FetchedProjectAsProps = {
   project:
@@ -43,14 +40,25 @@ type FetchedProjectAsProps = {
     | undefined;
 };
 
+const componentsByMode = {
+  // dont show edit button
+  [ProjectPageMode.visitor]: VisitorDisplay,
+  // show edit button
+  [ProjectPageMode.member]: MemberDisplay,
+  // show cancel + save buttons + editable fields
+  [ProjectPageMode.editor]: EditorDisplay,
+  // show visitor and replace edit button with back/end preview button
+  [ProjectPageMode.preview]: PreviewDisplay,
+};
+
 const StateOrder: ProjectLifecycle[] = Object.values(ProjectLifecycle);
 
 const SpecificProject: NextPage<
   InferGetServerSidePropsType<typeof getServerSideProps>
 > = ({ projectId, description }) => {
-  const [mode, setMode] = useState(PageMode.visitor);
+  const [mode, setMode] = useState(ProjectPageMode.visitor);
 
-  const ctx = api.useContext();
+  const session = useSession();
 
   const { data, isRefetching } = api.projects.getProjectById.useQuery(
     {
@@ -61,6 +69,16 @@ const SpecificProject: NextPage<
       refetchOnWindowFocus: false,
     }
   );
+
+  useEffect(() => {
+    setMode(
+      session.status === "authenticated"
+        ? ProjectPageMode.member
+        : ProjectPageMode.visitor
+    );
+  }, [session.status]);
+
+  //   const ctx = api.useContext();
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
   //   const { mutate, isLoading: isUpdatingState } =
   //     api.projects.updateState.useMutation({
@@ -85,30 +103,16 @@ const SpecificProject: NextPage<
   //     }
   //   };
 
-  //   TODO: Make edit mode do something
-  const componentsByMode = {
-    [PageMode.visitor]: (
-      <DisplayProject project={data} description={description} />
-    ),
-    [PageMode.member]: (
-      <DisplayProject project={data} description={description} />
-    ),
-    [PageMode.editor]: (
-      <DisplayProject project={data} description={description} />
-    ),
-    [PageMode.preview]: (
-      <DisplayProject project={data} description={description} />
-    ),
-  };
+  const Display = useMemo(() => componentsByMode[mode], [mode]);
 
   return (
     <MainLayout>
       <div className="flex flex-row justify-between">
-        <DisplayProject project={data} description={description} />
+        <Display project={data} description={description} setMode={setMode} />
         {/* Right side panel */}
         <div className="sticky top-0 flex h-screen w-96 flex-row">
           <div className="w-1.5 border-x-2 border-x-fg/10" />
-          <aside className="flex w-full flex-col gap-y-4 overflow-x-hidden px-11 py-8">
+          <aside className="flex w-full flex-col gap-y-4 overflow-x-hidden px-5 py-8">
             <div>
               <h2 className="mb-2 font-bold text-primary text-r-4xl">
                 Contributors
@@ -117,10 +121,15 @@ const SpecificProject: NextPage<
                 {/* TODO: Handle overflow */}
                 <ProfilePicture
                   name={data?.author.name}
+                  username={data?.author.username}
                   image={data?.author.image}
                 />
                 {data?.members.map((member) => (
-                  <ProfilePicture name={member.name} image={member.image} />
+                  <ProfilePicture
+                    name={member.name}
+                    username={member.username}
+                    image={member.image}
+                  />
                 ))}
               </div>
             </div>
@@ -184,29 +193,6 @@ export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
   return { props: { projectId, description: mdxSource } };
 };
 
-interface ProfilePictureProps {
-  name: string | undefined | null;
-  image: string | undefined | null;
-}
-
-const ProfilePicture: React.FC<ProfilePictureProps> = ({ name, image }) => {
-  return (
-    <Avatar.Root className="flex min-w-max select-none items-center justify-center overflow-hidden rounded-full bg-quaternary p-2 align-middle shadow-solid-medium">
-      <Avatar.Image
-        className="h-10 w-10 rounded-[inherit] object-cover"
-        src={image ?? undefined}
-        alt={name ?? "User avatar"}
-      />
-      <Avatar.Fallback
-        className="leading-1 flex h-10 w-10 items-center justify-center rounded-[inherit] bg-tertiary font-medium"
-        delayMs={600}
-      >
-        {name?.charAt(0)}
-      </Avatar.Fallback>
-    </Avatar.Root>
-  );
-};
-
 interface ProjectProgressProps {
   progress: ProjectLifecycle | undefined | null;
 }
@@ -230,42 +216,3 @@ const ProjectProgress: React.FC<ProjectProgressProps> = ({ progress }) => {
     </div>
   );
 };
-
-interface DisplayProjectProps extends FetchedProjectAsProps {
-  description: MDXRemoteSerializeResult<
-    Record<string, unknown>,
-    Record<string, unknown>
-  >;
-}
-
-const DisplayProject: React.FC<DisplayProjectProps> = ({
-  project,
-  description,
-}) => {
-  return (
-    <div className="flex-1">
-      <div className="relative h-44 w-full shadow">
-        <Image
-          src={
-            project?.bannerImageUrl ??
-            `https://picsum.photos/seed/${project?.id ?? "A"}/800/200.webp`
-          }
-          alt="project banner"
-          className="object-cover"
-          fill
-        />
-      </div>
-      <article className="mx-5 mt-8">
-        <div className="flex flex-row items-start justify-between">
-          <h1 className="font-bold text-primary text-r-5xl">
-            {project?.title}
-          </h1>
-          <button className="-mr-3 mt-1 rounded-full p-3 hover:bg-bg-300/30">
-            <FiEdit3 className="font-bold text-r-4xl" />
-          </button>
-        </div>
-        <MDX {...description} />
-      </article>
-    </div>
-  );
-};
diff --git a/src/pages/projects/new/index.tsx b/src/pages/projects/new/index.tsx
index 9fe8653..08ecadb 100644
--- a/src/pages/projects/new/index.tsx
+++ b/src/pages/projects/new/index.tsx
@@ -88,7 +88,7 @@ const CreateNewProposal: NextPage = () => {
               error={formState.errors.description?.message}
               {...register("description")}
             />
-            {/* <ImageInput label="Image" /> */}
+            {/* <ImageInputp label="Image" /> */}
           </div>
           <div className="flex flex-row justify-end">
             <Button
diff --git a/src/utils/types/projects.ts b/src/utils/types/projects.ts
new file mode 100644
index 0000000..e30b223
--- /dev/null
+++ b/src/utils/types/projects.ts
@@ -0,0 +1,6 @@
+export enum ProjectPageMode {
+  visitor,
+  member,
+  editor,
+  preview,
+}