content layer integration (#4)

app/sink/layout.tsx

@@ -0,0 +1,25 @@
+import type { Metadata } from "next";
+import { Sidebar } from "@/components/sidebar";
+import { Container } from "@/components/container";
+
+export const metadata: Metadata = {
+  title: "Glui Docs",
+  description: "Componenet library built on top of Tailwind CSS and React.",
+};
+
+export default function SinkLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <main className="w-full max-w-screen-2xl">
+        <div className="relative pt-16 h-full flex flex-row gap-4">
+            <Sidebar />
+            <Container>
+                {children}
+            </Container>
+        </div>
+    </main>
+  );
+}

app/sink/page.tsx

@@ -0,0 +1,54 @@
+import { Container } from "@/components/container";
+import { GluonDemo } from "@/components/gluon-demo";
+import { Resizable } from "@/components/resizable";
+import { Sidebar } from "@/components/sidebar";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import CarouselDemo from "@/gluons/demo/carousel-demo";
+import ContentAccordionDemo from "@/gluons/demo/content-accordion-demo";
+import HeaderDemo from "@/gluons/demo/header-demo";
+import SidebarDemo from "@/gluons/demo/sidebar-demo";
+import { GripVertical } from "lucide-react";
+
+const SinkPage = () => {
+    return (
+        <div>
+            <h1 className="text-4xl font-semibold">
+                Sink
+            </h1>
+            <div className="py-8">
+                <h3 className="text-2xl font-semibold pb-4">
+                    Content Accordion
+                </h3>
+                <Resizable>
+                    <ContentAccordionDemo />
+                </Resizable>
+            </div>
+            <div className="py-8">
+                <h3 className="text-2xl font-semibold pb-4">
+                    Carousel
+                </h3>
+                <Resizable>
+                    <CarouselDemo />
+                </Resizable>
+            </div>
+            <div className="py-8">
+                <h3 className="text-2xl font-semibold pb-4">
+                    Header
+                </h3>
+                <Resizable>
+                    <HeaderDemo />
+                </Resizable>
+            </div>
+            <div className="py-8">
+                <h3 className="text-2xl font-semibold pb-4">
+                    Sidebar
+                </h3>
+                <Resizable>
+                    <SidebarDemo />
+                </Resizable>
+            </div>
+        </div>
+    )
+}
+
+export default SinkPage;

components/demo-preview-container.tsx

@@ -0,0 +1,22 @@
+import { cn } from "@/lib/utils"
+
+export const DemoPreviewContainer = ({
+    devicePreview,
+    children,
+    className,
+}: {
+    devicePreview: "desktop" | "tablet" | "smartphone",
+    className?: string,
+    children: React.ReactNode,
+}) => {
+    return (
+        <div className={cn(
+            "@container grow border rounded-md bg-background max-h-full overflow-auto",
+            devicePreview === "desktop" && "w-full",
+            devicePreview === "tablet" && "max-w-lg",
+            devicePreview === "smartphone" && "max-w-sm",
+        )}>
+            {children}
+        </div>
+    )
+}

components/demo-preview.tsx

@@ -5,6 +5,8 @@ import { Button } from "@/components/ui/button";
 import { Laptop, Smartphone, Tablet } from "lucide-react";
 import { useState } from "react";
 import { cn } from "@/lib/utils";
+import { Index } from "@/gluons/demo";
+import { DemoPreviewContainer } from "./demo-preview-container";
 
 type DevicePreview = "desktop" | "tablet" | "smartphone"
 
@@ -60,14 +62,9 @@ export const DemoPreview = ({
                     devicePreview === "desktop" && "px-8",
                 )}
             >
-                <div id="demoPreviewContainer" className={cn(
-                    "@container grow border rounded-md bg-background max-h-full overflow-auto",
-                    devicePreview === "desktop" && "w-full",
-                    devicePreview === "tablet" && "max-w-lg",
-                    devicePreview === "smartphone" && "max-w-sm",
-                )}>
+                <DemoPreviewContainer devicePreview={devicePreview}>
                     {children}
-                </div>
+                </DemoPreviewContainer>
             </CardContent>
         </Card>
     )

components/mdx-components.tsx

@@ -1,8 +1,115 @@
 import { GluonDemo } from "@/components/gluon-demo";
+import { Carousel } from "@/gluons/carousel";
+import CarouselDemo from "@/gluons/demo/carousel-demo";
 import { useMDXComponent } from "next-contentlayer/hooks";
+import { DemoPreview } from "./demo-preview";
+import { DemoCode } from "./demo-code";
+import HoverGridDemo from "@/gluons/demo/hover-grid-demo";
+import { HoverGrid, HoverGridCell } from "@/gluons/hover-grid";
+import { cn } from "@/lib/utils";
+import { DemoPreviewContainer } from "./demo-preview-container";
+import { Header, HeaderCenter, HeaderContainer, HeaderLeft, HeaderMobileMenuTrigger, HeaderRight } from "@/gluons/header";
 
 const components = {
     GluonDemo,
+    CarouselDemo,
+    Carousel,
+    DemoCode,
+    DemoPreview,
+    DemoPreviewContainer: ({
+        devicePreview,
+        children,
+        className,
+        ...props
+    }: React.ComponentProps<typeof DemoPreviewContainer>) => (
+        <DemoPreviewContainer
+            devicePreview={devicePreview}
+            className={cn(
+                "@container grow border rounded-md bg-background max-h-full overflow-auto",
+                devicePreview === "desktop" && "w-full",
+                devicePreview === "tablet" && "max-w-lg",
+                devicePreview === "smartphone" && "max-w-sm",
+            )}
+            {...props}
+        >
+            {children}
+        </DemoPreviewContainer>
+    ),
+    Header: ({ className, ...props }: React.ComponentProps<typeof Header>) => (
+        <Header
+            className={cn(
+                "@container sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60",
+                className
+            )}
+            {...props}
+        />
+    ),
+    HeaderContainer: ({ className, ...props }: React.ComponentProps<typeof HeaderContainer>) => (
+        <HeaderContainer
+            className={cn(
+                "container flex flex-row items-center justify-between h-14 gap-4 py-0 @lg:py-2 mx-auto",
+                className
+            )}
+            {...props}
+        />
+    ),
+    HeaderLeft: ({ className, ...props }: React.ComponentProps<typeof HeaderLeft>) => (
+        <HeaderLeft
+            className={cn(
+                "relative flex-1 flex flex-row items-center justify-start h-full gap-4",
+                className
+            )}
+            {...props}
+        />
+    ),
+    HeaderCenter: ({ className, ...props }: React.ComponentProps<typeof HeaderCenter>) => (
+        <HeaderCenter
+            className={cn(
+                "relative flex-1 hidden @lg:flex flex-row items-center justify-center h-full gap-4",
+                className
+            )}
+            {...props}
+        />
+    ),
+    HeaderRight: ({ className, ...props }: React.ComponentProps<typeof HeaderRight>) => (
+        <HeaderRight
+            className={cn(
+                "relative flex-1 flex flex-row items-center justify-end h-full gap-4",
+                className
+            )}
+            {...props}
+        />
+    ),
+    HeaderMobileMenuTrigger: ({ className, ...props }: React.ComponentProps<typeof HeaderMobileMenuTrigger>) => (
+        <HeaderMobileMenuTrigger
+            className={cn(
+                "@lg:hidden",
+                className
+            )}
+            {...props}
+        />
+    ),
+    HoverGridDemo,
+    HoverGrid: ({ className, ...props }: React.ComponentProps<typeof HoverGrid>) => (
+        <HoverGrid
+            className={cn(
+                "grid grid-flow-row grid-cols-1 @md:grid-cols-2 @lg:grid-cols-3 divide-x divide-y w-full",
+                className
+            )}
+            {...props}
+        />
+    ),
+    HoverGridCell: ({ className, ...props }: React.ComponentProps<typeof HoverGridCell>) => (
+        <HoverGridCell
+            className={cn(
+                "flex flex-col bg-background group gap-4 hover:gap-2 p-8 hover:bg-muted/40", 
+                "justify-between transition-all ease-in-out outline outline-1 duration-500",
+                "col-span-1",
+                className
+            )}
+            {...props}
+        />
+    ),
 }
 
 interface MdxProps {

components/resizable.tsx

@@ -0,0 +1,24 @@
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+
+export const Resizable = ({
+    children,
+}: {
+    children: React.ReactNode,
+}) => {
+    return (
+        <ResizablePanelGroup 
+            direction="horizontal"
+            className="w-full"
+        >
+            <ResizablePanel defaultSize={100} className="min-w-96">
+                    <div className="h-[500px] flex flex-col justify-center overflow-auto border border-foreground bg-[url('/dot-grid.svg')] bg-center">
+                        {children}
+                    </div>
+            </ResizablePanel>
+            <ResizableHandle className="w-1.5 h-8 ml-1.5 my-auto bg-muted-foreground rounded-full" />
+            <ResizablePanel className="w-[1px] min-w-[1px]">
+                <div />
+            </ResizablePanel>
+        </ResizablePanelGroup>
+    )
+}

gluons/demo/carousel-demo.tsx

@@ -107,7 +107,7 @@ export const CarouselDemo = () => {
     return (
         <div 
             id="FeatureCarouselContainer" 
-            className="max-w-screen-xl mx-auto px-4 space-y-8"
+            className="@container h-full overflow-auto max-w-screen-xl px-4 space-y-8 bg-background"
         >
             <div 
                 id="FeatureCarouselTrack" 
@@ -124,10 +124,10 @@ export const CarouselDemo = () => {
                 ))}
             </div>
             <div 
-                className="relative grid grid-cols-3 w-full text-center border-collapse overflow-clip"
+                className="relative grid grid-cols-3 w-auto mx-4 @lg:mx-8 text-center border-t border-dashed border-muted"
             >
                 <div 
-                    className="absolute top-0 w-1/3 h-[1px] bg-primary ease-linear"
+                    className="absolute -top-[1px] w-1/3 h-[2px] bg-primary"
                     style={{ left: `${scrollProgress}%` }} 
                 />
                 {Array.from({ length: 3 }).map((_, i) => (
@@ -136,7 +136,7 @@ export const CarouselDemo = () => {
                         data-id={i + 1}
                         role="button"
                         className={cn(
-                            "border-t border-dashed border-muted py-8 px-2 text-muted-foreground",
+                            "py-8 mx-auto text-muted-foreground",
                             activeFeature === (i + 1) && "text-primary"
                         )}
                         onClick={(e) => handleClick(e)}

gluons/demo/content-accordion-demo.tsx

@@ -14,8 +14,8 @@ const ContentAccordionDemo = () => {
     const [active, setActive] = useState<number | null>(1);
 
     return (
-        <div className="@container grid grid-cols-3 items-stretch">
-            <div className="col-span-3 @lg:col-span-2">
+        <div className="@container grid grid-cols-3 items-stretch bg-background">
+            <div className="relative col-span-3 @3xl:col-span-2">
                 {active === 1 && (
                     <Image
                         src="/unsplash-abstract-1.jpeg"
@@ -53,12 +53,12 @@ const ContentAccordionDemo = () => {
                 />
                 )}
             </div>
-            <div className="col-span-3 @lg:col-span-1">
+            <div className="col-span-3 @3xl:col-span-1">
                 <Accordion type="single" defaultValue="1" className="flex flex-col items-stretch h-full border-t border-x">
                     <AccordionItem 
                         value="1"
                         className={cn(
-                            "relative grow text-lg group before:content[''] before:w-[2px] before:absolute before:top-0 before:left-0 before:bg-foreground before:transition-all before:ease-in-out before:duration-300 ",
+                            "relative grow flex flex-col justify-center text-lg group before:content[''] before:w-[2px] before:absolute before:top-0 before:left-0 before:bg-foreground before:transition-all before:ease-in-out before:duration-300 ",
                             active === 1 
                                 ? "before:h-full before:opacity-100"
                                 : "before:h-0 before:opacity-0"
@@ -79,7 +79,7 @@ const ContentAccordionDemo = () => {
                     <AccordionItem 
                         value="2"
                         className={cn(
-                            "relative grow text-lg group before:content[''] before:w-[2px] before:absolute before:top-0 before:left-0 before:bg-foreground before:transition-all before:ease-in-out before:duration-300 ",
+                            "relative grow flex flex-col justify-center text-lg group before:content[''] before:w-[2px] before:absolute before:top-0 before:left-0 before:bg-foreground before:transition-all before:ease-in-out before:duration-300 ",
                             active === 2 
                                 ? "before:h-full before:opacity-100"
                                 : "before:h-0 before:opacity-0"
@@ -100,7 +100,7 @@ const ContentAccordionDemo = () => {
                     <AccordionItem 
                         value="3"
                         className={cn(
-                            "relative grow text-lg group before:content[''] before:w-[2px] before:absolute before:top-0 before:left-0 before:bg-foreground before:transition-all before:ease-in-out before:duration-300 ",
+                            "relative grow flex flex-col justify-center text-lg group before:content[''] before:w-[2px] before:absolute before:top-0 before:left-0 before:bg-foreground before:transition-all before:ease-in-out before:duration-300 ",
                             active === 3 
                                 ? "before:h-full before:opacity-100"
                                 : "before:h-0 before:opacity-0"

gluons/demo/header-demo.tsx

@@ -9,7 +9,7 @@ import {
 
 const HeaderDemo =  () => {
     return (
-        <>
+        <div className="h-full bg-background">
             <Header>
                 <HeaderContainer>
                     <HeaderLeft>
@@ -24,24 +24,24 @@ const HeaderDemo =  () => {
                     </HeaderRight>
                 </HeaderContainer>
             </Header>
-            <main className="container mx-auto h-full max-h-[500px] pt-8 px-4 @md:px-6 @lg:px-8">
-                <div className="flex flex-col gap-3 @lg:gap-4">
+            <main className="@container/main mx-auto h-auto pt-8 bg-background">
+                <div className="flex flex-col gap-3 px-4 @md/main:px-6 @lg/main:px-8">
                     <div className="flex h-12 bg-muted rounded-md" />
-                    <div className="grid grid-cols-3 gap-3 @lg:gap-4">
+                    <div className="grid grid-cols-3 gap-3">
                         {Array.from({ length: 3 }).map((_, i) => (
                             <div key={i} className="col-span-1 bg-muted justify-center items-center aspect-square rounded-md" />
                         ))}
                     </div>
                     <div className="flex h-64 bg-muted rounded-md" />
-                    <div className="grid grid-cols-2 gap-3 @lg:gap-4">
+                    <div className="grid grid-cols-2 gap-3">
                         {Array.from({ length: 4 }).map((_, i) => (
                             <div key={i} className="col-span-1 bg-muted justify-center items-center aspect-square rounded-md" />
                         ))}
                     </div>
                     <div className="flex h-64 bg-muted rounded-md mb-8" />
                 </div>
             </main>
-        </>
+        </div>
     )
 }
 

gluons/demo/hover-grid-demo.tsx

@@ -14,7 +14,7 @@ import { ArrowUpRight } from "lucide-react";
 
 export const HoverGridDemo = () => {
     return (
-        <HoverGrid>
+        <HoverGrid className="@md:grid-cols-2 @lg:grid-cols-3">
             <HoverGridCell className="col-span-3 @lg:col-span-1">
                 <HoverGridHeader>
                     <HoverGridLeader>