From 2589560572a7c856bd708538d69c80449f0f9bf3 Mon Sep 17 00:00:00 2001
From: Jimmy Guzman <30631540+jimmy-guzman@users.noreply.github.com>
Date: Mon, 3 Apr 2023 20:04:44 -0500
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20apply=20dynamic=20drop=20?=
 =?UTF-8?q?shadow=20on=20logos=20(#3)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx                  | 17 ++---------------
 src/components/Logo.spec.tsx | 24 ++----------------------
 src/components/Logo.tsx      | 19 +++++++++++--------
 3 files changed, 15 insertions(+), 45 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 25f9202..8f29cab 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -12,30 +12,17 @@ function App() {
   return (
     <div className='container prose mx-auto p-4 text-center'>
       <div className='mb-8 flex items-center justify-center gap-8'>
-        <Logo
-          name='Vite'
-          link='https://vitejs.dev'
-          imgSrc={viteLogo}
-          color='#646CFF'
-        />
-        <Logo
-          name='React'
-          link='https://react.dev'
-          imgSrc={reactLogo}
-          color='#61DAFB'
-          className='animate-[spin_20s_linear_infinite]'
-        />
+        <Logo name='Vite' link='https://vitejs.dev' imgSrc={viteLogo} />
+        <Logo name='React' link='https://react.dev' imgSrc={reactLogo} />
         <Logo
           name='TypeScript'
           link='https://www.typescriptlang.org'
           imgSrc={typeScriptLogo}
-          color='#3178C6'
         />
         <Logo
           name='tailwindcss'
           link='https://tailwindcss.com'
           imgSrc={tailwindcssLogo}
-          color='#06B6D4'
         />
       </div>
       <h1>Vite + React + TypeScript + tailwindcss</h1>
diff --git a/src/components/Logo.spec.tsx b/src/components/Logo.spec.tsx
index 0ae4e22..8eca574 100644
--- a/src/components/Logo.spec.tsx
+++ b/src/components/Logo.spec.tsx
@@ -5,32 +5,12 @@ import { Logo } from './Logo'
 
 describe('logo', () => {
   it('should render link and image', () => {
-    render(
-      <Logo
-        name='Vite'
-        link='https://vitejs.dev'
-        imgSrc={viteLogo}
-        color='#646CFF'
-      />
-    )
+    render(<Logo name='Vite' link='https://vitejs.dev' imgSrc={viteLogo} />)
 
     expect(screen.getByRole('link', { name: /vite logo/i })).toBeInTheDocument()
     expect(screen.getByRole('img', { name: /vite logo/i })).toBeInTheDocument()
-  })
-
-  it('should render image with custom class', () => {
-    render(
-      <Logo
-        name='Vite'
-        link='https://vitejs.dev'
-        imgSrc={viteLogo}
-        color='#646CFF'
-        className='animate-[spin_20s_linear_infinite]'
-      />
-    )
-
     expect(screen.getByRole('img', { name: /vite logo/i })).toHaveClass(
-      'h-24 transition duration-300 hover:drop-shadow-[0_0_2em_#646CFF] animate-[spin_20s_linear_infinite]'
+      'h-24 transition duration-300 hover:drop-shadow-[0_0_2em_#646CFF]'
     )
   })
 })
diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx
index 4e0a045..e7df79f 100644
--- a/src/components/Logo.tsx
+++ b/src/components/Logo.tsx
@@ -1,22 +1,25 @@
 import clsx from 'clsx'
 
 interface LogoProps {
-  className?: string
-  color: string
   imgSrc: string
   link: string
-  name: string
+  name: 'React' | 'tailwindcss' | 'TypeScript' | 'Vite'
 }
 
-export const Logo = ({ color, className, link, name, imgSrc }: LogoProps) => {
+const classNames = {
+  Vite: 'hover:drop-shadow-[0_0_2em_#646CFF]',
+  React:
+    'hover:drop-shadow-[0_0_2em_#61DAFB] animate-[spin_20s_linear_infinite]',
+  TypeScript: 'hover:drop-shadow-[0_0_2em_#3178C6]',
+  tailwindcss: 'hover:drop-shadow-[0_0_2em_#06B6D4]',
+}
+
+export const Logo = ({ link, imgSrc, name }: LogoProps) => {
   return (
     <a href={link} target='_blank' rel='noreferrer'>
       <img
         src={imgSrc}
-        className={clsx(
-          `h-24 transition duration-300 hover:drop-shadow-[0_0_2em_${color}]`,
-          className
-        )}
+        className={clsx('h-24 transition duration-300', classNames[name])}
         alt={`${name} logo`}
       />
     </a>