add new blog post

app/blog/[slug]/page.tsx

@@ -2,6 +2,7 @@ import React from "react";
 
 // @components
 import Link from "next/link";
+import { Alert } from "@/components/alert";
 import { MDXRemote } from "next-mdx-remote/rsc";
 import { CodeBlock } from "@/components/code-block";
 import { Typography } from "@/components/typography";
@@ -134,6 +135,7 @@ export default async function Post({
               a: (props) => (
                 <a {...props} target="_blank" rel="noopener noreferrer" />
               ),
+              Alert,
               BrowserWindow,
             }}
           />

app/demo/building-a-native-html-dialog-demo-1/page.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import React from "react";
+
+export default function Page() {
+  React.useEffect(() => {
+    const dialog = document.querySelector(
+      "[data-name=dialog]",
+    ) as HTMLDialogElement;
+    const dialogTrigger = document.querySelector("[data-name=dialog-trigger]");
+    const dialogCloseTrigger = document.querySelector(
+      "[data-name=dialog-close-trigger]",
+    );
+
+    if (dialog && dialogTrigger && dialogCloseTrigger) {
+      dialog.showModal();
+
+      dialogTrigger.addEventListener("click", () => {
+        dialog.showModal();
+      });
+
+      dialogCloseTrigger.addEventListener("click", () => {
+        dialog.classList.add("!animate-bnhd-go-out");
+        dialog.classList.add("backdrop:!animate-bnhd-fade-out");
+
+        setTimeout(() => {
+          dialog.classList.remove("!animate-bnhd-go-out");
+          dialog.classList.remove("backdrop:!animate-bnhd-fade-out");
+          dialog.close();
+        }, 150);
+      });
+    }
+  }, []);
+
+  return (
+    <div className="container mx-auto grid h-screen place-items-center p-16 text-center">
+      <button
+        data-name="dialog-trigger"
+        className="border-secondary hover:bg-secondary/25 h-9 cursor-pointer rounded-lg border px-3.5 text-sm text-black transition-colors"
+      >
+        Open Dialog
+      </button>
+      <dialog
+        data-name="dialog"
+        className="open:animate-bnhd-come-in backdrop:animate-bnhd-fade-in border-secondary bg-background fixed top-1/2 left-1/2 max-w-100 -translate-1/2 rounded-xl border p-6 text-left backdrop:bg-black/80 dark:backdrop:bg-white/70"
+      >
+        <h2 className="text-lg font-semibold text-black">Dialog Title</h2>
+        <p className="text-foreground mt-2">
+          This is a simple dialog box using HTML and Tailwind CSS. You can close
+          this dialog box by clicking the cancel button.
+        </p>
+        <form method="dialog" className="mt-4 flex justify-end gap-2">
+          <button
+            type="button"
+            data-name="dialog-close-trigger"
+            className="border-secondary hover:bg-secondary/25 h-9 cursor-pointer rounded-lg border px-3.5 text-sm text-black transition-colors"
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            className="bg-primary h-9 cursor-pointer rounded-lg px-3.5 text-sm text-white transition-opacity hover:opacity-85"
+          >
+            Confirm
+          </button>
+        </form>
+      </dialog>
+    </div>
+  );
+}

app/demo/building-a-native-html-dialog-demo-2/page.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import React from "react";
+
+export default function Page() {
+  React.useEffect(() => {
+    const dialog = document.querySelector(
+      "[data-name=dialog]",
+    ) as HTMLDialogElement;
+    const dialogTrigger = document.querySelector("[data-name=dialog-trigger]");
+    const dialogCloseTrigger = document.querySelector(
+      "[data-name=dialog-close-trigger]",
+    );
+
+    if (dialog && dialogTrigger && dialogCloseTrigger) {
+      dialog.showModal();
+
+      dialogTrigger.addEventListener("click", () => {
+        dialog.showModal();
+      });
+
+      dialogCloseTrigger.addEventListener("click", () => {
+        dialog.close();
+      });
+    }
+  }, []);
+
+  return (
+    <div className="container mx-auto grid h-screen place-items-center p-16 text-center">
+      <button
+        data-name="dialog-trigger"
+        className="border-secondary hover:bg-secondary/25 h-9 cursor-pointer rounded-lg border px-3.5 text-sm text-black transition-colors"
+      >
+        Open Dialog
+      </button>
+      <dialog
+        data-name="dialog"
+        className="border-secondary bg-background fixed top-1/2 left-1/2 max-w-100 -translate-1/2 rounded-xl border p-6 text-left backdrop:bg-black/80 dark:backdrop:bg-white/70"
+      >
+        <h2 className="text-lg font-semibold text-black">Dialog Title</h2>
+        <p className="text-foreground mt-2">
+          This is a simple dialog box using HTML and Tailwind CSS. You can close
+          this dialog box by clicking the cancel button.
+        </p>
+        <form method="dialog" className="mt-4 flex justify-end gap-2">
+          <button
+            type="button"
+            data-name="dialog-close-trigger"
+            className="border-secondary hover:bg-secondary/25 h-9 cursor-pointer rounded-lg border px-3.5 text-sm text-black transition-colors"
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            className="bg-primary h-9 cursor-pointer rounded-lg px-3.5 text-sm text-white transition-opacity hover:opacity-85"
+          >
+            Confirm
+          </button>
+        </form>
+      </dialog>
+    </div>
+  );
+}

app/globals.css

@@ -13,6 +13,45 @@
   /* breakpoints */
   --breakpoint-xxl: 1400px;
   --breakpoint-xs: 480px;
+
+  /* animations */
+  --animate-bnhd-fade-in: bnhd-fade-in 200ms linear;
+  --animate-bnhd-fade-out: bnhd-fade-out 200ms linear;
+  --animate-bnhd-come-in: bnhd-come-in 200ms linear;
+  --animate-bnhd-go-out: bnhd-go-out 200ms linear;
+
+  @keyframes bnhd-fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes bnhd-fade-out {
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes bnhd-come-in {
+    from {
+      opacity: 0;
+      transform: translateY(-40px) scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+
+  @keyframes bnhd-go-out {
+    to {
+      opacity: 0;
+      transform: translateY(-40px) scale(0.95);
+    }
+  }
 }
 
 @variant dark (&:where(.dark, .dark *));

components/alert.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+
+// @components
+import { Slot } from "@radix-ui/react-slot";
+
+// @utils
+import { cn } from "@/lib/utils";
+import { cva, type VariantProps } from "class-variance-authority";
+
+const alertVariants = cva(
+  "rounded-2xl border border-dashed px-5 py-4 text-base font-medium text-black [&_*]:m-0 [&_*]:text-black",
+  {
+    variants: {
+      variant: {
+        info: "border-blue-400 bg-blue-400/10",
+      },
+    },
+    defaultVariants: {
+      variant: "info",
+    },
+  },
+);
+
+interface AlertProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof alertVariants> {
+  asChild?: boolean;
+  ref?: React.Ref<HTMLDivElement>;
+}
+
+export function Alert({
+  ref,
+  variant,
+  className,
+  asChild = false,
+  ...props
+}: AlertProps) {
+  const Component = asChild ? Slot : "div";
+  const styles = cn(alertVariants({ variant, className }));
+
+  return <Component ref={ref} className={styles} {...props} />;
+}