initial to gitea

components/markdown/accordion.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { ReactNode, useState } from 'react';
+import { ChevronRight } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+type AccordionProps = {
+    title: string;
+    children?: ReactNode;
+    defaultOpen?: boolean;
+    className?: string;
+};
+
+const Accordion = ({
+    title,
+    children,
+    defaultOpen = false,
+    className,
+}: AccordionProps) => {
+    const [isOpen, setIsOpen] = useState(defaultOpen);
+
+    return (
+        <div className={cn("border rounded-lg overflow-hidden", className)}>
+            <button
+                type="button"
+                onClick={() => setIsOpen(!isOpen)}
+                className="flex items-center my-auto space-x-2 space-y-2 w-full px-4 h-12 transition-colors bg-background dark:hover:bg-muted/50 hover:bg-muted/15"
+            >
+                <ChevronRight
+                    className={cn(
+                        "w-4 h-4 text-muted-foreground transition-transform duration-200",
+                        isOpen && "rotate-90"
+                    )}
+                />
+                <h3 className="font-medium text-base text-foreground pb-2">{title}</h3>
+            </button>
+
+            {isOpen && (
+                <div className="px-4 py-3 border-t dark:bg-muted/50 bg-muted/15">
+                    {children}
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default Accordion;

components/markdown/button.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import * as Icons from "lucide-react";
+import Link from "next/link";
+
+type IconName = keyof typeof Icons;
+type ButtonProps = {
+  icon?: keyof typeof Icons;
+  text?: string;
+  href: string;
+  target?: "_blank" | "_self" | "_parent" | "_top";
+  size?: "sm" | "md" | "lg";
+  variation?: "primary" | "accent" | "outline";
+};
+
+const Button: React.FC<ButtonProps> = ({
+  icon,
+  text,
+  href,
+  target,
+  size = "md",
+  variation = "primary",
+}) => {
+  const baseStyles = "inline-flex items-center justify-center rounded font-medium focus:outline-none transition no-underline";
+
+  const sizeStyles = {
+    sm: "px-3 py-1 my-6 text-sm",
+    md: "px-4 py-2 my-6 text-base",
+    lg: "px-5 py-3 my-6 text-lg",
+  };
+
+  const variationStyles = {
+    primary: "bg-primary text-white hover:bg-primary/90",
+    accent: "bg-accent text-white hover:bg-accent/90",
+    outline: "border border-accent text-accent hover:bg-accent/10",
+  };
+
+  const Icon = icon ? (Icons[icon] as React.FC<{ className?: string }>) : null; // Tipe eksplisit sebagai React.FC
+
+  return (
+    <Link
+      href={href}
+      target={target}
+      rel={target === "_blank" ? "noopener noreferrer" : undefined}
+      className={`${baseStyles} ${sizeStyles[size]} ${variationStyles[variation]}`}
+    >
+      {text && <span>{text}</span>}
+      {Icon && <Icon className="mr-2 h-5 w-5" />}
+    </Link>
+  );
+};
+
+export default Button;

components/markdown/card.tsx

@@ -0,0 +1,57 @@
+import React, { ReactNode } from "react";
+import * as Icons from "lucide-react";
+
+type IconName = keyof typeof Icons;
+
+// Props untuk Card utama
+interface CardProps {
+  children: ReactNode;
+}
+
+// Props untuk CardTitle
+interface CardTitleProps {
+  title: string;
+  icon?: IconName; // Properti ikon berupa nama ikon yang valid
+}
+
+// Props untuk CardDescription
+interface CardDescriptionProps {
+  description: string;
+}
+
+// Komponen Card Utama
+const Card: React.FC<CardProps> & {
+  Title: React.FC<CardTitleProps>;
+  Description: React.FC<CardDescriptionProps>;
+} = ({ children }) => {
+  return (
+    <div className="border rounded-lg shadow-md overflow-hidden py-4 px-8">
+      {children}
+    </div>
+  );
+};
+
+// Komponen Card Title
+Card.Title = ({ title, icon }: CardTitleProps) => {
+  const Icon = icon ? (Icons[icon] as React.FC<{ className?: string }>) : null; // Tipe eksplisit sebagai React.FC
+
+  return (
+    <div className="flex flex-col space-y-1">
+      {Icon && <Icon className="text-xl text-primary" />} {/* Render ikon jika ada */}
+      <h2 className="text-xl font-bold">{title}</h2>
+    </div>
+  );
+};
+
+// Menambahkan displayName untuk Card.Title
+Card.Title.displayName = "CardTitle";
+
+// Komponen Card Description
+Card.Description = ({ description }: CardDescriptionProps) => (
+  <p className="text-muted-foreground text-[16.5px] mt-2">{description}</p>
+);
+
+// Menambahkan displayName untuk Card.Description
+Card.Description.displayName = "CardDescription";
+
+export default Card;

components/markdown/copy.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { Button } from "../ui/button";
+import { useState } from "react";
+
+export default function Copy({ content }: { content: string }) {
+  const [isCopied, setIsCopied] = useState(false);
+
+  async function handleCopy() {
+    await navigator.clipboard.writeText(content);
+    setIsCopied(true);
+
+    setTimeout(() => {
+      setIsCopied(false);
+    }, 2000);
+  }
+
+  return (
+    <Button
+      variant="secondary"
+      className="border"
+      size="xs"
+      onClick={handleCopy}
+    >
+      {isCopied ? (
+        <CheckIcon className="w-3 h-3" />
+      ) : (
+        <CopyIcon className="w-3 h-3" />
+      )}
+    </Button>
+  );
+}

components/markdown/image.tsx

@@ -0,0 +1,25 @@
+import { ComponentProps } from "react";
+import NextImage from "next/image";
+
+type Height = ComponentProps<typeof NextImage>["height"];
+type Width = ComponentProps<typeof NextImage>["width"];
+
+export default function Image({
+  src,
+  alt = "alt",
+  width = 800,
+  height = 350,
+  ...props
+}: ComponentProps<"img">) {
+  if (!src) return null;
+  return (
+    <NextImage
+      src={src}
+      alt={alt}
+      width={width as Width}
+      height={height as Height}
+      quality={40}
+      {...props}
+    />
+  );
+}

components/markdown/link.tsx

@@ -0,0 +1,14 @@
+import NextLink from "next/link";
+import { ComponentProps } from "react";
+
+export default function Link({ href, ...props }: ComponentProps<"a">) {
+  if (!href) return null;
+  return (
+    <NextLink
+      href={href}
+      {...props}
+      target="_blank"
+      rel="noopener noreferrer"
+    />
+  );
+}

components/markdown/note.tsx

@@ -0,0 +1,52 @@
+import { cn } from "@/lib/utils";
+import clsx from "clsx";
+import { PropsWithChildren } from "react";
+import {
+  Info,
+  AlertTriangle,
+  ShieldAlert,
+  CheckCircle,
+} from "lucide-react";
+
+type NoteProps = PropsWithChildren & {
+  title?: string;
+  type?: "note" | "danger" | "warning" | "success";
+};
+
+const iconMap = {
+  note: <Info size={16} className="text-blue-500" />,
+  danger: <ShieldAlert size={16} className="text-red-500" />,
+  warning: <AlertTriangle size={16} className="text-orange-500" />,
+  success: <CheckCircle size={16} className="text-green-500" />,
+};
+
+export default function Note({
+  children,
+  title = "Note",
+  type = "note",
+}: NoteProps) {
+  const noteClassNames = clsx({
+    "dark:bg-stone-950/25 bg-stone-50": type === "note",
+    "dark:bg-red-950 bg-red-100 border-red-200 dark:border-red-900":
+      type === "danger",
+    "dark:bg-orange-950 bg-orange-100 border-orange-200 dark:border-orange-900":
+      type === "warning",
+    "dark:bg-green-950 bg-green-100 border-green-200 dark:border-green-900":
+      type === "success",
+  });
+
+  return (
+    <div
+      className={cn(
+        "border rounded-md px-5 pb-0.5 mt-5 mb-7 text-sm tracking-wide",
+        noteClassNames
+      )}
+    >
+      <div className="flex items-center gap-2 font-bold -mb-2.5 pt-6">
+        {iconMap[type]}
+        <span className="text-base">{title}:</span>
+      </div>
+      {children}
+    </div>
+  );
+}

components/markdown/outlet.tsx

@@ -0,0 +1,29 @@
+import { BaseMdxFrontmatter, getAllChilds } from "@/lib/markdown";
+import Link from "next/link";
+
+export default async function Outlet({ path }: { path: string }) {
+  if (!path) throw new Error("path not provided");
+  const output = await getAllChilds(path);
+
+  return (
+    <div className="grid md:grid-cols-2 gap-5">
+      {output.map((child) => (
+        <ChildCard {...child} key={child.title} />
+      ))}
+    </div>
+  );
+}
+
+type ChildCardProps = BaseMdxFrontmatter & { href: string };
+
+function ChildCard({ description, href, title }: ChildCardProps) {
+  return (
+    <Link
+      href={href}
+      className="border rounded-md p-4 no-underline flex flex-col gap-0.5"
+    >
+      <h4 className="!my-0">{title}</h4>
+      <p className="text-sm text-muted-foreground !my-0">{description}</p>
+    </Link>
+  );
+}

components/markdown/pre.tsx

@@ -0,0 +1,19 @@
+import { ComponentProps } from "react";
+import Copy from "./copy";
+
+export default function Pre({
+  children,
+  raw,
+  ...rest
+}: ComponentProps<"pre"> & { raw?: string }) {
+  return (
+    <div className="my-5 relative">
+      <div className="absolute top-3 right-2.5 z-10 sm:block hidden">
+        <Copy content={raw!} />
+      </div>
+      <div className="relative">
+        <pre {...rest}>{children}</pre>
+      </div>
+    </div>
+  );
+}

components/markdown/stepper.tsx

@@ -0,0 +1,41 @@
+import { cn } from "@/lib/utils";
+import clsx from "clsx";
+import { Children, PropsWithChildren } from "react";
+
+export function Stepper({ children }: PropsWithChildren) {
+  const length = Children.count(children);
+
+  return (
+    <div className="flex flex-col">
+      {Children.map(children, (child, index) => {
+        return (
+          <div
+            className={cn(
+              "border-l pl-9 ml-3 relative",
+              clsx({
+                "pb-5 ": index < length - 1,
+              })
+            )}
+          >
+            <div className="bg-muted w-8 h-8 text-xs font-medium rounded-md border flex items-center justify-center absolute -left-4 font-code">
+              {index + 1}
+            </div>
+            {child}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export function StepperItem({
+  children,
+  title,
+}: PropsWithChildren & { title?: string }) {
+  return (
+    <div className="pt-0.5">
+      <h4 className="mt-0">{title}</h4>
+      <div>{children}</div>
+    </div>
+  );
+}

components/markdown/tooltips.tsx

@@ -0,0 +1,31 @@
+'use client';
+import React, { useState } from "react";
+
+interface TooltipProps {
+  tip: string; // Teks yang akan ditampilkan dalam tooltip
+  children: React.ReactNode; // Elemen yang akan memunculkan tooltip
+}
+
+const Tooltip: React.FC<TooltipProps> = ({ tip, children }) => {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <div
+      className="relative inline-block"
+      onMouseEnter={() => setVisible(true)}
+      onMouseLeave={() => setVisible(false)}
+    >
+      {children}
+      {visible && (
+        <div
+          className="absolute bottom-12 bg-black border-solid-2 border border-white text-white text-sm px-2 py-1 rounded"
+          style={{ whiteSpace: "nowrap" }}
+        >
+          {tip}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Tooltip;

components/markdown/youtube.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+interface YoutubeProps {
+  videoId: string;
+  className?: string;
+}
+
+const Youtube: React.FC<YoutubeProps> = ({ videoId, className }) => {
+  return (
+    <div className={`youtube ${className || ""}`}>
+      <iframe
+        src={`https://www.youtube.com/embed/${videoId}?rel=0&modestbranding=1&showinfo=0&autohide=1&controls=1`}
+        title="YouTube video player"
+        frameBorder="0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+        allowFullScreen
+      ></iframe>
+    </div>
+  );
+};
+
+export default Youtube;