Merge pull request #91 from JohnsonMao/refactor/component-style

♻️ refactor component and style
JohnsonMao · Sep 26, 2023 · 8c96151 · 8c96151
2 parents d726b5e + 32e8193
commit 8c96151
Show file tree

Hide file tree

Showing 10 changed files with 24 additions and 37 deletions.
diff --git a/src/app/[lang]/page.tsx b/src/app/[lang]/page.tsx
@@ -31,7 +31,7 @@ async function RootPage({ params: { lang } }: RootParams) {
       <p className="my-12 text-center text-3xl dark:text-white">
         {metadata.title}
       </p>
-      <List render={Card} items={posts} />
+      <List Item={Card} items={posts} />
     </Container>
   );
 }

diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
@@ -35,7 +35,7 @@ function Card({
       <div>
         <h2 className="text-2xl font-bold dark:text-white/90">
           <Link
-            className="underline hover:text-black/70 dark:hover:text-white/70"
+            className="hover:text-black/70 dark:hover:text-white/70"
             href={`/posts/${id}`}
           >
             {title}

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -44,7 +44,7 @@ function Header({ logo, menu }: HeaderProps) {
         <Logo {...logo} />
       </Link>
       <nav>
-        <ul className="flex list-none rounded-full bg-gray-900/60 px-2 backdrop-blur-md">
+        <ul className="flex rounded-full bg-gray-900/60 px-2 backdrop-blur-md">
           {menu.map(({ text, href }) => (
             <li key={text}>
               <Link

diff --git a/src/components/Heading/Heading.tsx b/src/components/Heading/Heading.tsx
@@ -5,16 +5,12 @@ import Link from '../Link';
 type HTMLHeadingProps = HTMLAttributes<HTMLHeadingElement>;
 
 type HeadingProps = {
-  Component?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  as: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 } & HTMLHeadingProps;
 
-function Heading({
-  Component = 'h2',
-  id,
-  className,
-  children,
-  ...otherProps
-}: HeadingProps) {
+function Heading({ as, id, className, children, ...otherProps }: HeadingProps) {
+  const Component = as;
+
   return (
     <Component
       id={id}
@@ -32,23 +28,11 @@ function Heading({
   );
 }
 
-export const H1 = (props: HTMLHeadingProps) => (
-  <Heading Component="h1" {...props} />
-);
-export const H2 = (props: HTMLHeadingProps) => (
-  <Heading Component="h2" {...props} />
-);
-export const H3 = (props: HTMLHeadingProps) => (
-  <Heading Component="h3" {...props} />
-);
-export const H4 = (props: HTMLHeadingProps) => (
-  <Heading Component="h4" {...props} />
-);
-export const H5 = (props: HTMLHeadingProps) => (
-  <Heading Component="h5" {...props} />
-);
-export const H6 = (props: HTMLHeadingProps) => (
-  <Heading Component="h6" {...props} />
-);
+export const H1 = (props: HTMLHeadingProps) => <Heading as="h1" {...props} />;
+export const H2 = (props: HTMLHeadingProps) => <Heading as="h2" {...props} />;
+export const H3 = (props: HTMLHeadingProps) => <Heading as="h3" {...props} />;
+export const H4 = (props: HTMLHeadingProps) => <Heading as="h4" {...props} />;
+export const H5 = (props: HTMLHeadingProps) => <Heading as="h5" {...props} />;
+export const H6 = (props: HTMLHeadingProps) => <Heading as="h6" {...props} />;
 
 export default Heading;
diff --git a/src/components/Heading/heading.test.tsx b/src/components/Heading/heading.test.tsx
@@ -6,7 +6,7 @@ describe('Heading component', () => {
   it('should render correct element', () => {
     const name = 'The heading text';
 
-    render(<Heading>{name}</Heading>);
+    render(<Heading as="h2">{name}</Heading>);
 
     const heading = screen.getByRole('heading');
 

diff --git a/src/components/Link/Link.tsx b/src/components/Link/Link.tsx
@@ -9,7 +9,7 @@ import { HiExternalLink } from 'react-icons/hi';
 import cn from '@/utils/cn';
 import getLocale from '@/utils/getLocale';
 
-export type LinkProps<T extends string = string> = (
+type LinkProps<T extends string = string> = (
   | NextLinkProps<T>
   | LinkWithoutLocalePathProps
   | ExternalLinkProps

diff --git a/src/components/Link/index.tsx b/src/components/Link/index.tsx
@@ -1,5 +1,3 @@
 import Link from './Link';
 
-export * from './Link';
-
 export default Link;
diff --git a/src/components/List/List.tsx b/src/components/List/List.tsx
@@ -17,19 +17,21 @@ type ListProps<T extends Record<string, unknown>, P extends keyof T> = (
   | ListPropsWithDefaultKey<T>
   | ListPropsWithCustomKey<T, P>
 ) & {
-  render: (props: T) => ReactNode;
+  Item: (props: T) => ReactNode;
 };
 
 function List<T extends Record<string, unknown>, P extends string & keyof T>({
-  render,
+  Item,
   items,
   primaryKey = 'id' as P,
 }: ListProps<T, P>) {
   return (
     <section>
       <ul className="flex flex-col gap-4">
         {items.map((data) => (
-          <li key={data[primaryKey]}>{render(data)}</li>
+          <li key={data[primaryKey]}>
+            <Item {...data} />
+          </li>
         ))}
       </ul>
     </section>

diff --git a/src/components/List/list.test.tsx b/src/components/List/list.test.tsx
@@ -10,7 +10,7 @@ describe('List component', () => {
 
     const Component = (data: (typeof items)[number]) => <div>{data.text}</div>;
 
-    render(<List render={Component} items={items} />);
+    render(<List Item={Component} items={items} />);
 
     const list = screen.getByRole('list');
 

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -7,6 +7,9 @@ const tailwindcssConfig = {
       typography: {
         DEFAULT: {
           css: {
+            a: {
+              textDecoration: 'none'
+            },
             code: {
               margin: '0 4px',
               padding: '2px 4px',