just experiments

zoomment · Feb 27, 2024 · f45644c · f45644c
1 parent 913ddc3
commit f45644c
Show file tree

Hide file tree

Showing 7 changed files with 1,115 additions and 88 deletions.
diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
@@ -0,0 +1,91 @@
+'use client';
+import React, { useState } from 'react';
+import {
+  DesktopOutlined,
+  FileOutlined,
+  PieChartOutlined,
+  TeamOutlined,
+  UserOutlined,
+} from '@ant-design/icons';
+import type { MenuProps } from 'antd';
+import { Breadcrumb, Layout, Menu, theme } from 'antd';
+
+const { Header, Content, Footer, Sider } = Layout;
+
+type MenuItem = Required<MenuProps>['items'][number];
+
+function getItem(
+  label: React.ReactNode,
+  key: React.Key,
+  icon?: React.ReactNode,
+  children?: MenuItem[]
+): MenuItem {
+  return {
+    key,
+    icon,
+    children,
+    label,
+  } as MenuItem;
+}
+
+const items: MenuItem[] = [
+  getItem('Option 1', '1', <PieChartOutlined />),
+  getItem('Option 2', '2', <DesktopOutlined />),
+  getItem('User', 'sub1', <UserOutlined />, [
+    getItem('Tom', '3'),
+    getItem('Bill', '4'),
+    getItem('Alex', '5'),
+  ]),
+  getItem('Team', 'sub2', <TeamOutlined />, [
+    getItem('Team 1', '6'),
+    getItem('Team 2', '8'),
+  ]),
+  getItem('Files', '9', <FileOutlined />),
+];
+
+const Dashboard: React.FC = () => {
+  const [collapsed, setCollapsed] = useState(false);
+  const {
+    token: { colorBgContainer, borderRadiusLG },
+  } = theme.useToken();
+
+  return (
+    <Layout style={{ minHeight: '100vh' }}>
+      <Sider
+        collapsible
+        collapsed={collapsed}
+        onCollapse={(value) => setCollapsed(value)}
+      >
+        <div className="demo-logo-vertical" />
+        <Menu
+          theme="dark"
+          defaultSelectedKeys={['1']}
+          mode="inline"
+          items={items}
+        />
+      </Sider>
+      <Layout>
+        <Header style={{ padding: 0, background: colorBgContainer }} />
+        <Content style={{ margin: '0 16px' }}>
+          <Breadcrumb style={{ margin: '16px 0' }}>
+            <Breadcrumb.Item>User</Breadcrumb.Item>
+            <Breadcrumb.Item>Bill</Breadcrumb.Item>
+          </Breadcrumb>
+          <div
+            style={{
+              padding: 24,
+              minHeight: 360,
+              background: colorBgContainer,
+              borderRadius: borderRadiusLG,
+            }}
+          >
+            Bill is a cat.
+          </div>
+        </Content>
+        <Footer style={{ textAlign: 'center' }}></Footer>
+      </Layout>
+    </Layout>
+  );
+};
+
+export default Dashboard;
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,9 +1,7 @@
 import type { Metadata } from 'next';
-import { Inter } from 'next/font/google';
+import { AntdRegistry } from '@ant-design/nextjs-registry';
 import './globals.css';
 
-const inter = Inter({ subsets: ['latin'] });
-
 export const metadata: Metadata = {
   title: 'Create Next App',
   description: 'Generated by create next app',
@@ -16,7 +14,9 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" data-mode="light">
-      <body className={inter.className}>{children}</body>
+      <body>
+        <AntdRegistry>{children}</AntdRegistry>
+      </body>
     </html>
   );
 }
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,5 +1,7 @@
 import Builder from '@/components/Builder';
 import { Metadata } from 'next';
+import Title from 'antd/es/typography/Title';
+import { Flex } from 'antd';
 
 // either Static metadata
 export const metadata: Metadata = {
@@ -10,7 +12,10 @@ export const metadata: Metadata = {
 
 export default function Home() {
   return (
-    <main className="container py-10 px-4">
+    <main className="max-w-screen-sm py-10 mx-auto">
+      <Flex justify="center" className="mb-5">
+        <Title level={3}>Add Comments to Your Website</Title>
+      </Flex>
       <Builder />
     </main>
   );

diff --git a/components/Builder.tsx b/components/Builder.tsx
@@ -2,31 +2,47 @@
 
 import { useState } from 'react';
 import Example from './Example';
+import { Select, Button } from 'antd';
 
 export default function Builder() {
   const [theme, setTheme] = useState('light');
   const [lng, setLng] = useState('en');
 
   return (
     <>
-      <div className="flex flex-wrap">
-        <div className="flex-1 px-4">
-          <div className="mb-5">
+      <div className="px-5">
+        <pre className=" overflow-auto mb-10 text-sm text-left items-center bg-gray-800 text-white rounded-md px-2 w-full">
+          {`
+  <div
+    id="zoomment"
+    data-theme="${theme}"
+    data-language="${lng}"
+    data-emotions="❤️,😀,🪄,🥸,💡,🤔,💩,😢"
+    data-api-url="https://api.zoomment.com/api"
+  ></div>
+  <script src='https://cdn.zoomment.com/zoomment.min.js'></script>
+        `}
+        </pre>
+
+        <Example lng={lng} theme={theme} key={lng + theme} />
+
+        <div className=" px-4">
+          {/* <div className="mb-5">
             <label
               htmlFor="theme"
               className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
             >
               Select Theme
             </label>
-            <select
-              className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+            <Select
               id="theme"
               value={theme}
-              onChange={(e) => setTheme(e.target.value)}
-            >
-              <option value="light">Light</option>
-              <option value="dark">Dark</option>
-            </select>
+              onChange={(value) => setTheme(value)}
+              options={[
+                { value: 'light', label: 'Light' },
+                { value: 'dark', label: 'Dark' },
+              ]}
+            />
           </div>
           <div className="mb-5">
             <label
@@ -35,42 +51,19 @@ export default function Builder() {
             >
               Select Language
             </label>
-            <select
+            <Select
               id="language"
-              className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
               value={lng}
-              onChange={(e) => setLng(e.target.value)}
-            >
-              <option value="en">English</option>
-              <option value="hy">Armenian</option>
-              <option value="hyw">Armenian (classic)</option>
-              <option value="ru">Russian</option>
-              <option value="zh">Simplified Chinese</option>
-            </select>
-          </div>
-          <div className="mb-10">
-            <label className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400">
-              Your Code
-            </label>
-            <pre className="text-sm sm:text-base inline-flex text-left items-center bg-gray-800 text-white rounded-md px-2 w-full">
-              {`
-  <div
-    id="zoomment"
-    data-theme="${theme}"
-    data-language="${lng}"
-    data-emotions="❤️,😀,🪄,🥸,💡,🤔,💩,😢"
-    data-api-url="https://api.zoomment.com/api"
-  ></div>
-  <script src='https://cdn.zoomment.com/zoomment.min.js'></script>
-        `}
-            </pre>
-          </div>
-        </div>
-        <div className="flex-1 px-4">
-          <label className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400">
-            Preview
-          </label>
-          <Example lng={lng} theme={theme} key={lng + theme} />
+              onChange={(value) => setLng(value)}
+              options={[
+                { value: 'en', label: 'English' },
+                { value: 'hy', label: 'Armenian' },
+                { value: 'hyw', label: 'Armenian (classic)' },
+                { value: 'ru', label: 'Russian' },
+                { value: 'zh', label: 'Simplified Chinese' },
+              ]}
+            />
+          </div> */}
         </div>
       </div>
     </>

diff --git a/components/Example.tsx b/components/Example.tsx
@@ -1,4 +1,5 @@
 'use client';
+import Script from 'next/script';
 
 export default function Example({
   lng,
@@ -8,34 +9,39 @@ export default function Example({
   theme: string;
 }) {
   return (
-    <iframe
-      key={lng + theme}
-      className="w-full h-full min-h-80"
-      srcDoc={`
-              <html>
-              <head>
-                <link rel="preconnect" href="https://fonts.googleapis.com">
-                <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-                <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100&family=Noto+Sans:ital@0;1&display=swap" rel="stylesheet">
-                <style>
-                  * {
-                    font-family: 'Noto Sans';
-                  }
-                </style>
-              </head>
-              <body>
-                <div
-                  id="zoomment"
-                  className="w-full"
-                  data-theme=${theme}
-                  data-language=${lng}
-                  data-emotions="❤️,😀,🪄,🥸,💡,🤔,💩,😢"
-                  data-api-url="https://api.zoomment.com/api"
-                  ></div>
-                  <script src="https://cdn.zoomment.com/zoomment.min.js" ></script>
-              </body>
-            `}
-      frameBorder="0"
-    ></iframe>
+    // <iframe
+    //   key={lng + theme}
+    //   style={{ height: '400px' }}
+    //   className="w-full"
+    //   srcDoc={`
+    //           <html>
+    //           <head>
+    //             <link rel="preconnect" href="https://fonts.googleapis.com">
+    //             <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    //             <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100&family=Noto+Sans:ital@0;1&display=swap" rel="stylesheet">
+    //             <style>
+    //               * {
+    //                 font-family: 'Noto Sans';
+    //               }
+    //             </style>
+    //           </head>
+    //           <body>
+
+    //           </body>
+    //         `}
+    //   frameBorder="0"
+    // ></iframe>
+
+    <>
+      <div
+        id="zoomment"
+        className="w-full"
+        data-theme={theme}
+        data-language={lng}
+        data-emotions="❤️,😀,🪄,🥸,💡,🤔,💩,😢"
+        data-api-url="https://api.zoomment.com/api"
+      ></div>
+      <Script src="https://cdn.zoomment.com/zoomment.min.js"></Script>
+    </>
   );
 }