GauthierWebDev/memento-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Update Logo component with LogoWithText variant

Browse Source
This commit is contained in:
Gauthier Daniels 2025-04-14 05:33:56 +02:00
parent cd9c63e0fd
commit 0e0c56cdcf
3 changed files with 16 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/components/syntax/Logo.tsx
View File

@ -33,7 +33,7 @@ function LogomarkPaths() {
); );
} }
export function Logo(props: React.ComponentPropsWithoutRef<"svg">) { export function LogoWithText(props: React.ComponentPropsWithoutRef<"svg">) {
return ( return (
<svg viewBox="0 0 231 38" {...props}> <svg viewBox="0 0 231 38" {...props}>
<LogomarkPaths /> <LogomarkPaths />
@ -51,3 +51,11 @@ export function Logo(props: React.ComponentPropsWithoutRef<"svg">) {
</svg> </svg>
); );
} }
export function Logo(props: React.ComponentPropsWithoutRef<"svg">) {
return (
<svg viewBox="0 0 58 38" {...props}>
<LogomarkPaths />
</svg>
);
}

4
app/components/syntax/MobileNavigation.tsx
View File

@ -55,9 +55,11 @@ export function MobileNavigation() {
> >
<MenuIcon className="h-6 w-6 stroke-slate-500" /> <MenuIcon className="h-6 w-6 stroke-slate-500" />
</button> </button>
<Suspense fallback={null}> <Suspense fallback={null}>
<CloseOnNavigation close={close} /> <CloseOnNavigation close={close} />
</Suspense> </Suspense>
<Dialog <Dialog
open={isOpen} open={isOpen}
onClose={() => close()} onClose={() => close()}
@ -71,7 +73,7 @@ export function MobileNavigation() {
</button> </button>
<Link href="/" className="ml-6" aria-label="Page d'accueil"> <Link href="/" className="ml-6" aria-label="Page d'accueil">
<Logo className="h-9 w-9" /> <Logo className="h-6 w-auto shrink-0" />
</Link> </Link>
</div> </div>
<Navigation className="mt-5 px-1" onLinkClick={onLinkClick} /> <Navigation className="mt-5 px-1" onLinkClick={onLinkClick} />

7
app/layouts/LayoutDefault.tsx
View File

@ -7,7 +7,7 @@ import { Link } from "@/components/common/Link";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { Search } from "@syntax/Search"; import { Search } from "@syntax/Search";
import { Hero } from "@syntax/Hero"; import { Hero } from "@syntax/Hero";
import { Logo } from "@syntax/Logo"; import { Logo, LogoWithText } from "@syntax/Logo";
import clsx from "clsx"; import clsx from "clsx";
import "./style.css"; import "./style.css";
@ -52,8 +52,9 @@ function Header() {
</div> </div>
<div className="relative flex grow basis-0 items-center"> <div className="relative flex grow basis-0 items-center">
<Link href="/" aria-label="Home page"> <Link href="/" aria-label="Home page" className="flex items-center gap-2">
<Logo className="h-9 w-auto lg:block" /> <Logo className="h-9 w-auto" />
<span className="hidden lg:inline text-2xl font-bold -tracking-tight">Memento Dev</span>
</Link> </Link>
</div> </div>