Update structure: Home = Work, emove Work, add back arrow

adamplesnik · Nov 29, 2024 · 73ca02f · 73ca02f
1 parent 7811420
commit 73ca02f
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 42 deletions.
diff --git a/src/components/WorkPreviewTile.tsx b/src/components/WorkPreviewTile.tsx
@@ -1,14 +1,12 @@
 import { clsx } from 'clsx'
 import { HTMLAttributes } from 'react'
-import Heading from './Heading'
+import Paragraph from './Paragraph'
 
 const WorkPreviewTile = ({ children, title, className, link }: WorkPreviewTileProps) => {
   return (
     <a href={link} className={clsx('w-full', className)}>
       <div className="mb-4">{children}</div>
-      <Heading size={2} className="hover:underline">
-        {title} &rarr;
-      </Heading>
+      <Paragraph className="hover:underline">{title} &rarr;</Paragraph>
     </a>
   )
 }

diff --git a/src/content/thankful/index.tsx b/src/content/thankful/index.tsx
@@ -3,7 +3,7 @@ import MasonryWrapper from '@/partials/MasonryWrapper'
 import thankfulMain from './images/thank-main.jpg'
 import thankfulVideo from './images/thank.mp4'
 
-const Thankful = () => {
+const WorkThankful = () => {
   return (
     <WorkTile
       id="thankful"
@@ -22,4 +22,4 @@ const Thankful = () => {
   )
 }
 
-export default Thankful
+export default WorkThankful
diff --git a/src/main.tsx b/src/main.tsx
@@ -6,12 +6,10 @@ import WorkAndy from './content/andy/index.tsx'
 import CvPrint from './content/CvPrint.tsx'
 import WorkKolbord from './content/kolbord/index.tsx'
 import WorkMHD from './content/mhd/index.tsx'
-import Thankful from './content/thankful/index.tsx'
-import WorkPhoto from './content/WorkPhoto.tsx'
+import WorkThankful from './content/thankful/index.tsx'
 import './index.css'
 import About from './pages/About.tsx'
 import Home from './pages/Home.tsx'
-import Work from './pages/Work.tsx'
 import Layout from './partials/Layout.tsx'
 
 const router = createBrowserRouter([
@@ -23,11 +21,6 @@ const router = createBrowserRouter([
         element: <Home />,
         errorElement: <Home />,
       },
-      {
-        path: '/work',
-        element: <Work />,
-        errorElement: <Work />,
-      },
       {
         path: '/work/tickets',
         element: <WorkMHD />,
@@ -42,11 +35,7 @@ const router = createBrowserRouter([
       },
       {
         path: '/work/thankful',
-        element: <Thankful />,
-      },
-      {
-        path: '/work/photo',
-        element: <WorkPhoto />,
+        element: <WorkThankful />,
       },
       {
         path: '/about',

diff --git a/src/pages/Work.tsx b/src/pages/Work.tsx
diff --git a/src/partials/Layout.tsx b/src/partials/Layout.tsx
@@ -1,28 +1,39 @@
 import Heading from '@/components/Heading'
 import Footer from '@/content/Footer'
 import clsx from 'clsx'
-import { NavLink, Outlet, ScrollRestoration } from 'react-router-dom'
+import { NavLink, Outlet, ScrollRestoration, useLocation } from 'react-router-dom'
 
 const Layout = () => {
+  const location = useLocation()
+  const isWork = location.pathname.split('/')[1] === 'work'
+
   return (
     <div className="flex flex-col pt-8">
       <ScrollRestoration />
-      <div className="sticky top-0 z-50 mb-12 flex h-16 w-full items-baseline gap-8 bg-gradient-to-b from-white/80 px-6 pt-5 sm:px-8 md:px-12 dark:from-zinc-800/80">
+      <div className="sticky top-0 z-50 mb-12 flex w-full items-baseline gap-8 bg-gradient-to-b from-white/80 px-6 pt-5 sm:px-8 md:px-12 dark:from-zinc-800/80">
         <a href="/" className="cursor-pointer">
-          <Heading size={1}>Adam Plesník</Heading>
+          {isWork ? (
+            <span className="flex size-12 items-center p-2 text-2xl font-medium hover:underline">
+              &larr;
+            </span>
+          ) : (
+            <Heading size={1} className={clsx('transition-opacity', isWork && 'opacity-0')}>
+              Adam Plesník
+            </Heading>
+          )}
         </a>
         <div className="flex flex-1 justify-end gap-4">
           <NavLink
             className={({ isActive }) =>
-              clsx('cursor-pointer text-2xl font-medium hover:underline', isActive && '')
+              clsx('cursor-pointer text-2xl font-medium hover:underline', isActive && 'underline')
             }
-            to="/work"
+            to="/"
           >
             Work
           </NavLink>
           <NavLink
             className={({ isActive }) =>
-              clsx('hover: cursor-pointer text-2xl font-medium', isActive && 'underline')
+              clsx('cursor-pointer text-2xl font-medium hover:underline', isActive && 'underline')
             }
             to="/about"
           >