init

src/features/core/components/nav-link/index.ts

@@ -0,0 +1 @@
+export * from './nav-link';

src/features/core/components/nav-link/nav-link.tsx

@@ -0,0 +1,28 @@
+import { Flex, Box, Text } from "@mantine/core";
+import { Link, useRouterState } from "@tanstack/react-router";
+import styles from './styles.module.css';
+import { Icon } from "@phosphor-icons/react";
+import { useMemo } from "react";
+
+interface NavLinkProps {
+  href: string;
+  label: string;
+  Icon: Icon;
+}
+
+export const NavLink = ({ href, label, Icon }: NavLinkProps) => {
+  const router = useRouterState();
+  const isActive = useMemo(() => router.location.pathname === href || (router.location.pathname.includes(href) && href !== '/'), [router.location.pathname, href]);
+  
+  return (
+    <Box component={Link} to={href} 
+      className={styles.navLinkBox}
+      p={{ base: 0, sm: 8 }}
+    >
+      <Flex direction={{ base: 'column', md: 'row' }} align='center' gap={{ base: 0, md: 'xs' }}>
+        <Icon weight={isActive ? 'fill' : 'regular'} size={28} style={{ color: isActive ? 'var(--mantine-primary-color-filled)' : undefined }} />
+        <Text visibleFrom='md' ta='center' size='md' fw={isActive ? 800 : 500} c={isActive ? 'var(--mantine-primary-color-filled)' : undefined}>{label}</Text>
+      </Flex>
+    </Box>
+  )
+}

src/features/core/components/nav-link/styles.module.css

@@ -0,0 +1,6 @@
+.navLinkBox {
+    text-decoration: none;
+    border-radius: var(--mantine-radius-md);
+    color: unset;
+    width: fit-content;
+}