add app logo component

xavimondev · Apr 9, 2024 · 1ce88a0 · 1ce88a0
1 parent 9b7ac87
commit 1ce88a0
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 13 deletions.
diff --git a/src/app/builder/page.tsx b/src/app/builder/page.tsx
@@ -1,5 +1,4 @@
-import Image from 'next/image'
-
+import { AppLogo } from '@/components/app-logo'
 import { BuilderSections } from '@/components/builder-sections'
 import { CopyCodeButton } from '@/components/copy-code-button'
 import { GenerationInfo } from '@/components/generation-info'
@@ -11,10 +10,7 @@ export default function Builder() {
       <Header>
         <div className='flex flex-col sm:flex-row pb-2 sm:items-center sm:justify-between gap-2 sm:gap-0 w-full'>
           <div className='hidden sm:flex items-center cursor-pointer text-white'>
-            <Image src='/extension_icon.png' alt='Application logo' width={30} height={30} />
-            <h1 className='text-lg ml-2 hover:text-violet-200 transition-colors duration-300'>
-              easyreadme
-            </h1>
+            <AppLogo />
           </div>
           <div className='flex gap-2 w-full sm:max-w-80'>
             <GenerationInfo />

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,6 +1,6 @@
-import Image from 'next/image'
 import Link from 'next/link'
 
+import { AppLogo } from '@/components/app-logo'
 import { Hero } from '@/components/hero'
 import { GitIc } from '@/components/icons'
 import { ListFeatures } from '@/components/list-features'
@@ -14,12 +14,7 @@ export default function Home() {
         <header className='sticky top-0 px-8 xl:px-20 py-2'>
           <div className='flex h-14 items-center justify-between'>
             <div className='flex items-center cursor-pointer text-white'>
-              <Link className='flex ' href='/'>
-                <Image src='/logo.png' alt='Application logo' width={30} height={30} />
-                <h1 className='text-base sm:text-xl ml-2 hover:text-violet-200 transition-colors duration-300'>
-                  easyreadme
-                </h1>
-              </Link>
+              <AppLogo />
             </div>
             <div className='flex gap-2 items-center'>
               <Link

diff --git a/src/components/app-logo.tsx b/src/components/app-logo.tsx
@@ -0,0 +1,13 @@
+import Image from 'next/image'
+import Link from 'next/link'
+
+export function AppLogo() {
+  return (
+    <Link className='flex ' href='/'>
+      <Image src='/logo.png' alt='Application logo' width={30} height={30} />
+      <span className='text-base sm:text-xl ml-2 hover:text-violet-200 transition-colors duration-300'>
+        easyreadme
+      </span>
+    </Link>
+  )
+}