mirror of
https://github.com/MetaFam/TheGame.git
synced 2026-04-24 03:00:09 -04:00
9e37df6207
* beginning ESM transition: Ceramic libraries, Next.js, & TypeScript configuration 🇭🇰 * updating Chakra, React, & Next image `import`s 👔 * upgrading `@types/react`, import extensions for Node, & b64 SVG to PNG ⛹🏿♀️ * fixing relative import names & upddating @types packages 📻 * removoing WYSIWYG editor, draft-js, & updating express ⛹🏿♀️ * updating OpenSea 🚲 * ¡@metafam/utils is building! 📰 * ¡Discord bot is building! 👘 * ¡backend is building! 🛩 * fixed everything but Ceramic DID update 🏍 * switching to DID:PKH 📦 * fixing "only one child allowed" error 🙇🏿♀️ * importing `React` as required by tsc's `isolatedModules` 🇲🇰 * disabling testing rather than taking the time to fix jest ⚜ * removing set `types` from `tsconfig` to fix compilation error 🥦 * printing tests disabled warning, hopefully 🙀 * setting file to be copied to the new resolver 👁️🗨️ * "paths-resolver" not "paths-resolve" 🦴 * switching back to relative paths rather than trying to fix `paths` ⏳ * `yarn backend:dev` not working, testing GitHub build 🎺 * removing design system build & fixing some images ✊🏿 * fixed "expected function got string" error & trying to address undefined HTMLElement 🐡 * fixing @emotion/react tree shaking by making external 🏏 * including eslint config in Dockerfile 🌾 * fixing more images 🎯 * updating DIDs & switching back to an updated DID:3 ❇ * switching to w3s.link gateway & fixing early termination of storage endpoint 🔭 * switching back to ipfs.io gateway b/c w3s.link serves SVGs as application/xml which are CORB blocked 🥾 * fixing node config name in eslint ignore & shortening some paths 🧰 * fixing ts-node not handling project references 🥁
69 lines
1.6 KiB
TypeScript
69 lines
1.6 KiB
TypeScript
import { Avatar, Box, Link, MenuItem, Text } from '@metafam/ds';
|
|
import { Values } from '@metafam/utils';
|
|
import React from 'react';
|
|
import { menuIcons } from 'utils/menuIcons';
|
|
|
|
type MenuItemProps = {
|
|
title: string;
|
|
url: string;
|
|
explainerText: string;
|
|
icon: Values<Record<string, string>>;
|
|
};
|
|
|
|
// Menu links (with icons and explanatory text) -- used in DesktopNavLinks below
|
|
export const DesktopMenuItem = ({
|
|
title,
|
|
url,
|
|
explainerText,
|
|
icon,
|
|
}: MenuItemProps) => (
|
|
<MenuItem
|
|
h="full"
|
|
p={0}
|
|
borderRadius="md"
|
|
overflow="hidden"
|
|
_active={{ bg: 'none' }}
|
|
_focus={{ bg: 'none' }}
|
|
_hover={{ bg: 'none' }}
|
|
>
|
|
<Link
|
|
display="flex"
|
|
role="group"
|
|
href={url}
|
|
w="full"
|
|
h="full"
|
|
p={4}
|
|
transition="0.5s ease-in"
|
|
alignItems="center"
|
|
_hover={{
|
|
backgroundColor: 'rgba(0,0,0,0.56)',
|
|
textDecoration: 'none',
|
|
transition: '0s',
|
|
}}
|
|
_focus={{ outline: 'none' }}
|
|
>
|
|
<Avatar
|
|
src={menuIcons[icon]}
|
|
w="3.75rem"
|
|
h="3.75rem"
|
|
p={3}
|
|
mr={5}
|
|
bg="linear-gradient(180deg, rgba(0, 0, 0, 0.36) 0%, rgba(0, 0, 0, 0.36) 100%);"
|
|
boxShadow="0 0 0 2px rgba(0, 0, 0, 0.08)"
|
|
_groupHover={{
|
|
boxShadow: '0 0 1px 1px rgba(255, 255, 255, 0.1)',
|
|
bg: 'linear-gradient(180deg, #170B23 0%, #350C58 100%);',
|
|
transition: '0s',
|
|
}}
|
|
transition="0.3s ease-in"
|
|
/>
|
|
<Box color="white">
|
|
<Text fontSize="xl" fontWeight="bold">
|
|
{title}
|
|
</Text>
|
|
<Text fontSize="sm">{explainerText}</Text>
|
|
</Box>
|
|
</Link>
|
|
</MenuItem>
|
|
);
|