Updates

components/lib/elements/Border.tsx

@@ -1,4 +1,4 @@
-import { DetailedHTMLProps, HTMLAttributes } from "react";
+import { DetailedHTMLProps, HTMLAttributes, RefObject } from "react";
 import { twMerge } from "tailwind-merge";
 
 export type TWUI_BORDER_PROPS = DetailedHTMLProps<
@@ -6,13 +6,18 @@ export type TWUI_BORDER_PROPS = DetailedHTMLProps<
     HTMLDivElement
 > & {
     spacing?: "normal" | "loose" | "tight" | "wide" | "tightest";
+    componentRef?: RefObject<HTMLDivElement>;
 };
 
 /**
  * # Toggle Component
  * @className_wrapper twui-border
  */
-export default function Border({ spacing, ...props }: TWUI_BORDER_PROPS) {
+export default function Border({
+    spacing,
+    componentRef,
+    ...props
+}: TWUI_BORDER_PROPS) {
     return (
         <div
             {...props}
@@ -29,6 +34,7 @@ export default function Border({ spacing, ...props }: TWUI_BORDER_PROPS) {
                 "twui-border",
                 props.className
             )}
+            ref={componentRef}
         >
             {props.children}
         </div>

components/lib/elements/HeaderNavLinkComponent.tsx

@@ -104,7 +104,7 @@ export default function HeaderNavLinkComponent({
                     <Dropdown
                         target={mainLinkComponent}
                         position="bottom-right"
-                        hoverOpen
+                        // hoverOpen
                         className="hidden xl:flex"
                     >
                         {dropdown ? (

components/lib/elements/RemoteCodeBlock.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { serialize } from "next-mdx-remote/serialize";
+import remarkGfm from "remark-gfm";
+import rehypePrismPlus from "rehype-prism-plus";
+import { MDXRemote, MDXRemoteSerializeResult } from "next-mdx-remote";
+import { useMDXComponents } from "../mdx/mdx-components";
+
+export const TWUIPrismLanguages = ["shell", "javascript"] as const;
+
+type Props = {
+    content: string;
+};
+
+/**
+ * # CodeBlock
+ *
+ * @className `twui-remote-code-block-wrapper`
+ */
+export default function RemoteCodeBlock({ content }: Props) {
+    const [mdxSource, setMdxSource] =
+        React.useState<MDXRemoteSerializeResult<any>>();
+
+    const { components } = useMDXComponents();
+
+    React.useEffect(() => {
+        serialize(content, {
+            mdxOptions: {
+                remarkPlugins: [remarkGfm],
+                rehypePlugins: [rehypePrismPlus],
+            },
+        }).then((mdxSrc) => {
+            setMdxSource(mdxSrc);
+        });
+    }, []);
+
+    if (!mdxSource) {
+        return null;
+    }
+
+    return (
+        <MDXRemote
+            {...mdxSource}
+            components={{
+                ...components,
+            }}
+        />
+    );
+}

components/lib/elements/Toast.tsx

@@ -70,7 +70,7 @@ export default function Toast({
         <Card
             {...props}
             className={twMerge(
-                "absolute bottom-4 right-4 z-[250] border-none",
+                "fixed bottom-4 right-4 z-[250] border-none",
                 "pl-6 pr-8 py-4 bg-primary dark:bg-primary-dark",
                 color == "success"
                     ? "bg-success dark:bg-success-dark twui-toast-success"