feat(dimentorin): integrate mentors API - service layer + public list/detail pages

apps/dimentorin/src/app/(public)/mentoring/page.tsx

@@ -3,27 +3,24 @@ import { BannerSection } from './_components/banner-section';
 import { Topics } from './_components/topics';
 import { Input } from '@imphnen-frontend-service/ui/atoms';
 import { SearchOutlined } from '@ant-design/icons';
-import { For } from '@imphnen-frontend-service/utils';
+import { For, Show } from '@imphnen-frontend-service/utils';
 import { MentorCard } from './_components/mentor-card';
 import { Pagination } from '@imphnen-frontend-service/ui/molecules';
+import { useGetMentors } from '@imphnen-frontend-service/service';
 import { getCoreRowModel, getPaginationRowModel, PaginationState, useReactTable } from '@tanstack/react-table';
 import { motion, useInView, Variants } from 'framer-motion';
 
-const TEMP_DATA = [
-  { id: 1, name: 'John Doe' },
-  { id: 2, name: 'John Doe' },
-  { id: 3, name: 'John Doe' },
-  { id: 4, name: 'John Doe' },
-]
-
 export const Components: FC = (): ReactElement => {
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex: 0,
-    pageSize: 3,
+    pageSize: 8,
   });
+  const [search, setSearch] = useState('');
+
+  const { data: mentors, isLoading } = useGetMentors({ search });
 
   const table = useReactTable({
-    data: TEMP_DATA,
+    data: mentors ?? [],
     columns: [],
     state: { pagination },
     getCoreRowModel: getCoreRowModel(),
@@ -31,6 +28,8 @@ export const Components: FC = (): ReactElement => {
     onPaginationChange: setPagination,
   });
 
+  const pageMentors = table.getRowModel().rows.map((row) => row.original);
+
   const ref = useRef(null)
   const isInView = useInView(ref, { once: true, amount: 0.2 })
 
@@ -91,6 +90,8 @@ export const Components: FC = (): ReactElement => {
               <Input
                 placeholder="Cari berdasarkan nama, posisi/peran"
                 className="relative min-w-full w-full"
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
               />
               <SearchOutlined className="absolute right-2.5 top-1/2 -translate-y-1/2 text-primary-500 size-2.5 cursor-text md:me-12 lg:me-0" />
             </motion.div>
@@ -101,13 +102,31 @@ export const Components: FC = (): ReactElement => {
               initial="hidden"
               animate={isInView ? 'visible' : 'hidden'}
             >
-              <For data={Array.from({ length: 8 })}>
-                {(_, index) => (
-                  <motion.div key={index} variants={childVariants}>
-                    <MentorCard />
-                  </motion.div>
-                )}
-              </For>
+              <Show
+                condition={!isLoading}
+                fallback={
+                  <motion.p variants={childVariants} className="text-center text-neutral-500 col-span-full py-10">
+                    Memuat data mentor...
+                  </motion.p>
+                }
+              >
+                <Show
+                  condition={pageMentors.length > 0}
+                  fallback={
+                    <motion.p variants={childVariants} className="text-center text-neutral-500 col-span-full py-10">
+                      Tidak ada mentor ditemukan
+                    </motion.p>
+                  }
+                >
+                  <For data={pageMentors}>
+                    {(mentor, index) => (
+                      <motion.div key={mentor.id ?? index} variants={childVariants}>
+                        <MentorCard mentor={mentor} />
+                      </motion.div>
+                    )}
+                  </For>
+                </Show>
+              </Show>
             </motion.div>
 
             <Pagination table={table} />