add fonts for logo

xc2f · xc2f · commit ae1c6d5f0498 · 2026-01-08T17:06:57.000+08:00
diff --git a/src/Header/Component.client.tsx b/src/Header/Component.client.tsx
@@ -32,8 +32,8 @@ export const HeaderClient: React.FC<HeaderClientProps> = ({ data }) => {
   return (
     <header className="container relative z-20   " {...(theme ? { 'data-theme': theme } : {})}>
       <div className="py-8 flex justify-between">
-        <Link href="/">
-          <Logo loading="eager" priority="high" className="invert dark:invert-0" />
+        <Link className="flex items-center" href="/">
+          <Logo />
         </Link>
         <HeaderNav data={data} />
       </div>
diff --git a/src/app/(frontend)/fonts/Press-Start-2P-Regular.ttf b/src/app/(frontend)/fonts/Press-Start-2P-Regular.ttf
diff --git a/src/app/(frontend)/fonts/index.tsx b/src/app/(frontend)/fonts/index.tsx
@@ -0,0 +1,12 @@
+import localFont from 'next/font/local'
+
+export const logo = localFont({
+  src: [
+    {
+      path: './Press-Start-2P-Regular.ttf',
+      weight: '400',
+      style: 'normal',
+    },
+  ],
+  variable: '--font-logo',
+})
diff --git a/src/app/(frontend)/layout.tsx b/src/app/(frontend)/layout.tsx
@@ -15,12 +15,17 @@ import { draftMode } from 'next/headers'
 
 import './globals.css'
 import { getServerSideURL } from '@/utilities/getURL'
+import { logo } from './fonts'
 
 export default async function RootLayout({ children }: { children: React.ReactNode }) {
   const { isEnabled } = await draftMode()
 
   return (
-    <html className={cn(GeistSans.variable, GeistMono.variable)} lang="en" suppressHydrationWarning>
+    <html
+      className={cn(GeistSans.variable, GeistMono.variable, logo.variable)}
+      lang="en"
+      suppressHydrationWarning
+    >
       <head>
         <InitTheme />
         <link href="/favicon.ico" rel="icon" sizes="32x32" />
diff --git a/src/components/Logo/Logo.tsx b/src/components/Logo/Logo.tsx
@@ -1,5 +1,5 @@
-import clsx from 'clsx'
 import React from 'react'
+import clsx from 'clsx'
 
 interface Props {
   className?: string
@@ -8,22 +8,5 @@ interface Props {
 }
 
 export const Logo = (props: Props) => {
-  const { loading: loadingFromProps, priority: priorityFromProps, className } = props
-
-  const loading = loadingFromProps || 'lazy'
-  const priority = priorityFromProps || 'low'
-
-  return (
-    /* eslint-disable @next/next/no-img-element */
-    <img
-      alt="Payload Logo"
-      width={193}
-      height={34}
-      loading={loading}
-      fetchPriority={priority}
-      decoding="async"
-      className={clsx('max-w-[9.375rem] w-full h-[34px]', className)}
-      src="https://raw.githubusercontent.com/payloadcms/payload/main/packages/ui/src/assets/payload-logo-light.svg"
-    />
-  )
+  return <span className={clsx('text-2xl font-bold font-logo')}>XC@F</span>
 }
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
@@ -96,6 +96,7 @@ const config = {
       fontFamily: {
         mono: ['var(--font-geist-mono)'],
         sans: ['var(--font-geist-sans)'],
+        logo: ['var(--font-logo)'],
       },
       keyframes: {
         'accordion-down': {
