refactor: replace lucide-react with Radix icons and add GitHub link

Replace lucide-react dependency with Radix UI's native icon system.
Increase theme toggle icon size from 18px to 22px for better visibility.
Add GitHub repository link with icon button in the navigation header.
This commit is contained in:
2025-10-23 10:06:54 -05:00
parent 83556e950b
commit ec9509e880
4 changed files with 22 additions and 17 deletions

View File

@@ -33,7 +33,6 @@
"clsx": "^2.1.1", "clsx": "^2.1.1",
"date-fns": "^4.1.0", "date-fns": "^4.1.0",
"date-fns-tz": "^3.2.0", "date-fns-tz": "^3.2.0",
"lucide-react": "^0.546.0",
"next": "^15.5.6", "next": "^15.5.6",
"next-themes": "^0.4.6", "next-themes": "^0.4.6",
"react": "19.2.0", "react": "19.2.0",

12
pnpm-lock.yaml generated
View File

@@ -38,9 +38,6 @@ importers:
date-fns-tz: date-fns-tz:
specifier: ^3.2.0 specifier: ^3.2.0
version: 3.2.0(date-fns@4.1.0) version: 3.2.0(date-fns@4.1.0)
lucide-react:
specifier: ^0.546.0
version: 0.546.0(react@19.2.0)
next: next:
specifier: ^15.5.6 specifier: ^15.5.6
version: 15.5.6(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(sass@1.93.2) version: 15.5.6(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(sass@1.93.2)
@@ -3175,11 +3172,6 @@ packages:
resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==} resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
hasBin: true hasBin: true
lucide-react@0.546.0:
resolution: {integrity: sha512-Z94u6fKT43lKeYHiVyvyR8fT7pwCzDu7RyMPpTvh054+xahSgj4HFQ+NmflvzdXsoAjYGdCguGaFKYuvq0ThCQ==}
peerDependencies:
react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
lz-string@1.5.0: lz-string@1.5.0:
resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==} resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
hasBin: true hasBin: true
@@ -7217,10 +7209,6 @@ snapshots:
dependencies: dependencies:
js-tokens: 4.0.0 js-tokens: 4.0.0
lucide-react@0.546.0(react@19.2.0):
dependencies:
react: 19.2.0
lz-string@1.5.0: {} lz-string@1.5.0: {}
magic-string@0.30.19: magic-string@0.30.19:

View File

@@ -31,9 +31,9 @@ export const ThemeToggle = () => {
title={`Switch to ${theme === "light" ? "dark" : "light"} mode`} title={`Switch to ${theme === "light" ? "dark" : "light"} mode`}
> >
{theme === "light" ? ( {theme === "light" ? (
<MoonIcon width="18" height="18" /> <MoonIcon width="22" height="22" />
) : ( ) : (
<SunIcon width="18" height="18" /> <SunIcon width="22" height="22" />
)} )}
</IconButton> </IconButton>
); );

View File

@@ -8,7 +8,8 @@ import LookupInput from "@/rdap/components/LookupInput";
import ErrorCard from "@/components/ErrorCard"; import ErrorCard from "@/components/ErrorCard";
import { ThemeToggle } from "@/components/ThemeToggle"; import { ThemeToggle } from "@/components/ThemeToggle";
import { Maybe } from "true-myth"; import { Maybe } from "true-myth";
import { Flex, Container, Section, Text, Link } from "@radix-ui/themes"; import { Flex, Container, Section, Text, Link, IconButton } from "@radix-ui/themes";
import { GitHubLogoIcon } from "@radix-ui/react-icons";
const Index: NextPage = () => { const Index: NextPage = () => {
const { error, setTarget, setTargetType, submit, currentType } = useLookup(); const { error, setTarget, setTargetType, submit, currentType } = useLookup();
@@ -56,7 +57,24 @@ const Index: NextPage = () => {
.xevion.dev .xevion.dev
</Link> </Link>
</Text> </Text>
<Flex gap="4" align="center">
<IconButton
asChild
size="3"
variant="ghost"
aria-label="View on GitHub"
title="View on GitHub"
>
<a
href="https://github.com/Xevion/rdap"
target="_blank"
rel="noopener noreferrer"
>
<GitHubLogoIcon width="22" height="22" />
</a>
</IconButton>
<ThemeToggle /> <ThemeToggle />
</Flex>
</nav> </nav>
</Flex> </Flex>
<Container size="3" px="5"> <Container size="3" px="5">