feat: add /id page for indonesian page

src/app/id/[slug]/page.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { Props } from "@/hooks/useValidateFrameUrl";
+import { notFound, useParams, useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import LoadingOverlay from "../go/_components/form/loading-overlay";
+
+export default function SlugPage() {
+  const [isNotFound, setIsNotFound] = useState(false);
+  const { slug } = useParams();
+  const router = useRouter();
+
+  useEffect(() => {
+    const params = localStorage.getItem(slug as string);
+
+    if (!params) setIsNotFound(true);
+    else {
+      const searchParams = JSON.parse(params) as Props["searchParams"];
+
+      router.push(`/go?${new URLSearchParams(searchParams).toString()}`);
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [slug]);
+
+  return isNotFound ? notFound() : <LoadingOverlay isLoading />;
+}

src/app/id/_components/footer.tsx

@@ -0,0 +1,11 @@
+export const Footer = () => {
+  return (
+    <footer className="w-full px-4 md:px-8 bg-primary-500 text-white">
+      <div className="border-neutral-600 max-w-7xl mx-auto mt-12 py-8 text-center">
+        <p>
+          © {new Date().getFullYear()} Moklet Developers. All rights reserved.
+        </p>
+      </div>
+    </footer>
+  );
+};

src/app/id/_components/global/button.tsx

@@ -0,0 +1,90 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import Link, { LinkProps as NextLinkProps } from "next/link";
+import {
+  ComponentProps,
+  HTMLAttributeAnchorTarget,
+  MouseEventHandler,
+  ReactNode,
+} from "react";
+
+import cn from "@/lib/clsx";
+
+const buttonVariants = cva(
+  "inline-flex items-center rounded-full transition-all duration-500",
+  {
+    variants: {
+      variant: {
+        primary:
+          "bg-primary-400 px-4 py-2 md:px-6 md:py-3 hover:bg-primary-200 text-base text-white disabled:text-neutral-500 disabled:bg-neutral-300",
+        secondary:
+          "border-primary-400 px-4 py-2 md:px-6 md:py-3 hover:bg-primary-50 text-base text-primary-400 disabled:bg-neutral-300 text-primary-400 disabled:text-neutral-500",
+        tertiary:
+          "text-base text-black hover:text-primary-400 text-black disabled:text-neutral-500",
+        quartiary:
+          "text-base px-4 py-2 md:px-6 md:py-3 text-primary-400 bg-white hover:bg-primary-50 disabled:bg-neutral-400 disabled:text-white",
+      },
+    },
+  }
+);
+
+interface LinkButtonProps
+  extends NextLinkProps,
+    VariantProps<typeof buttonVariants> {
+  children?: ReactNode;
+  href: string;
+  scroll?: boolean;
+  target?: HTMLAttributeAnchorTarget;
+  className?: string;
+}
+
+interface ButtonProps
+  extends ComponentProps<"button">,
+    VariantProps<typeof buttonVariants> {
+  children?: ReactNode;
+  type?: "button" | "reset" | "submit";
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  isDisabled?: boolean;
+  className?: string;
+}
+
+export function LinkButton({
+  children,
+  href,
+  variant,
+  className,
+  target,
+  scroll,
+}: Readonly<LinkButtonProps>) {
+  return (
+    <Link
+      href={href}
+      className={cn(buttonVariants({ variant }), className)}
+      target={target}
+      scroll={scroll}
+    >
+      {children}
+    </Link>
+  );
+}
+
+export function Button({
+  children,
+  type,
+  onClick,
+  isDisabled,
+  className,
+  variant,
+  ...props
+}: Readonly<ButtonProps>) {
+  return (
+    <button
+      type={type}
+      onClick={onClick}
+      disabled={isDisabled}
+      className={cn(buttonVariants({ variant }), className)}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}

src/app/id/_components/global/card.tsx

@@ -0,0 +1,82 @@
+import cn from "@/lib/clsx";
+import * as React from "react";
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border border-zinc-200 bg-white text-zinc-950 shadow dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-50",
+      className
+    )}
+    {...props}
+  />
+));
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+));
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+));
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-zinc-500 dark:text-zinc-400", className)}
+    {...props}
+  />
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+));
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+));
+CardFooter.displayName = "CardFooter";
+
+export {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+};

src/app/id/_components/global/image.tsx

@@ -0,0 +1,16 @@
+import { default as NextImage, ImageProps } from "next/image";
+
+import cn from "@/lib/clsx";
+
+export default function Image(props: Readonly<ImageProps>) {
+  return (
+    <NextImage
+      {...props}
+      referrerPolicy="no-referrer"
+      className={cn(
+        "pointer-events-none object-cover bg-center bg-no-repeat",
+        props.className,
+      )}
+    />
+  );
+}