fix: 🐛 apply dynamic drop shadow on logos (#3)

jimmy-guzman · Apr 4, 2023 · 2589560 · 2589560
1 parent 06ad0a7
commit 2589560
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 45 deletions.
diff --git 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
@@ -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
@@ -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>