Skip to content

Commit

Permalink
🥀🧘🏻‍♂️ ↝ Circular icons & menu [ SGV2-3 ]
Browse files Browse the repository at this point in the history
  • Loading branch information
@Gizmotronn
Gizmotronn committed Mar 5, 2024
1 parent d6dc200 commit 8b84964
Show file tree
Hide file tree
Showing 5 changed files with 164 additions and 6 deletions.
7 changes: 5 additions & 2 deletions components/Content/Planets/Base/BasePlanetSector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import React, { useEffect, useState } from "react";
import RoverImageGallery, { RoverImage, RoverImageNoHandle } from "../PlanetData/RandomRoverImage";
import StructureComponent, { PlacedStructures } from "../Activities/StructureCreate";
import { SectorStructureOwned } from "../../Inventory/UserOwnedItems";
import { CreateMenuBar, SectorCircularMenu } from "../../../Core/BottomBar";
// import SectorStructures from "../Sectors/SectorStructures";

const AddResourceToInventory = ({ resource, sectorId }) => {
Expand Down Expand Up @@ -217,9 +218,10 @@ export default function BasePlanetSector({ sectorid }: { sectorid: string }) {
`}
</style>
<div className="h-[80vh] flex flex-col items-center justify-center relative">
<h1 className="text-center text-slate-300 text-opacity-100 font-['Inter'] tracking-[3.48px] mt-[-50px] mb-4 text-4xl font-extrabold leading-none tracking-tight text-gray-900 md:text-5xl lg:text-6xl dark:text-white text-gray-400">
<h1 className="mb-10 text-center text-slate-300 text-opacity-100 font-['Inter'] tracking-[3.48px] mt-[-50px] mb-4 text-4xl font-extrabold leading-none tracking-tight text-gray-900 md:text-5xl lg:text-6xl dark:text-white text-gray-400">
Planet {sectorData?.anomaly}, Sector {id}
</h1>
</h1><br /><br /><br />
<SectorCircularMenu />
<div className="w-full flex items-center justify-center mb-20 py-10">
<img
// src={coverUrl}
Expand Down Expand Up @@ -265,6 +267,7 @@ export default function BasePlanetSector({ sectorid }: { sectorid: string }) {
{created_at &&
new Date(created_at).toLocaleDateString("en-GB")}
</div>
{/* <CreateMenuBar onUpdatesClick={null} /> */}
</div>
</div>
</div>
Expand Down
64 changes: 62 additions & 2 deletions components/Core/BottomBar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,13 @@
import Link from "next/link";
import { useRouter } from "next/router";

import { BuildingIcon, CarIcon, RocketIcon, CpuIcon, MessageSquareDashedIcon } from "lucide-react";
import { CircleMenu, CircleMenuItem, TooltipPlacement} from 'react-circular-menu';
import { useState } from "react";

import { ClassificationFeedForIndividualPlanet } from "../Content/ClassificationFeed";
import ContentPlaceholder from "../Content/Planets/PlanetData/ContentPlaceholder";

const bottombarLinks = [
{
imgURL: "/home.svg",
Expand Down Expand Up @@ -215,7 +222,7 @@ export const CreateBar = ({ onTabClick }) => {
);
};

export const CreateMenuBar = ({ onUpdatesClick }) => {
export const CreateMenuBar = ({ onUpdatesClick, onSecondButtonClick }) => {
return (
<ul className="fixed bottom-5 left-1/2 transform -translate-x-1/2 flex justify-center space-x-4 bg-gray-200 rounded-full p-2 shadow-lg">
<li className="flex flex-col items-center justify-center">
Expand All @@ -228,7 +235,7 @@ export const CreateMenuBar = ({ onUpdatesClick }) => {
</a>
</li>
<li className="flex flex-col items-center justify-center">
<a className="flex flex-col items-center justify-center p-1">
<a onClick={onSecondButtonClick} className="flex flex-col items-center justify-center p-1">
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
Expand Down Expand Up @@ -257,3 +264,56 @@ export const CreateMenuBar = ({ onUpdatesClick }) => {
</ul>
);
};

export const SectorCircularMenu = (props) => {
const [activeComponent, setActiveComponent] = useState(null);

const handleItemClick = (itemName) => {
// Set the active component based on the clicked item
switch (itemName) {
case 'Email':
setActiveComponent('ClassificationFeedForIndividualPlanet');
break;
case 'Help':
setActiveComponent('ContentPlaceholder');
break;
case 'Location':
// Set active component for other items if needed
break;
case 'Info':
// Set active component for other items if needed
break;
default:
setActiveComponent(null);
}
};

return (<>
<CircleMenu
startAngle={-90}
rotationAngle={360}
itemSize={2}
radius={5}
rotationAngleInclusive={false}
>
<CircleMenuItem
onClick={() => alert("Clicked the item")}
tooltip="Email"
tooltipPlacement={TooltipPlacement.Right}
>
<BuildingIcon />
</CircleMenuItem>
<CircleMenuItem tooltip="Help">
<MessageSquareDashedIcon />
</CircleMenuItem>
<CircleMenuItem tooltip="Location">
<CarIcon />
</CircleMenuItem>
<CircleMenuItem tooltip="Info">
<RocketIcon />
</CircleMenuItem>
</CircleMenu>

{activeComponent === 'ContentPlaceholder' && <ContentPlaceholder />}</>
);;
};
2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,10 +55,12 @@
"package.json": "^2.0.1",
"postcss": "^8.4.21",
"react": "^18.2.0",
"react-circular-menu": "^2.4.9",
"react-dom": "18.2.0",
"react-hook-form": "^7.48.2",
"react-icons": "^5.0.1",
"react-spinners": "^0.13.8",
"styled-components": "^6.1.8",
"tailwind-merge": "^2.0.0",
"tailwindcss": "^3.2.4",
"tailwindcss-animate": "^1.0.7",
Expand Down
11 changes: 10 additions & 1 deletion pages/planets/[id].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import PostFormCardAnomalyTag from "../../components/Content/Classify/AnomalyPos
import Navbar from "../../components/Section/Navbar";
import { CreateBar, CreateMenuBar } from "../../components/Core/BottomBar";
import { useSupabaseClient } from "@supabase/auth-helpers-react";
import ContentPlaceholder from "../../components/Content/Planets/PlanetData/ContentPlaceholder";

export default function PlanetIdPage () {
const router = useRouter();
Expand All @@ -15,10 +16,15 @@ export default function PlanetIdPage () {
const supabase = useSupabaseClient();

const [showUpdates, setShowUpdates] = useState(false);
const [showSecondItem, setShowSecondItem] = useState(false);

const handleUpdatesClick = () => {
setShowUpdates(true);
};

const handleSecondButtonClick = () => {
setShowSecondItem(true);
}

const handleCloseUpdates = () => {
setShowUpdates(false);
Expand Down Expand Up @@ -49,7 +55,7 @@ export default function PlanetIdPage () {
<div className="h-screen py-4">
<IndividualBasePlanetDesktop id={id as string} />
</div>
<CreateMenuBar onUpdatesClick={handleUpdatesClick} />
<CreateMenuBar onUpdatesClick={handleUpdatesClick} onSecondButtonClick={handleSecondButtonClick} />
{showUpdates && (
<div className="fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center">
<div className="bg-white rounded-lg md:w-4/6 lg:w-3/6 xl:w-2/6 p-4">
Expand All @@ -71,6 +77,9 @@ export default function PlanetIdPage () {
</button></center>
</div>
</div>
)}
{showSecondItem && (
<div className="fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center"><ContentPlaceholder /></div>
)}
</>
);
Expand Down
86 changes: 85 additions & 1 deletion yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -325,6 +325,23 @@
resolved "https://registry.yarnpkg.com/@capacitor/ios/-/ios-5.7.1.tgz#1f21e912d8ba07db5e68fbf3418d87f575ef43ce"
integrity sha512-4BMdTzvVwGtOqJPqJO3q4UMdNmyAYTO0JU35nRhS6bFadUk9UG0nm7YeVs0mViygtPoxZjkRh/a3GBa+x/oAog==

"@emotion/is-prop-valid@1.2.1":
version "1.2.1"
resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz#23116cf1ed18bfeac910ec6436561ecb1a3885cc"
integrity sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==
dependencies:
"@emotion/memoize" "^0.8.1"

"@emotion/memoize@^0.8.1":
version "0.8.1"
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.1.tgz#c1ddb040429c6d21d38cc945fe75c818cfb68e17"
integrity sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==

"@emotion/unitless@0.8.0":
version "0.8.0"
resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.0.tgz#a4a36e9cbdc6903737cd20d38033241e1b8833db"
integrity sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==

"@eslint/eslintrc@^1.4.0":
version "1.4.1"
resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.4.1.tgz#af58772019a2d271b7e2d4c23ff4ddcba3ccfb3e"
Expand Down Expand Up @@ -1571,6 +1588,11 @@
resolved "https://registry.yarnpkg.com/@types/slice-ansi/-/slice-ansi-4.0.0.tgz#eb40dfbe3ac5c1de61f6bcb9ed471f54baa989d6"
integrity sha512-+OpjSaq85gvlZAYINyzKpLeiFkSC4EsC6IIiT6v6TLSU5k5U83fHGj9Lel8oKEXM0HqgrMVCjXPDPVICtxF7EQ==

"@types/stylis@4.2.0":
version "4.2.0"
resolved "https://registry.yarnpkg.com/@types/stylis/-/stylis-4.2.0.tgz#199a3f473f0c3a6f6e4e1b17cdbc967f274bdc6b"
integrity sha512-n4sx2bqL0mW1tvDf/loQ+aMX7GQD3lc3fkCMC55VFNDu/vBOabO+LTIeXKM14xK0ppk5TUGcWRjiSpIlUpghKw==

"@types/three@0.148.0":
version "0.148.0"
resolved "https://registry.yarnpkg.com/@types/three/-/three-0.148.0.tgz#bf7f0f6f12a9b318eebb7dc3813ae69824e13ae6"
Expand Down Expand Up @@ -2191,6 +2213,11 @@ camelcase@^6.0.0:
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==

camelize@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.1.tgz#89b7e16884056331a35d6b5ad064332c91daa6c3"
integrity sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==

caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.30001587, caniuse-lite@^1.0.30001591:
version "1.0.30001591"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001591.tgz#16745e50263edc9f395895a7cd468b9f3767cf33"
Expand Down Expand Up @@ -2497,6 +2524,11 @@ cross-spawn@^7.0.0, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
resolved "https://registry.yarnpkg.com/crypt/-/crypt-0.0.2.tgz#88d7ff7ec0dfb86f713dc87bbb42d044d3e6c41b"
integrity sha512-mCxBlsHFYh9C+HVpiEacem8FEBnMXgU9gy4zmNC+SXAZNB/1idgp/aulFJ4FgCi7GPEVbfyng092GqL2k2rmow==

css-color-keywords@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
integrity sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==

css-selector-tokenizer@^0.8:
version "0.8.0"
resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz#88267ef6238e64f2215ea2764b3e2cf498b845dd"
Expand All @@ -2505,11 +2537,25 @@ css-selector-tokenizer@^0.8:
cssesc "^3.0.0"
fastparse "^1.1.2"

css-to-react-native@3.2.0:
version "3.2.0"
resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.2.0.tgz#cdd8099f71024e149e4f6fe17a7d46ecd55f1e32"
integrity sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==
dependencies:
camelize "^1.0.0"
css-color-keywords "^1.0.0"
postcss-value-parser "^4.0.2"

cssesc@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==

csstype@3.1.2:
version "3.1.2"
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==

csstype@^3.0.2:
version "3.1.3"
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
Expand Down Expand Up @@ -5534,7 +5580,7 @@ postcss-selector-parser@^6.0.11:
cssesc "^3.0.0"
util-deprecate "^1.0.2"

postcss-value-parser@^4.0.0, postcss-value-parser@^4.2.0:
postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.2, postcss-value-parser@^4.2.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
Expand Down Expand Up @@ -5687,6 +5733,11 @@ rc@^1.0.1, rc@^1.1.6:
minimist "^1.2.0"
strip-json-comments "~2.0.1"

react-circular-menu@^2.4.9:
version "2.4.9"
resolved "https://registry.yarnpkg.com/react-circular-menu/-/react-circular-menu-2.4.9.tgz#928363a4160cc7d4be223be3f5ca1c7e10221e18"
integrity sha512-Fjd9WqD52JCuQpBlJG57G/MQDAyvSEkklFVF1juTSl3hEnovZCDyVmiqsa8Ul+QK2V0QmjsUr/v40kTTY6NlUw==

react-dom@18.2.0:
version "18.2.0"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
Expand Down Expand Up @@ -6110,6 +6161,11 @@ sha1@^1.1.1:
charenc ">= 0.0.1"
crypt ">= 0.0.1"

shallowequal@1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==

shebang-command@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
Expand Down Expand Up @@ -6272,6 +6328,7 @@ string-format@^2.0.0:
integrity sha512-bbEs3scLeYNXLecRRuk6uJxdXUSj6le/8rNPHChIJTn2V79aXVTR1EH2OH5zLKKoz0V02fOUKZZcw01pLUShZA==

"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0:
name string-width-cjs
version "4.2.3"
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
Expand Down Expand Up @@ -6372,6 +6429,7 @@ stringify-object@4.0.1:
is-regexp "^3.0.0"

"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
name strip-ansi-cjs
version "6.0.1"
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
Expand Down Expand Up @@ -6431,13 +6489,33 @@ strip-json-comments@3.1.1, strip-json-comments@^3.1.0, strip-json-comments@^3.1.
resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==

styled-components@^6.1.8:
version "6.1.8"
resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-6.1.8.tgz#c109d36aeea52d8f049e12de2f3be39a6fc86201"
integrity sha512-PQ6Dn+QxlWyEGCKDS71NGsXoVLKfE1c3vApkvDYS5KAK+V8fNWGhbSUEo9Gg2iaID2tjLXegEW3bZDUGpofRWw==
dependencies:
"@emotion/is-prop-valid" "1.2.1"
"@emotion/unitless" "0.8.0"
"@types/stylis" "4.2.0"
css-to-react-native "3.2.0"
csstype "3.1.2"
postcss "8.4.31"
shallowequal "1.1.0"
stylis "4.3.1"
tslib "2.5.0"

styled-jsx@5.1.1:
version "5.1.1"
resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.1.1.tgz#839a1c3aaacc4e735fed0781b8619ea5d0009d1f"
integrity sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==
dependencies:
client-only "0.0.1"

stylis@4.3.1:
version "4.3.1"
resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.3.1.tgz#ed8a9ebf9f76fe1e12d462f5cc3c4c980b23a7eb"
integrity sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ==

sucrase@^3.32.0:
version "3.35.0"
resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.35.0.tgz#57f17a3d7e19b36d8995f06679d121be914ae263"
Expand Down Expand Up @@ -6703,6 +6781,11 @@ tsconfig-paths@^4.2.0:
minimist "^1.2.6"
strip-bom "^3.0.0"

tslib@2.5.0:
version "2.5.0"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf"
integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==

tslib@^1.8.1:
version "1.14.1"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
Expand Down Expand Up @@ -7091,6 +7174,7 @@ workerpool@6.2.1:
integrity sha512-ILEIE97kDZvF9Wb9f6h5aXK4swSlKGUcOEGiIYb2OOu/IrDU9iwj0fD//SsA6E5ibwJxpEvhullJY4Sl4GcpAw==

"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
name wrap-ansi-cjs
version "7.0.0"
resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
Expand Down

0 comments on commit 8b84964

Please sign in to comment.