feat: Update & test theme card

steezplusplus · Sep 18, 2023 · 47057aa · 47057aa
1 parent af49220
commit 47057aa
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 4 deletions.
diff --git a/app/_components/cards/theme-card/theme-card.test.tsx b/app/_components/cards/theme-card/theme-card.test.tsx
@@ -3,12 +3,15 @@ import { ThemeCard } from './theme-card';
 
 const props = {
   label: 'label',
+  icon: <div>icon</div>,
 };
 
 describe('<ThemeCard />', () => {
   it('Should render expected elements', () => {
     render(<ThemeCard {...props} />);
     const h2 = screen.getByRole('heading', { level: 2 });
+    const icon = screen.getByText('icon');
     expect(h2).toHaveTextContent(props.label);
+    expect(icon).toBeInTheDocument();
   });
 });
diff --git a/app/_components/cards/theme-card/theme-card.tsx b/app/_components/cards/theme-card/theme-card.tsx
@@ -2,10 +2,11 @@ import { ThemeSelect } from './theme-select/theme-select';
 
 type ThemeCardProps = {
   label: string;
+  icon: JSX.Element;
 };
 
 export function ThemeCard(props: ThemeCardProps) {
-  const { label } = props;
+  const { label, icon } = props;
   return (
     <div
       className="
@@ -14,8 +15,9 @@ export function ThemeCard(props: ThemeCardProps) {
         p-4 dark:bg-indigo-100/5
       "
     >
-      <h2 className="mb-1 text-lg">{label}</h2>
+      <h2 className="mb-1 self-end text-lg">{label}</h2>
       <ThemeSelect />
+      <div className="self-start text-sm italic">{icon}</div>
     </div>
   );
 }
diff --git a/app/_schema/schema.tsx b/app/_schema/schema.tsx
@@ -1,5 +1,4 @@
-import { GithubIcon, Twitter, Linkedin, Mail, Music, Coffee } from 'lucide-react';
-import Image from 'next/image';
+import { GithubIcon, Twitter, Linkedin, Mail, Music, Coffee, SunMoon } from 'lucide-react';
 
 export const githubSchema = {
   href: 'https://github.com/steezplusplus',
@@ -31,6 +30,7 @@ export const contactSchema = {
 
 export const themeSchema = {
   label: 'Theme',
+  icon: <SunMoon />,
 };
 
 export const musicSchema = {