-
-
-
-
- );
-}
diff --git a/packages/docs/components/dynamic-layout.tsx b/packages/docs/components/dynamic-layout.tsx
new file mode 100644
index 0000000..d8b8e71
--- /dev/null
+++ b/packages/docs/components/dynamic-layout.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import useIsMobile from "../hooks/useIsMobile";
+
+interface DynamicLayoutProps {
+ sidebar: React.ReactNode;
+ toc: React.ReactNode;
+ mobileSidebar: React.ReactNode;
+ children: React.ReactNode;
+}
+
+export default function DynamicLayout({
+ sidebar,
+ toc,
+ mobileSidebar,
+ children,
+}: DynamicLayoutProps) {
+ const isMobile = useIsMobile();
+
+ return (
+ -
-
-
- Get started by editing{" "}
-
- app/page.tsx -- . -
- - Save and see your changes instantly. -
+ {!isMobile &&
+ );
+}
diff --git a/packages/docs/components/effects/mouse-image-effect.tsx b/packages/docs/components/effects/mouse-image-effect.tsx
new file mode 100644
index 0000000..2d1e9f9
--- /dev/null
+++ b/packages/docs/components/effects/mouse-image-effect.tsx
@@ -0,0 +1,71 @@
+"use client";
+import React, { MouseEvent, useEffect, useRef, useState } from "react";
+
+const images = Array(16).fill("/logo.svg");
+
+export default function MouseImageEffect() {
+ const [imagePositions, setImagePositions] = useState<
+ { src: string; x: number; y: number }[]
+ >([]);
+ const containerRef = useRef{sidebar}
}
+ {isMobile && {mobileSidebar}
}
+ {children}
+ {!isMobile && {toc}
}
+
+ 
+ ))}
+
+ );
+}
diff --git a/packages/docs/components/index.ts b/packages/docs/components/index.ts
new file mode 100644
index 0000000..32b6e73
--- /dev/null
+++ b/packages/docs/components/index.ts
@@ -0,0 +1,9 @@
+export { default as Navigation } from "./navigation";
+export { default as LanguageSelector } from "./language-selector";
+export { default as Sidebar } from "./sidebar";
+export { ThemeProvider } from "./theme-provider";
+export { default as ThemeToggle } from "./theme-toggle";
+export { default as TOC } from "./toc";
+export { default as DynamicLayout } from "./dynamic-layout";
+export { default as NavigationButton } from "./navigation-button";
+export { default as MobileSidebar } from "./mobile-sidebar";
diff --git a/packages/docs/components/language-selector.tsx b/packages/docs/components/language-selector.tsx
new file mode 100644
index 0000000..5345b2b
--- /dev/null
+++ b/packages/docs/components/language-selector.tsx
@@ -0,0 +1,83 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { useRouter, usePathname } from "next/navigation";
+import { GlobeAltIcon } from "@heroicons/react/24/solid";
+
+const languages = [
+ { code: "en", name: "English" },
+ { code: "kr", name: "한국어" },
+];
+
+export default function LanguageSelector() {
+ const router = useRouter();
+ const pathname = usePathname();
+ const [currentLang, setCurrentLang] = useState("en");
+ const [isMenuOpen, setIsMenuOpen] = useState(false);
+ const menuRef = useRef
+
+
+ {imagePositions.map((image, index) => (
+ + react-notion-custom +
++ Create Your Custom Blog with Notion +
+
+
+ {isMenuOpen && (
+
+ );
+}
diff --git a/packages/docs/components/mobile-sidebar.tsx b/packages/docs/components/mobile-sidebar.tsx
new file mode 100644
index 0000000..e009e05
--- /dev/null
+++ b/packages/docs/components/mobile-sidebar.tsx
@@ -0,0 +1,103 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { ChevronDownIcon, ChevronRightIcon } from "@heroicons/react/24/solid";
+import ThemeToggle from "./theme-toggle";
+
+type Document = {
+ title: string;
+ slug: string;
+ group: string;
+ order: number;
+};
+
+type MobileSidebarProps = {
+ documents: Document[];
+ currentSlug: string;
+ currentGroup: string;
+ lang: string;
+};
+
+export default function MobileSidebar({
+ documents,
+ currentSlug,
+ currentGroup,
+ lang,
+}: MobileSidebarProps) {
+ const [isOpen, setIsOpen] = useState(false);
+ const [openGroup, setOpenGroup] = useState
+
+ )}
+
+ {languages.map((lang) => (
+
+ ))}
+
+
+
+ {isOpen && (
+
+ );
+}
diff --git a/packages/docs/components/navigation-button.tsx b/packages/docs/components/navigation-button.tsx
new file mode 100644
index 0000000..c8b5419
--- /dev/null
+++ b/packages/docs/components/navigation-button.tsx
@@ -0,0 +1,37 @@
+import Link from "next/link";
+import { ChevronRightIcon, ChevronLeftIcon } from "@heroicons/react/24/solid";
+
+interface NavigationButtonProps {
+ document: {
+ group: string;
+ slug: string;
+ title: string;
+ };
+ lang: string;
+ direction: "prev" | "next";
+}
+
+export default function NavigationButton({
+ document,
+ lang,
+ direction,
+}: NavigationButtonProps) {
+ return (
+
+ {direction === "prev" ? (
+
+ {Object.entries(groupedDocuments).map(([group, docs]) => (
+
+ )}
+
+
+ {openGroup === group && (
+
+ ))}
+ -
+ {docs.map((doc) => (
+
-
+
+ {doc.title}
+
+ +
+ ))}
+
+
+
+
+ ) : (
+ {document.title}
+
+
+ )}
+
+ );
+}
diff --git a/packages/docs/components/navigation.tsx b/packages/docs/components/navigation.tsx
new file mode 100644
index 0000000..a5c5d31
--- /dev/null
+++ b/packages/docs/components/navigation.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import Image from "next/image";
+import LanguageSelector from "./language-selector";
+
+export default function Navigation() {
+ const params = useParams();
+ const lang = (params.lang as string) || "en";
+
+ return (
+
+ );
+}
diff --git a/packages/docs/components/sidebar.tsx b/packages/docs/components/sidebar.tsx
new file mode 100644
index 0000000..72e7885
--- /dev/null
+++ b/packages/docs/components/sidebar.tsx
@@ -0,0 +1,68 @@
+import Link from "next/link";
+import ThemeToggle from "./theme-toggle";
+import { ChevronRightIcon } from "@heroicons/react/24/solid";
+
+type Document = {
+ title: string;
+ slug: string;
+ group: string;
+ order: number;
+};
+
+type SidebarProps = {
+ documents: Document[];
+ currentSlug: string;
+ currentGroup: string;
+ lang: string;
+};
+
+export default function Sidebar({
+ documents,
+ currentSlug,
+ currentGroup,
+ lang,
+}: SidebarProps) {
+ const groupedDocuments = documents.reduce(
+ (acc, doc) => {
+ if (!acc[doc.group]) {
+ acc[doc.group] = [];
+ }
+ acc[doc.group].push(doc);
+ return acc;
+ },
+ {} as Record{document.title}
+