diff --git a/.env.example b/.env.example deleted file mode 100644 index 5dd56d5..0000000 --- a/.env.example +++ /dev/null @@ -1,3 +0,0 @@ -VITE_WC_KEY_DEV= -VITE_WC_KEY_PROD= -VITE_ANALYTICS_ID= \ No newline at end of file diff --git a/package.json b/package.json index b130d5d..d8b0554 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "react-draggable": "^4.4.5", "react-ga4": "^2.1.0", "react-helmet-async": "^1.3.0", + "react-icons": "^5.0.1", "react-redux": "^8.0.5", "react-router-dom": "^6.11.2", "react-spring": "^9.7.0", diff --git a/src/components/CustomBottomBar/index.tsx b/src/components/CustomBottomBar/index.tsx new file mode 100644 index 0000000..9ce687f --- /dev/null +++ b/src/components/CustomBottomBar/index.tsx @@ -0,0 +1,104 @@ +import React, { useState } from 'react' +import styled from 'styled-components/macro' + +import Paper from '../TaskBar/MenuComponents/book.png' +import Tree from '../TaskBar/MenuComponents/discord.png' +import Setting from '../TaskBar/MenuComponents/settings.png' +import Shutdown from '../TaskBar/MenuComponents/shutdown.png' +import { StartMenuListItem } from '../TaskBar/MenuComponents/startMenuListItem' +import StartButton from '../TaskBar/StartButton' + +interface CustomBottomBarProps { + setSelected: (selected: string) => void + bottomBarVisible: boolean +} + +const ParentContainer = styled.div` + margin-top: 265px; +` + +const BottomBarMenuStyled = styled.div` + background-color: #adaac9; + width: 20%; + border-bottom: 2px solid #555; + border-right: 3px solid #090808; +` + +const CustomBottomBar: React.FC = ({ setSelected, bottomBarVisible }) => { + const [showSide, setShowSide] = useState(false) + const [showConnectWalletModal, setShowConnectWalletModal] = useState(false) + + const settingsSubMenu = ( +
+ { + setSelected(selected) + setShowConnectWalletModal(selected === 'C') // Show Connect Wallet modal when 'Connect Wallet' is selected + }} + onShowSide={(showSide) => setShowSide(showSide)} + icon={Setting} + name="Collections" + menu="submenu" + /> + {/* Add more sub-menu items as needed */} +
+ ) + + const menuItems = [ + { id: '1', menu: 'farm', icon: Tree, name: 'Discord' }, + { id: '2', menu: 'paper', icon: Paper, name: 'Docs' }, + { + id: '3', + menu: 'cp', + icon: Setting, + name: 'Applications', + haveSub: true, + subMenu: settingsSubMenu, + }, + + { id: '4', menu: 'shutdown', icon: Shutdown, name: 'Mints' }, + { id: '5', menu: 'startButton', component: , name: 'Start' }, + ] + + if (!bottomBarVisible) { + return null // Hide the component if bottomBarVisible is false + } + + return ( + + + {menuItems.map((item) => ( + + {item.component ? ( + item.component + ) : ( + { + setSelected(selected) + setShowConnectWalletModal(selected === 'C') + }} + onShowSide={(showSide) => setShowSide(showSide)} + icon={item.icon} + name={item.name} + menu={item.menu} + subMenu={item.subMenu} + /> + )} + + ))} + + + {/* Connect Wallet modal content */} + {showConnectWalletModal && ( +
+ {/* Add your Connect Wallet modal content here */} + Connect Wallet Modal +
+ )} + + ) +} + +export default CustomBottomBar diff --git a/src/components/TaskBar/MenuComponents/book.png b/src/components/TaskBar/MenuComponents/book.png new file mode 100644 index 0000000..e9054a3 Binary files /dev/null and b/src/components/TaskBar/MenuComponents/book.png differ diff --git a/src/components/TaskBar/MenuComponents/bottombar.tsx b/src/components/TaskBar/MenuComponents/bottombar.tsx new file mode 100644 index 0000000..b47f99b --- /dev/null +++ b/src/components/TaskBar/MenuComponents/bottombar.tsx @@ -0,0 +1,88 @@ +import { useState } from 'react' + +import Paper from './book.png' +import Setting from './settings.png' +import Shutdown from './shutdown.png' +import { StartMenuListItem } from './startMenuListItem' +import Tree from './three.png' + +interface Props { + setSelected: (selected: string) => void +} + +const BottomBar = (props: Props) => { + const [showSide, setShowSide] = useState(false) + + const list = [ + { + menu: 'farm', + icon: Tree, + name: 'Farm', + }, + { + menu: 'paper', + icon: Paper, + name: 'Paper', + }, + { + menu: 'heartbreak', + icon: '/assets/start-icon.png', + name: 'MEMECOIN', + }, + { + menu: 'cp', + icon: Setting, + name: 'Settings', + haveSub: true, + }, + { + menu: 'shutdown', + icon: Shutdown, + name: 'Shut Down', + }, + ] + + return ( +
+
+ {list.map((item, index) => ( + props.setSelected(selected)} + onShowSide={(showSide) => setShowSide(showSide)} + icon={item.icon} + name={item.name} + menu={item.menu} + /> + ))} +
+ + {showSide ? ( +
+
{ + props.setSelected('cp') + }} + className={`flex flex-row justify-between font-windows hover:text-white hover:bg-[#0A0080] cursor-pointer bg-gray-400 w-[187px] h-[39px] absolute bottom-[40px] right-0 border-r-2 border border-b-2 border-b-black border-r-black border-t-white border-l-white + }`} + > +
+
+ icon +
+
+ + Control Panel + +
+
+
+
+
+ ) : null} +
+ ) +} + +export default BottomBar diff --git a/src/components/TaskBar/MenuComponents/discord.png b/src/components/TaskBar/MenuComponents/discord.png new file mode 100644 index 0000000..440dd9a Binary files /dev/null and b/src/components/TaskBar/MenuComponents/discord.png differ diff --git a/src/components/TaskBar/MenuComponents/settings.png b/src/components/TaskBar/MenuComponents/settings.png new file mode 100644 index 0000000..3621974 Binary files /dev/null and b/src/components/TaskBar/MenuComponents/settings.png differ diff --git a/src/components/TaskBar/MenuComponents/shutdown.png b/src/components/TaskBar/MenuComponents/shutdown.png new file mode 100644 index 0000000..126a61a Binary files /dev/null and b/src/components/TaskBar/MenuComponents/shutdown.png differ diff --git a/src/components/TaskBar/MenuComponents/startMenuListItem.tsx b/src/components/TaskBar/MenuComponents/startMenuListItem.tsx new file mode 100644 index 0000000..1e1315e --- /dev/null +++ b/src/components/TaskBar/MenuComponents/startMenuListItem.tsx @@ -0,0 +1,119 @@ +import { useState } from 'react' +import { MdArrowRight } from 'react-icons/md' +import styled from 'styled-components/macro' + +// Define interface for props +interface IStartMenuListItemProps { + haveSub: boolean | undefined + onSelected: (selected: string) => void + onShowSide: (showSide: boolean) => void + icon: any + name: string + menu: string + subMenu?: React.ReactNode // Allow subMenu to be optional +} + +// Include the Google Font VT323 using createGlobalStyle + +// Define styled components +const StartMenuListItemContainer = styled.div` + position: relative; + display: flex; + align-items: center; + font-family: 'font-windows'; + cursor: pointer; + padding: 8px; + border-radius: 4px; + position: relative; /* Added position relative */ + + &:hover { + background-color: #39327a; + border: none; /* Add this line to remove the border on hover */ + color: white; + } +` + +const MenuItemText = styled.div` + font-size: 22px; + margin-left: 16px; /* Adjust margin as needed */ +` + +const IconContainer = styled.div` + display: flex; + justify-content: center; + align-items: center; + width: 39px; + height: 39px; + + img { + border: none; /* Remove the border */ + } + + &:hover { + img { + border: none; /* Remove the border on hover */ + } + } +` + +const ArrowContainer = styled.div` + margin-left: auto; /* Move to the right end */ + transform: scale(3); /* Adjust the scale as needed */ + margin-top: 6px; +` + +const SubMenuContainer = styled.div<{ show?: boolean }>` + position: absolute; + top: 0; + left: 100%; /* Position to the right of the menu item */ + display: ${(props) => (props.show ? 'block' : 'none')}; + background-color: #adaac9; + color: black; + /* Additional styling for the submenu */ +` + +// Export the functional component +export const StartMenuListItem = ({ + haveSub, + onSelected, + onShowSide, + icon, + name, + menu, + subMenu, +}: IStartMenuListItemProps) => { + const [showSubMenu, setShowSubMenu] = useState(false) + + return ( + <> + { + if (haveSub) { + setShowSubMenu(true) + onShowSide(true) + } + }} + onMouseLeave={() => { + if (haveSub) { + setShowSubMenu(false) + onShowSide(false) + } + }} + onClick={() => { + if (!haveSub) { + onSelected(menu) + } + }} + > + + icon + + + + + {haveSub && } + {subMenu} + + + ) +} diff --git a/src/components/TaskBar/MenuComponents/three.png b/src/components/TaskBar/MenuComponents/three.png new file mode 100644 index 0000000..7a5e1b7 Binary files /dev/null and b/src/components/TaskBar/MenuComponents/three.png differ diff --git a/src/components/TaskBar/StartButton.tsx b/src/components/TaskBar/StartButton.tsx index f02caac..499d42f 100644 --- a/src/components/TaskBar/StartButton.tsx +++ b/src/components/TaskBar/StartButton.tsx @@ -3,7 +3,7 @@ import { ConnectButton } from '@rainbow-me/rainbowkit' import { HighlightButton } from '../Button' export default function StartButton() { - // const { disconnect } = useDisconnect() + // const { disconnect } = useDisconnect(); return ( <> @@ -11,6 +11,7 @@ export default function StartButton() { {({ account, chain, openChainModal, openConnectModal, mounted }) => { const ready = mounted const connected = ready && account && chain + return (
{connected && !chain?.unsupported && <>} {(() => { + const buttonStyle = { + height: '400%', + paddingLeft: 6, + paddingRight: 10, + width: '100%', + // Set the width to 100% for a wider button + } + if (!connected) { return ( - - 🖤 Start + + Click to Connect Wallet ) } if (chain.unsupported) { return ( - + Wrong network ) @@ -52,11 +53,8 @@ export default function StartButton() { return (
- - 🖤 Start + + Click to Connect Wallet
) diff --git a/src/components/TaskBar/index.tsx b/src/components/TaskBar/index.tsx index 1f6c2a4..0f99db5 100644 --- a/src/components/TaskBar/index.tsx +++ b/src/components/TaskBar/index.tsx @@ -8,7 +8,6 @@ import { useWaves } from '@/store/experience/hooks' import { ButtonIcon, HighlightButton } from '../Button' import { VerticalSeparator } from '../Separator' -import StartButton from './StartButton' const NoScroll = styled.div` overflow: hidden; @@ -67,10 +66,12 @@ export default function TaskBar({ active, focus, onClick, + toggleBottomBar, // Add this prop }: { active: string[] focus: string | undefined onClick: (id: string) => void + toggleBottomBar: () => void // Add this prop type }) { const [waves, toggleWaves] = useWaves() const { block } = useAccount() @@ -78,9 +79,16 @@ export default function TaskBar({ return ( + + 🖤 Start + - + {active.map((id) => { const page = Pages[id]! @@ -106,6 +114,7 @@ export default function TaskBar({ })} + diff --git a/src/pages/OperatingSystem/index.tsx b/src/pages/OperatingSystem/index.tsx index 73cf988..f98e0aa 100644 --- a/src/pages/OperatingSystem/index.tsx +++ b/src/pages/OperatingSystem/index.tsx @@ -3,12 +3,14 @@ import MiyaLogo from 'assets/134321870.png' import Folder from 'assets/folder.png?preset=thumbnail&resize=true' import FolderOpen from 'assets/folder_open.png?preset=thumbnail&resize=true' import CreateNew from 'assets/miyamints1.png?preset=thumbnail&resize=true' -import { Fragment, useEffect, useMemo } from 'react' +import { debounce } from 'lodash' +import { Fragment, useEffect, useMemo, useState } from 'react' import { Helmet } from 'react-helmet-async' import { useLocation } from 'react-router-dom' import styled from 'styled-components/macro' import { useWindowSize } from 'usehooks-ts' +import CustomBottomBar from '@/components/CustomBottomBar' import DynamicWrapper from '@/components/DynamicWrapper' import OsLoader from '@/components/OsLoader' import TaskBar from '@/components/TaskBar' @@ -80,6 +82,7 @@ const UploaderPage = Pages.uploader const ManagePage = Pages.manager export default function OperatingSystem() { + const [bottomBarVisible, setBottomBarVisible] = useState(false) const location = useLocation() /* Responsiveness stuff */ const { width, height } = useWindowSize() @@ -109,6 +112,10 @@ export default function OperatingSystem() { ) } + const handleToggleBottomBar = debounce(() => { + setBottomBarVisible((prevVisible) => !prevVisible) + }, 300) // Adjust the debounce time as needed + useEffect(() => { const page = Object.values(Pages).find((p) => p.path === location.pathname) if (!page || !width) return @@ -215,9 +222,20 @@ export default function OperatingSystem() {
+ {bottomBarVisible && ( + console.log(`Selected: ${selectedItem}`)} + /> + )} - handleTaskbar(id)} /> + handleTaskbar(id)} + toggleBottomBar={handleToggleBottomBar} // Pass the toggle function to TaskBar + /> ) diff --git a/yarn.lock b/yarn.lock index 2dc9296..c70014f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10355,6 +10355,11 @@ react-helmet-async@^1.3.0: react-fast-compare "^3.2.0" shallowequal "^1.1.0" +react-icons@^5.0.1: + version "5.0.1" + resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-5.0.1.tgz#1694e11bfa2a2888cab47dcc30154ce90485feee" + integrity sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw== + react-is@^16.13.1, react-is@^16.7.0: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"