Fix unknown props hackily

UpliftGames · Nov 8, 2024 · 7d3887b · 7d3887b
1 parent 49493c3
commit 7d3887b
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 18 deletions.
diff --git a/wally-registry-frontend/src/app/page.tsx b/wally-registry-frontend/src/app/page.tsx
@@ -16,6 +16,17 @@ const Flex = styled.div`
   margin: 1.5rem 0;
 `
 
+const BannerInlineLink = styled.a`
+  border-bottom: 1px dotted var(--wally-white);
+
+  &:hover,
+  &:focus {
+    color: var(--wally-mauve);
+    border-bottom: 1px solid var(--wally-mauve);
+    cursor: help;
+  }
+`
+
 const PopularPackages = () => {
   const popularPackagesList = mockPopularPackages.map((popPackage, index) => (
     <PackageTag
@@ -47,7 +58,22 @@ export default function Home() {
       <ContentSection variation="red" placement="floating">
         <Heading>Wally, a package manager for Roblox</Heading>
         <ResponsiveParagraph>
-          Wally is a package manager for Roblox inspired by Cargo (Rust) and npm
+          Wally is a package manager for Roblox inspired by{" "}
+          <BannerInlineLink
+            href="https://doc.rust-lang.org/stable/cargo/"
+            target="_blank"
+            rel="noopener"
+          >
+            Cargo
+          </BannerInlineLink>{" "}
+          (Rust) and{" "}
+          <BannerInlineLink
+            href="https://www.npmjs.com/"
+            target="_blank"
+            rel="noopener"
+          >
+            npm
+          </BannerInlineLink>{" "}
           (JavaScript). It brings the familiar, community-oriented world of
           sharing code from other communities into the Roblox ecosystem.
         </ResponsiveParagraph>

diff --git a/wally-registry-frontend/src/components/CopyCode.tsx b/wally-registry-frontend/src/components/CopyCode.tsx
@@ -44,7 +44,7 @@ const CopyIcon = styled.div`
   color: white;
 `
 
-const CopyCodeButton = styled.button<{ recentlyCopied: boolean }>`
+const CopyCodeButton = styled.button<{ $recentlyCopied: boolean }>`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -59,7 +59,7 @@ const CopyCodeButton = styled.button<{ recentlyCopied: boolean }>`
   word-break: break-word;
   white-space: pre-line;
 
-  ${(props) => props.recentlyCopied && jumpAnimation}
+  ${(props) => props.$recentlyCopied && jumpAnimation}
 
   &:hover ${CopyIcon} {
     visibility: visible;
@@ -92,7 +92,7 @@ export default function CopyCody({
 
   return (
     <CopyCodeButton
-      recentlyCopied={recentlyCopied}
+      $recentlyCopied={recentlyCopied}
       onClick={() => copyToClipBoard(copyContent)}
     >
       <>

diff --git a/wally-registry-frontend/src/components/Header.tsx b/wally-registry-frontend/src/components/Header.tsx
@@ -2,7 +2,7 @@
 
 import Image from "next/image"
 import Link from "next/link"
-import { useRouter } from "next/navigation"
+import { usePathname, useRouter } from "next/navigation"
 import AsyncSelect from "react-select/async"
 import styled from "styled-components"
 import logo from "../../public/assets/wally-logo.svg"
@@ -188,18 +188,8 @@ const StyledNav = styled.nav`
   }
 `
 
-const activeClassName = "nav-active"
-
-const StyledNavLink = styled<any>(Link).attrs({
-  activeClassName,
-})`
-  && {
-    ${(props) => props.$styles}
-  }
-
-  &.${activeClassName} {
-    color: var(--wally-red);
-  }
+const StyledNavLink = styled<any>(Link)`
+  color: ${(props) => (props.$active ? "var(--wally-red)" : "inherit")};
 
   &:hover {
     color: var(--wally-red);
@@ -317,6 +307,9 @@ const filterWallyPackages = async (inputValue: string) => {
 
 export default function Header() {
   const router = useRouter()
+  const pathname = usePathname()
+
+  const currentParentPage = pathname.split("/")[1]
 
   const loadOptions = async (inputValue: string) =>
     new Promise<WallyOption[]>((resolve) => {
@@ -380,9 +373,9 @@ export default function Header() {
           <StyledNav>
             {links.map(([text, url]) => (
               <StyledNavLink
-                activeClassName={activeClassName}
                 href={url}
                 key={url}
+                $active={currentParentPage === text.toLowerCase()}
               >
                 {text}
               </StyledNavLink>