update page links and content

Author: yethranayeh

src/App.tsx

@@ -4,20 +4,13 @@ import "./assets/fonts/fontin/Fontin-Italic.ttf";
 import "./assets/fonts/fontin/Fontin-Regular.ttf";
 import "./assets/fonts/fontin/Fontin-SmallCaps.ttf";
 
-import { BrowserRouter, Route, Routes } from "react-router";
-
-import { MainLayout } from "./routes/layout/MainLayout";
-import { CalculationView as HomePage } from "./components/CalculationView";
+import { BrowserRouter } from "react-router";
+import { Routes } from "./routes/Routes";
 
 function App() {
 	return (
 		<BrowserRouter>
-			<Routes>
-				<Route element={<MainLayout />}>
-					<Route index element={<HomePage />} />
-					<Route path='*' element={<div>404</div>} />
-				</Route>
-			</Routes>
+			<Routes />
 		</BrowserRouter>
 	);
 }

src/routes/Routes.tsx

@@ -0,0 +1,47 @@
+import { Route, Routes as RouterRotues } from "react-router";
+
+import { MainLayout } from "./layout/MainLayout";
+import { CalculationView as HomePage } from "@/components/CalculationView";
+export function Routes() {
+	return (
+		<RouterRotues>
+			<Route element={<MainLayout />}>
+				<Route index element={<HomePage />} />
+				<Route
+					path='/graphs'
+					element={
+						<div>
+							<p>This page is not yet available.</p> <p>There will be graphs about rate trends.</p>
+						</div>
+					}
+				/>
+				<Route
+					path='/settings'
+					element={
+						<div>
+							<p>This page is not yet available.</p>{" "}
+							<p>You will be able to fine-tune your experience on Exalt Rates.</p>
+						</div>
+					}
+				/>
+				<Route
+					path='/faq'
+					element={
+						<div>
+							<p>This page is not yet available.</p>
+						</div>
+					}
+				/>
+				<Route
+					path='*'
+					element={
+						<div>
+							<h1>404</h1>
+							<p>Page not found</p>
+						</div>
+					}
+				/>
+			</Route>
+		</RouterRotues>
+	);
+}

src/routes/layout/Header/PinnedConversion.tsx

@@ -1,11 +1,11 @@
 import { PinOff } from "lucide-react";
 import clsx from "clsx";
 
-import { getCache } from "../../../utils/storage";
-import { convert } from "../../../utils/convert";
-import { useStorage } from "../../../hooks/useStorage";
+import { getCache } from "@/utils/storage";
+import { convert } from "@/utils/convert";
+import { useStorage } from "@/hooks/useStorage";
 
-import { CurrencyIcon } from "../../../components/CurrencyIcon";
+import { CurrencyIcon } from "@/components/CurrencyIcon";
 
 export function PinnedConversion() {
 	const {
@@ -21,7 +21,7 @@ export function PinnedConversion() {
 	const conversionRate = convert(pinned.primary, pinned.secondary, currencyMap).rate;
 
 	return (
-		<div className='flex select-none items-center text-primary-main text-sm self-center'>
+		<div className='flex gap-1 select-none items-center text-primary-main text-md self-center sm:text-lg'>
 			<div className='flex flex-row items-center'>
 				<span>1×</span>
 				<CurrencyIcon size={30} name={pinned.primary} />

src/routes/layout/links/Link.tsx

@@ -1,13 +1,14 @@
-import { cn } from "@/components/shadcn/lib/utils";
 import { Link as RouterLink } from "react-router";
 
+import { cn } from "@/components/shadcn/lib/utils";
+
 export const Link = ({ Icon, to, text, selected }: { Icon?: any; to: string; text: string; selected?: boolean }) => (
 	<RouterLink
 		to={to}
 		className={cn(
-			"inline-flex gap-1 font-[FontinBold]  transition-colors hover:text-primary-lighter hover:underline",
+			"inline-flex gap-2 font-[FontinBold] w-max transition-colors hover:text-primary-lighter hover:underline",
 			selected ? "underline" : undefined
 		)}>
-		{!Icon && <Icon />} {text}
+		{Icon && <Icon />} {text}
 	</RouterLink>
 );

src/routes/layout/links/PageLinks.tsx

@@ -1,11 +1,13 @@
-import { ChartColumnDecreasing, CircleHelp, House, Settings } from "lucide-react";
+import { Construction } from "lucide-react";
 import { Link } from "./Link";
 
 export const PageLinks = () => (
-	<div className='flex flex-col gap-1 text-lg'>
-		<Link to='/' text='Home' Icon={House} />
-		<Link to='/graphs' text='Graphs' Icon={ChartColumnDecreasing} />
-		<Link to='/settings' text='Settings' Icon={Settings} />
-		<Link to='/faq' text='F.A.Q.' Icon={CircleHelp} />
+	<div className='flex flex-col gap-4 text-2xl w-max'>
+		<Link to='/' text='Home' />
+		<div className='flex flex-col gap-1 text-primary-darker'>
+			<Link to='/graphs' text='Graphs' Icon={Construction} />
+			<Link to='/settings' text='Settings' Icon={Construction} />
+			<Link to='/faq' text='F.A.Q.' Icon={Construction} />
+		</div>
 	</div>
 );