refactor: replace inline svg logo with logo component (#214)

Author: satnaing

src/assets/logo.tsx

@@ -0,0 +1,24 @@
+import { type SVGProps } from 'react'
+import { cn } from '@/lib/utils'
+
+export function Logo({ className, ...props }: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      id='shadcn-admin-logo'
+      viewBox='0 0 24 24'
+      xmlns='http://www.w3.org/2000/svg'
+      height='24'
+      width='24'
+      fill='none'
+      stroke='currentColor'
+      strokeWidth='2'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      className={cn('size-6', className)}
+      {...props}
+    >
+      <title>Shadcn-Admin</title>
+      <path d='M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3' />
+    </svg>
+  )
+}

src/features/auth/auth-layout.tsx

@@ -1,3 +1,5 @@
+import { Logo } from '@/assets/logo'
+
 type AuthLayoutProps = {
   children: React.ReactNode
 }
@@ -7,18 +9,7 @@ export function AuthLayout({ children }: AuthLayoutProps) {
     <div className='container grid h-svh max-w-none items-center justify-center'>
       <div className='mx-auto flex w-full flex-col justify-center space-y-2 py-8 sm:w-[480px] sm:p-8'>
         <div className='mb-4 flex items-center justify-center'>
-          <svg
-            xmlns='http://www.w3.org/2000/svg'
-            viewBox='0 0 24 24'
-            fill='none'
-            stroke='currentColor'
-            strokeWidth='2'
-            strokeLinecap='round'
-            strokeLinejoin='round'
-            className='me-2 h-6 w-6'
-          >
-            <path d='M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3' />
-          </svg>
+          <Logo className='me-2' />
           <h1 className='text-xl font-medium'>Shadcn Admin</h1>
         </div>
         {children}

src/features/auth/sign-in/sign-in-2.tsx

@@ -1,3 +1,4 @@
+import { Logo } from '@/assets/logo'
 import { cn } from '@/lib/utils'
 import dashboardDark from './assets/dashboard-dark.png'
 import dashboardLight from './assets/dashboard-light.png'
@@ -9,18 +10,7 @@ export function SignIn2() {
       <div className='lg:p-8'>
         <div className='mx-auto flex w-full flex-col justify-center space-y-2 py-8 sm:w-[480px] sm:p-8'>
           <div className='mb-4 flex items-center justify-center'>
-            <svg
-              xmlns='http://www.w3.org/2000/svg'
-              viewBox='0 0 24 24'
-              fill='none'
-              stroke='currentColor'
-              strokeWidth='2'
-              strokeLinecap='round'
-              strokeLinejoin='round'
-              className='me-2 h-6 w-6'
-            >
-              <path d='M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3' />
-            </svg>
+            <Logo className='me-2' />
             <h1 className='text-xl font-medium'>Shadcn Admin</h1>
           </div>
         </div>

src/routes/clerk/(auth)/route.tsx

@@ -1,5 +1,6 @@
 import { createFileRoute, Link, Outlet } from '@tanstack/react-router'
 import { ClerkFullLogo } from '@/assets/clerk-full-logo'
+import { Logo } from '@/assets/logo'
 import { LearnMore } from '@/components/learn-more'
 
 export const Route = createFileRoute('/clerk/(auth)')({
@@ -15,18 +16,7 @@ function ClerkAuthLayout() {
           to='/'
           className='relative z-20 flex items-center text-lg font-medium'
         >
-          <svg
-            xmlns='http://www.w3.org/2000/svg'
-            viewBox='0 0 24 24'
-            fill='none'
-            stroke='currentColor'
-            strokeWidth='2'
-            strokeLinecap='round'
-            strokeLinejoin='round'
-            className='me-2 h-6 w-6'
-          >
-            <path d='M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3' />
-          </svg>
+          <Logo className='me-2' />
           Shadcn Admin
         </Link>