jsonnext · acao · Apr 28, 2024 · Apr 28, 2024 · Apr 28, 2024 · Apr 28, 2024
diff --git a/app/globals.css b/app/globals.css
@@ -1,76 +1,111 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
+@tailwind form;
+
 @layer base {
   :root {
     --background: 0 0% 100%;
     --foreground: 0 0% 3.9%;
 
     --card: 0 0% 100%;
     --card-foreground: 0 0% 3.9%;
- 
+
     --popover: 0 0% 100%;
     --popover-foreground: 0 0% 3.9%;
- 
+
     --primary: 0 0% 9%;
     --primary-foreground: 0 0% 98%;
- 
+
     --secondary: 0 0% 96.1%;
     --secondary-foreground: 0 0% 9%;
- 
+
     --muted: 0 0% 96.1%;
     --muted-foreground: 0 0% 45.1%;
- 
+
     --accent: 0 0% 96.1%;
     --accent-foreground: 0 0% 9%;
- 
+
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
 
     --border: 0 0% 89.8%;
     --input: 0 0% 89.8%;
     --ring: 0 0% 3.9%;
- 
+
     --radius: 0.5rem;
   }
- 
-  .dark {
+
+   .dark {
     --background: 0 0% 3.9%;
     --foreground: 0 0% 98%;
- 
+
     --card: 0 0% 3.9%;
     --card-foreground: 0 0% 98%;
- 
+
     --popover: 0 0% 3.9%;
     --popover-foreground: 0 0% 98%;
- 
+
     --primary: 0 0% 98%;
     --primary-foreground: 0 0% 9%;
- 
+
     --secondary: 0 0% 14.9%;
     --secondary-foreground: 0 0% 98%;
- 
+
     --muted: 0 0% 14.9%;
     --muted-foreground: 0 0% 63.9%;
-
+
+
     --accent: 0 0% 14.9%;
     --accent-foreground: 0 0% 98%;
- 
+
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 0 0% 98%;
- 
+
     --border: 0 0% 14.9%;
     --input: 0 0% 14.9%;
     --ring: 0 0% 83.1%;
+
+
   }
+  .dark [type="text"] {
+    color: hsl(var(--background));
+    background-color: hsl(var(--background)) !important;
+  }
+
 }
- 
+@import ('~lucide-static/font/Lucide.css');
 @layer base {
   * {
     @apply border-border;
   }
   body {
     @apply bg-background text-foreground;
   }
-}
+  .cm-lintRange-error {
+    text-decoration: underline wavy red;
+  }
+  .cm-tooltip,
+  .cm6-json-schema-hover,
+  .cm-editor .cm-diagnostic-error {
+    padding: 0.5rem;
+  }
+  .cm-editor .cm6-json-schema-hover--code-wrapper {
+    font-size: 0.9em;
+    font-family: 'Courier New', Courier, monospace;
+    padding: 0.5rem;
+    @apply bg-foreground text-background
+  }
+  .cm6-json-schema-hover--description {
+    margin-bottom: 0.5rem;
+  }
+  .dark {
+    input::placeholder, textarea::placeholder {
+      color: hsl(var(--muted-foreground));
+    }
+  }
+  .vertical-layout-item header {
+    display: flex;
+  }
+
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,13 +1,15 @@
-import "@/styles/globals.css"
 import { Metadata } from "next"
 
 import { siteConfig } from "@/config/site"
 import { fontSans } from "@/lib/fonts"
 import { cn } from "@/lib/utils"
+import { Toaster } from "@/components/ui/toaster"
 import { SiteHeader } from "@/components/nav/site-header"
 import { TailwindIndicator } from "@/components/nav/tailwind-indicator"
 import { ThemeProvider } from "@/components/providers/theme-provider"
-import { Toaster } from "@/components/ui/toaster"
+
+import "@/styles/globals.css"
+import { Suspense } from "react"
 
 export const metadata: Metadata = {
   title: {
@@ -34,19 +36,42 @@ export default function RootLayout({ children }: RootLayoutProps) {
   return (
     <>
       <html lang="en" suppressHydrationWarning>
-        <head />
+        <head>
+          <link
+            rel="stylesheet"
+            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
+          />
+          <link
+            href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap"
+            rel="stylesheet"
+          />
+          <link
+            rel="preconnect"
+            href="https://kit.fontawesome.com"
+            crossOrigin="anonymous"
+          />
+          {/* <script
+            src="https://kit.fontawesome.com/1e1f25269b.js"
+            crossOrigin="anonymous"
+          ></script> */}
+        </head>
         <body
           className={cn(
             "min-h-screen bg-background font-sans antialiased",
             fontSans.variable
           )}
         >
           <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-              <div className="relative flex min-h-screen flex-col">
-                <SiteHeader />
-                <div className="flex">{children}</div>
-              </div>
-              <TailwindIndicator />
+            <div className="relative flex min-h-screen flex-col">
+              <SiteHeader />
+              <Suspense fallback={<div>Loading...</div>}>
+                <div className="flex flex-col">
+                  {children}
+
+                </div>
+              </Suspense>
+            </div>
+            <TailwindIndicator />
           </ThemeProvider>
           <Toaster />
         </body>

diff --git a/app/manifest.ts b/app/manifest.ts
@@ -0,0 +1,21 @@
+import { MetadataRoute } from 'next'
+import { siteConfig } from '@/config/site'
+
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    name: siteConfig.name,
+    short_name: 'Next.js App',
+    description: siteConfig.description,
+    start_url: '/',
+    display: 'standalone',
+    background_color: '#fff',
+    theme_color: '#fff',
+    icons: [
+      {
+        src: '/favicon.ico',
+        sizes: 'any',
+        type: 'image/x-icon',
+      },
+    ],
+  }
+}
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,25 +1,51 @@
-import { JSONSchemaEditor } from "@/components/editor/json-schema-editor"
-import { JSONValueEditor } from "@/components/editor/json-value-editor"
+"use client"
+
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable"
+import dynamic from "next/dynamic"
+
+
+const JSONSchemaEditor = dynamic(
+  async () => (await import("@/components/editor/json-schema-editor")).JSONSchemaEditor,
+  { ssr: false }
+)
+const JSONValueEditor = dynamic(
+  async () => (await import("@/components/editor/json-value-editor")).JSONValueEditor,
+  { ssr: false }
+)
 
 export default function IndexPage({
   searchParams,
 }: {
   searchParams: Record<string, string>
 }) {
+  const BREAKPOINTS = { mobile: 0, tablet: 768, desktop: 1280 }
+
+  // const { breakpoint } = useBreakpoint(BREAKPOINTS, "desktop")
   return (
-    <section className="grid h-[92vh] w-full grid-cols-2 gap-2 pb-8">
-      <div
-        id="json-schema-editor"
-        className="flex h-full flex-col overflow-scroll "
-      >
-        <JSONSchemaEditor url={searchParams.url} />
-      </div>
-      <div
-        id="json-value-editor"
-        className="flex h-full flex-col overflow-scroll "
+    <div className="h-[92dvh] w-full ">
+      <ResizablePanelGroup
+        direction={"horizontal"}
+        className="grid  w-full gap-2 pb-8 md:grid-cols-2"
       >
-        <JSONValueEditor />
-      </div>
-    </section>
+        <ResizablePanel
+          id="json-schema-editor"
+          className="full flex w-max flex-col overflow-scroll md:h-full md:w-[50vw] md:min-w-[300px]"
+        >
+          <JSONSchemaEditor url={searchParams.url} />
+        </ResizablePanel>
+        <ResizableHandle withHandle />
+        <ResizablePanel
+          id="json-value-editor"
+          className="flex h-[50hw] flex-col overflow-scroll md:h-full md:min-w-[300px]"
+        >
+          <JSONValueEditor />
+        </ResizablePanel>
+      </ResizablePanelGroup>
+
+    </div>
   )
 }