refactor: folder stracture (#52)

.github/workflows/lint-bun.yml

@@ -1,4 +1,4 @@
-name: Code Linting
+name: Code Linting with Bun
 
 on: push
 

src/api/index.ts

@@ -0,0 +1 @@
+export { getManufacturers } from './api'

src/app/loading.tsx

@@ -0,0 +1,6 @@
+import Loader from '@/components/loader'
+
+export default function Loading() {
+  // Or a custom loading skeleton component
+  return <Loader />
+}

app/page.tsx → src/app/page.tsx

@@ -1,7 +1,7 @@
 // import { useEffect, useState } from 'react';
 
 import Table from '@/components/table';
-import { getManufacturers } from './api';
+import { getManufacturers } from '@/api/index';
 
 import styles from '@/components/layout/grid.module.css';
 

src/components/loader/Loader.tsx

@@ -0,0 +1,10 @@
+import loader from './loader.module.css';
+
+const Loader = () => (
+  <>
+    <div className={loader['loading-icon_animated']} />
+    <h3>Loading...</h3>
+  </>
+);
+
+export default Loader;

src/components/loader/index.ts

@@ -0,0 +1 @@
+export { default } from './Loader';

app/Loading.css → src/components/loader/loader.module.css

@@ -16,6 +16,7 @@
     transform: rotate(220deg);
   }
 }
+
 .loading-icon_animated:after {
   animation: animate2 1.5s ease-in-out infinite;
   clip: rect(0, 80px, 80px, 40px);
@@ -25,6 +26,7 @@
   height: 80px;
   content: '';
 }
+
 @keyframes animate2 {
   0% {
     transform: rotate(-140deg);

app/components/Table/Table.tsx → src/components/table/Table.tsx

@@ -7,7 +7,7 @@ import { getFlagByCountryName } from '@/helpers/getEmojiFlagByISO';
 // import { toLamaCase } from './toLamaCase';
 
 import '@/helpers/helpers.css';
-import styles from './table.module.css';
+import table from './table.module.css';
 
 interface TableProps {
   manufacturers: Array<any> | null;
@@ -17,34 +17,34 @@ const Table = ({ manufacturers }: TableProps) => {
   const router = useRouter();
 
   return (
-    <table className={styles.table}>
+    <table className={table.default}>
       <thead>
         <tr>
-          <td className={[styles.heading, 'txt-right'].join(' ')}>ID</td>
-          <td className={[styles.heading, 'txt-right'].join(' ')}>
+          <td className={[table.heading, 'txt-right'].join(' ')}>ID</td>
+          <td className={[table.heading, 'txt-right'].join(' ')}>
             Common name
           </td>
-          <td className={styles.heading}>Country</td>
-          <td className={styles.heading} />
+          <td className={table.heading}>Country</td>
+          <td className={table.heading} />
         </tr>
       </thead>
       <tbody>
         {manufacturers?.map(
           ({ Mfr_ID: Id, Country, Mfr_CommonName: Name, Mfr_Name }) => (
-            <tr key={Id} className={styles.row}>
+            <tr key={Id} className={table.row}>
               <td
                 className={[
-                  styles.cell,
+                  table.cell,
                   'txt-right',
-                  styles['table-cell_secondary'],
+                  table['cell_secondary'],
                 ].join(' ')}
               >
                 {Id}
               </td>
-              <td className={[styles.cell, 'txt-left'].join(' ')}>
+              <td className={[table.cell, 'txt-left'].join(' ')}>
                 {Name ? Name : Mfr_Name}
               </td>
-              <td className={styles.cell}>
+              <td className={table.cell}>
                 {Country} {getFlagByCountryName(Country)}
               </td>
               <td>
@@ -54,7 +54,7 @@ const Table = ({ manufacturers }: TableProps) => {
                     router.push(`/manufacturers/${Id}`);
                   }}
                   href={`/manufacturers/${Id}`}
-                  className={styles['table-cell__link']}
+                  className={table['cell__link']}
                 >
                   <ArrowTopRightOnSquareIcon width={18} height={18} />
                 </a>

app/components/Table/table.module.css → src/components/table/table.module.css

@@ -1,4 +1,4 @@
-.table {
+.default {
   margin-bottom: 20px;
   border-collapse: collapse;
   border-spacing: 0;
@@ -21,10 +21,10 @@
   padding: 1px 8px 1px 1px;
 }
 
-.table-cell_secondary {
+.cell_secondary {
   color: #5c5c5c;
 }
 
-.table-cell__link {
+.cell__link {
   color: #373737;
 }

tsconfig.json

@@ -23,17 +23,14 @@
       { "name": "typescript-plugin-css-modules" }
     ],
     "paths": {
-      "@/components/*": ["./app/components/*"],
-      "@/helpers/*": ["./app/helpers/*"]
+      "@/components/*": ["./src/components/*"],
+      "@/helpers/*": ["./src/helpers/*"],
+      "@/api/*": ["./src/api/*"],
     }
   },
   "include": [
-    "app/page.tsx",
-    "app/manufacturers/[id]/page.tsx",
-    "app/components",
-    "app/helpers",
-    "app/api.ts",
-    "app/**/*.tsx",
+    "./src/**/*.ts",
+    "./src/**/*.tsx",
     ".next/types/**/*.ts"
   ],
   "references": [