feat: partners and sponsors

app/components/contents/about.tsx

@@ -32,11 +32,11 @@ export function ContentAbout() {
         </p>
         <p>
           Based on this idea, BandungDev is being initiated and collaborating
-          with various other tech communities and companies such as WPU (aka Web Programming UNPAS), Programmer
-          Zaman Now (PZN), GDG Bandung (Google
-          Developer Group), JVM Indonesia, Indonesia Belajar, Kelas Terbuka, Android Developer
-          Bandung (ADB), BandungPy, BandungJS, ReactJS Indonesia, Binary
-          Nusantara, Bearmentor, Catamyst, and much more.
+          with various other tech communities and companies such as WPU (aka Web
+          Programming UNPAS), Programmer Zaman Now (PZN), GDG Bandung (Google
+          Developer Group), JVM Indonesia, Indonesia Belajar, Kelas Terbuka,
+          Android Developer Bandung (ADB), BandungPy, BandungJS, ReactJS
+          Indonesia, Binary Nusantara, Bearmentor, Catamyst, and much more.
         </p>
         <p>
           Our committee members are: M Haidar Hanif, Hendi Santika, Kresna

app/components/ui/button.tsx

@@ -43,7 +43,7 @@ const buttonVariants = cva(
   },
 )
 
-interface ButtonProps
+export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean

app/components/ui/pagination.tsx

@@ -0,0 +1,117 @@
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
+import * as React from "react"
+
+import { buttonVariants, type ButtonProps } from "~/components/ui/button"
+import { cn } from "~/utils/cn"
+
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn("mx-auto flex w-full justify-center", className)}
+    {...props}
+  />
+)
+Pagination.displayName = "Pagination"
+
+const PaginationContent = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    className={cn("flex flex-row items-center gap-1", className)}
+    {...props}
+  />
+))
+PaginationContent.displayName = "PaginationContent"
+
+const PaginationItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn("", className)} {...props} />
+))
+PaginationItem.displayName = "PaginationItem"
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<ButtonProps, "size"> &
+  React.ComponentProps<"a">
+
+const PaginationLink = ({
+  className,
+  isActive,
+  size = "xs",
+  ...props
+}: PaginationLinkProps) => (
+  <a
+    aria-current={isActive ? "page" : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? "outline" : "ghost",
+        size,
+      }),
+      className,
+    )}
+    {...props}
+  />
+)
+PaginationLink.displayName = "PaginationLink"
+
+const PaginationPrevious = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    size="default"
+    className={cn("gap-1 pl-2.5", className)}
+    {...props}
+  >
+    <ChevronLeft className="h-4 w-4" />
+    <span>Previous</span>
+  </PaginationLink>
+)
+PaginationPrevious.displayName = "PaginationPrevious"
+
+const PaginationNext = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    size="default"
+    className={cn("gap-1 pr-2.5", className)}
+    {...props}
+  >
+    <span>Next</span>
+    <ChevronRight className="h-4 w-4" />
+  </PaginationLink>
+)
+PaginationNext.displayName = "PaginationNext"
+
+const PaginationEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    aria-hidden
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+)
+PaginationEllipsis.displayName = "PaginationEllipsis"
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+}

app/configs/navigation.ts

@@ -131,6 +131,11 @@ export const configNavigationItems: NavItem[] = [
     icon: "ph:notification-duotone",
     text: "Notifications",
   },
+  {
+    path: "/admin/partners-and-sponsors",
+    icon: "material-symbols:partner-exchange",
+    text: "Patners & Sponsors",
+  },
   {
     path: "/examples",
     icon: "ph:bounding-box-duotone",

app/routes/admin.partners-and-sponsors.$id.edit.tsx

@@ -0,0 +1,77 @@
+import { Button } from "~/components/ui/button"
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "~/components/ui/card"
+import { Input } from "~/components/ui/input"
+import { Label } from "~/components/ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "~/components/ui/select"
+
+export default function PartnersAndSponsorsEditRoute() {
+  return (
+    <div className="app-container">
+      <header className="app-header">
+        <div>
+          <h2>Partners and Sponsors</h2>
+        </div>
+      </header>
+      <section className="app-section">
+        <Card className="w-full">
+          <CardHeader>
+            <CardTitle>Edit Partners or Sponsors</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <form>
+              <div className="grid w-full items-center gap-4">
+                <div className="flex flex-col space-y-1.5">
+                  <Label htmlFor="name">Name</Label>
+                  <Input
+                    id="name"
+                    placeholder="partners or sponsors name"
+                    defaultValue={"Web Programing UNPAS"}
+                  />
+                </div>
+                <div className="flex flex-col space-y-1.5">
+                  <Label htmlFor="name">Link</Label>
+                  <Input
+                    id="name"
+                    placeholder="https://"
+                    defaultValue={"https://youtube.com/c/webprogrammingunpas"}
+                  />
+                </div>
+                <div className="flex flex-col space-y-1.5">
+                  <Label htmlFor="partner-or-sponsor">
+                    Community Partner / Sponsor
+                  </Label>
+                  <Select>
+                    <SelectTrigger id="partner-or-sponsor">
+                      <SelectValue placeholder="Community Partner / Sponsor" />
+                    </SelectTrigger>
+                    <SelectContent position="popper">
+                      <SelectItem value="partner">Community Partner</SelectItem>
+                      <SelectItem value="sponsor">Sponsor</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+            </form>
+          </CardContent>
+          <CardFooter className="flex justify-end gap-2">
+            <Button variant="outline">Cancel</Button>
+            <Button>Edit</Button>
+            <Button variant="destructive">Delete</Button>
+          </CardFooter>
+        </Card>
+      </section>
+    </div>
+  )
+}

app/routes/admin.partners-and-sponsors._index.tsx

@@ -0,0 +1,143 @@
+import { Link, json, useLoaderData } from "@remix-run/react"
+import { type LoaderFunctionArgs } from "@remix-run/server-runtime"
+import { z } from "zod"
+import { zx } from "zodix"
+import { PaginationNavigation } from "~/components/shared/pagination"
+import { Button } from "~/components/ui/button"
+import { ButtonLink } from "~/components/ui/button-link"
+import { Iconify } from "~/components/ui/iconify"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "~/components/ui/table"
+import { prisma } from "~/libs/db.server"
+
+export const loader = async ({ request }: LoaderFunctionArgs) => {
+  const { page: pageQuery, limit: pageSizeQuery } = zx.parseQuery(request, {
+    page: z.string().default("1"),
+    limit: z.string().default("5"),
+  })
+
+  const page = parseInt(pageQuery)
+  const pageSize = parseInt(pageSizeQuery)
+  if (!page || !pageSize) {
+    return json({
+      page,
+      pageSize,
+      count: 0,
+      pageCount: 0,
+      partnersAndSponsors: [],
+      validationError: [{ message: "invalid query param" }],
+    })
+  }
+
+  const skip = (page - 1) * pageSize
+  const take = pageSize
+
+  const partnersAndSponsors = await prisma.partnerAndSponsor.findMany({
+    include: {
+      partnerAndSponsorType: true,
+    },
+    orderBy: {
+      updatedAt: "desc",
+    },
+    skip,
+    take,
+  })
+
+  const count = await prisma.partnerAndSponsor.count()
+  const pageCount = Math.ceil(count / pageSize)
+
+  return json({
+    page,
+    pageSize,
+    count,
+    pageCount,
+    partnersAndSponsors,
+    validationError: [],
+  })
+}
+
+export default function PartnersAndSponsorsRoute() {
+  const {
+    partnersAndSponsors,
+    page,
+    pageSize,
+    count,
+    pageCount,
+    validationError,
+  } = useLoaderData<typeof loader>()
+
+  return (
+    <div className="app-container">
+      <header className="app-header">
+        <div>
+          <h2>Partners and Sponsors</h2>
+        </div>
+      </header>
+
+      <section className="app-section">
+        {validationError.length > 0 ? (
+          <p className="text-red-500">{validationError[0]?.message}</p>
+        ) : (
+          <>
+            <div className="flex w-full flex-wrap justify-end">
+              <ButtonLink
+                to="/admin/partners-and-sponsors/new/"
+                variant="outline"
+                size="xs"
+              >
+                <Iconify icon="ph:plus" />
+                <span>Add Partner or Sponsor</span>
+              </ButtonLink>
+            </div>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Name</TableHead>
+                  <TableHead>Link</TableHead>
+                  <TableHead>Type</TableHead>
+                  <TableHead />
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {partnersAndSponsors.map(item => (
+                  <TableRow key={item?.id}>
+                    <TableCell>{item?.name}</TableCell>
+                    <TableCell>{item?.url}</TableCell>
+                    <TableCell>{item?.partnerAndSponsorType.name}</TableCell>
+                    <TableCell className="flex gap-2">
+                      <Button>
+                        <Link
+                          to={`/admin/partners-and-sponsors/${item?.id}/edit/`}
+                        >
+                          Edit
+                        </Link>
+                      </Button>
+                      <Button variant="destructive">Delete</Button>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+            <PaginationNavigation
+              limitParam={pageSize}
+              paginationItems={Array.from({ length: pageCount }, (_, i) => ({
+                pageNumber: i + 1,
+                to: `/admin/partners-and-sponsors/?page=${i + 1}&limit=5`,
+              }))}
+              totalItems={count}
+              totalPages={pageCount}
+              queryParam="/"
+              pageParam={page}
+            />
+          </>
+        )}
+      </section>
+    </div>
+  )
+}