vojtech.mares/backup-websites-2024-01
Archived
1
0
Fork 0
Code Activity

refactor(nav links): style and Next.js's <Link></Link> without a component wrapper

Browse source 
- delete NavLink component (wrapper)
This commit is contained in:
Vojtěch Mareš 2023-01-11 11:45:45 +01:00
parent b3ccf598c2
commit 0c59f08627
Signed by: vojtech.mares
GPG key ID: C6827B976F17240D
3 changed files with 14 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

1
components/Footer.tsx
View file

@ -2,7 +2,6 @@ import Link from "next/link";
import { Container } from "@/components/Container"; import { Container } from "@/components/Container";
// import { Logo } from '@/components/Logo' // import { Logo } from '@/components/Logo'
// import { NavLink } from '@/components/NavLink'
import { Button } from "@/components/Button"; import { Button } from "@/components/Button";
export function Footer() { export function Footer() {

20
components/Header.tsx
View file

@ -1,6 +1,5 @@
import Link from "next/link"; import Link from "next/link";
import { NavLink } from "@/components/NavLink";
import { Container } from "@/components/Container"; import { Container } from "@/components/Container";
import { Button } from "@/components/Button"; import { Button } from "@/components/Button";
@ -12,13 +11,22 @@ export function Header() {
<nav className="relative z-50 flex justify-between"> <nav className="relative z-50 flex justify-between">
<div className="flex items-center md:gap-x-12"> <div className="flex items-center md:gap-x-12">
<span className="text-2xl font-bold"> <span className="text-2xl font-bold">
<Link href="/">Vojtěch Mareš</Link> <Link href="/" className="py-2 px-4 rounded-full focus-visible:outline-black">Vojtěch Mareš</Link>
</span> </span>
<div className="hidden md:flex md:gap-x-6"> <div className="hidden md:flex md:gap-x-6">
{/* <NavLink href="#how-can-i-help">Jak vám můžu pomoci?</NavLink> */} <Link
<NavLink href="/skoleni">Školení</NavLink> href="/skoleni"
{/* <NavLink href="/pripadove-studie">Případové studie</NavLink> */} className="inline-block rounded-full py-2 px-4 text-lg font-medium text-slate-700 hover:bg-slate-100 hover:text-black focus-visible:outline-black"
<NavLink href="https://vojtechmares.blog/">Blog</NavLink> >
Školení
</Link>
{/* <Link href="/pripadove-studie" className="inline-block rounded-full py-2 px-4 text-lg font-medium text-slate-700 hover:bg-slate-100 hover:text-black focus-visible:outline-black">Případové studie</Link> */}
<Link
href="https://vojtechmares.blog/"
className="inline-block rounded-full py-2 px-4 text-lg font-medium text-slate-700 hover:bg-slate-100 hover:text-black focus-visible:outline-black"
>
Blog
</Link>
</div> </div>
</div> </div>
<div className="flex items-center gap-x-5 md:gap-x-8"> <div className="flex items-center gap-x-5 md:gap-x-8">

18
components/NavLink.tsx
View file

@ -1,18 +0,0 @@
import { ReactNode } from "react";
import Link from "next/link";
type Props = {
href: string;
children: ReactNode;
};
export function NavLink({ href, children }: Props) {
return (
<Link
href={href}
className="inline-block rounded-lg py-1 px-2 text-lg font-medium text-slate-700 hover:bg-slate-100 hover:text-black"
>
{children}
</Link>
);
}