feat: usageflow-section

src/apps/home/default.tsx

@@ -3,6 +3,7 @@ import { FC, ReactElement } from "react";
 import { Hero } from "@/routes/home/modules/hero";
 import { About } from "@/routes/home/modules/about";
 import { SellingPoint } from "@/routes/home/modules/sellingpoint";
+import { UsageFlow } from "@/routes/home/modules/usageflow";
 
 export const LandingPage: FC = (): ReactElement => {
   return (
@@ -11,6 +12,7 @@ export const LandingPage: FC = (): ReactElement => {
       <Hero />
       <About />
       <SellingPoint />
+      <UsageFlow />
     </>
   );
 };

src/components/organisms/datatable/datatable.tsx

@@ -11,7 +11,7 @@ import { ChangeEventHandler } from "react";
 import { Icon } from "@iconify/react";
 import { Pagination } from "@/components/atoms/pagination";
 
-export type TDataTable<T extends Record<string, unknown>> = {
+export interface TDataTable<T extends Record<string, unknown>> {
   data: T[];
   meta?: {
     total: number;
@@ -23,7 +23,7 @@ export type TDataTable<T extends Record<string, unknown>> = {
   columns: ColumnDef<T>[];
   handleSearch?: ChangeEventHandler<HTMLInputElement>;
   setPagination?: (updater: Updater<PaginationState>) => void;
-};
+}
 
 export const DataTable = <T extends Record<string, unknown>>(
   props: TDataTable<T>,
@@ -41,6 +41,7 @@ export const DataTable = <T extends Record<string, unknown>>(
       sorting,
     },
     onSortingChange: setSorting,
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     onPaginationChange: () => {},
     manualSorting: false,
     manualPagination: true,

src/routeTree.gen.ts

@@ -16,6 +16,7 @@ import { Route as RouteImport } from './routes/route'
 import { Route as HomeIndexImport } from './routes/home/index'
 import { Route as HomeDefaultImport } from './routes/home/default'
 import { Route as HomeModulesIndexImport } from './routes/home/modules/index'
+import { Route as HomeModulesUsageflowImport } from './routes/home/modules/usageflow'
 import { Route as HomeModulesSellingpointImport } from './routes/home/modules/sellingpoint'
 import { Route as HomeModulesHeroImport } from './routes/home/modules/hero'
 import { Route as HomeModulesAboutImport } from './routes/home/modules/about'
@@ -47,6 +48,11 @@ const HomeModulesIndexRoute = HomeModulesIndexImport.update({
   getParentRoute: () => rootRoute,
 } as any)
 
+const HomeModulesUsageflowRoute = HomeModulesUsageflowImport.update({
+  path: '/home/modules/usageflow',
+  getParentRoute: () => rootRoute,
+} as any)
+
 const HomeModulesSellingpointRoute = HomeModulesSellingpointImport.update({
   path: '/home/modules/sellingpoint',
   getParentRoute: () => rootRoute,
@@ -115,6 +121,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof HomeModulesSellingpointImport
       parentRoute: typeof rootRoute
     }
+    '/home/modules/usageflow': {
+      id: '/home/modules/usageflow'
+      path: '/home/modules/usageflow'
+      fullPath: '/home/modules/usageflow'
+      preLoaderRoute: typeof HomeModulesUsageflowImport
+      parentRoute: typeof rootRoute
+    }
     '/home/modules/': {
       id: '/home/modules/'
       path: '/home/modules'
@@ -135,6 +148,7 @@ export const routeTree = rootRoute.addChildren({
   HomeModulesAboutRoute,
   HomeModulesHeroRoute,
   HomeModulesSellingpointRoute,
+  HomeModulesUsageflowRoute,
   HomeModulesIndexRoute,
 })
 
@@ -152,6 +166,7 @@ export const routeTree = rootRoute.addChildren({
         "/home/modules/about",
         "/home/modules/hero",
         "/home/modules/sellingpoint",
+        "/home/modules/usageflow",
         "/home/modules/"
       ]
     },
@@ -176,6 +191,9 @@ export const routeTree = rootRoute.addChildren({
     "/home/modules/sellingpoint": {
       "filePath": "home/modules/sellingpoint.tsx"
     },
+    "/home/modules/usageflow": {
+      "filePath": "home/modules/usageflow.tsx"
+    },
     "/home/modules/": {
       "filePath": "home/modules/index.ts"
     }

src/routes/home/default.tsx

@@ -5,14 +5,17 @@ import { createRoute } from "@tanstack/react-router";
 import { rootRoute } from "../template";
 import { About } from "./modules/about";
 import { SellingPoint } from "./modules/sellingpoint";
+import { UsageFlow } from "./modules/usageflow";
 
+// eslint-disable-next-line react-refresh/only-export-components
 const LandingPage: FC = (): ReactElement => {
   return (
     <Fragment>
       <Navbar />
       <Hero />
       <About />
       <SellingPoint />
+      <UsageFlow />
     </Fragment>
   );
 };

src/routes/home/modules/usageflow.tsx

@@ -0,0 +1,16 @@
+import { FC, ReactElement } from "react";
+
+export const UsageFlow: FC = (): ReactElement => {
+  return (
+    <section className="flex flex-col items-center space-y-4 p-20">
+      <div className="text-white bg-blue-900 w-[300px] text-center text-3xl px-4 py-4 rounded font-bold">
+        Galeri HIMATIF
+      </div>
+      <div className="flex space-x-4 p-10 gap-5">
+        <div className="w-80 h-80 bg-gray-300 rounded-lg"></div>
+        <div className="w-80 h-80 bg-gray-300 rounded-lg"></div>
+        <div className="w-80 h-80 bg-gray-300 rounded-lg"></div>
+      </div>
+    </section>
+  );
+};