11import { sendGAEvent } from "@next/third-parties/google"
22
3- import { ListItemButton } from "@mui/material"
3+ import { Box , ListItemButton , Typography } from "@mui/material"
44
55import ExternalLinkSvg from "@/assets/svgs/common/external-link.svg"
66import Link from "@/components/Link"
77
88const MenuItem = props => {
9- const { mode, children, label, href, reloadDocument, isActive, dark, sx } = props
9+ const { mode, children, label, href, reloadDocument, isActive, isNew , dark, sx } = props
1010 const isExternal = href ?. startsWith ( "http" )
1111
1212 const handleTrackEvent = ( ) => {
@@ -17,7 +17,7 @@ const MenuItem = props => {
1717 }
1818
1919 return (
20- < Link href = { href } target = { isExternal ? "_blank" : "_self" } reloadDocument = { reloadDocument } >
20+ < Link href = { href } external = { isExternal } reloadDocument = { reloadDocument } >
2121 < ListItemButton
2222 className = "group"
2323 sx = { {
@@ -39,6 +39,11 @@ const MenuItem = props => {
3939 onClick = { handleTrackEvent }
4040 >
4141 { children }
42+ { isNew && (
43+ < Box sx = { { backgroundColor : "#B5F5EC" , padding : "0 0.8rem" , height : "2rem" , lineHeight : "2rem" , borderRadius : "0.4rem" , ml : "-0.4rem" } } >
44+ < Typography sx = { { fontSize : "1.2rem" , lineHeight : "2rem" , fontWeight : 600 } } > NEW</ Typography >
45+ </ Box >
46+ ) }
4247 { mode === "desktop" && isExternal && (
4348 < span className = "invisible relative -translate-x-2 transition-transform group-hover:visible group-hover:translate-x-0" >
4449 < ExternalLinkSvg className = "w-[1rem] h-auto" > </ ExternalLinkSvg >
0 commit comments