added sign in

zoomment · Mar 3, 2024 · 246f696 · 246f696
1 parent fe36963
commit 246f696
Show file tree

Hide file tree

Showing 14 changed files with 283 additions and 185 deletions.
diff --git a/app/auth/page.tsx b/app/auth/page.tsx
@@ -0,0 +1,89 @@
+'use client';
+import React, { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { Button, Layout, Input, Form, theme } from 'antd';
+import Title from 'antd/es/typography/Title';
+import { request } from '@/utils';
+
+const Auth: React.FC = () => {
+  const [email, setEmail] = useState('');
+  const [submitted, setSubmitted] = useState(false);
+  const router = useRouter();
+  const {
+    token: { colorBgContainer, borderRadiusLG },
+  } = theme.useToken();
+
+  const onFinish = async (values: any) => {
+    await request({
+      path: '/users/auth',
+      method: 'POST',
+      data: values,
+    });
+
+    setEmail(values.email);
+    setSubmitted(true);
+  };
+
+  return (
+    <Layout
+      style={{
+        minHeight: '100vh',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <div
+        style={{
+          padding: '50px',
+          minHeight: 360,
+          maxWidth: 550,
+          width: '100%',
+          marginBottom: 100,
+          background: colorBgContainer,
+          borderRadius: borderRadiusLG,
+        }}
+      >
+        {submitted ? (
+          <>
+            <Title>Check your inbox. </Title>
+            <p style={{ marginBottom: 30 }}>
+              Click the link we sent to {email} to sign in.
+            </p>
+            <Button
+              size="large"
+              type="primary"
+              onClick={() => router.push('/')}
+            >
+              Back to Home
+            </Button>
+          </>
+        ) : (
+          <>
+            <Title>Sign in with email</Title>
+            <p style={{ marginBottom: 30 }}>
+              Enter the email address and we’ll send a magic link to your inbox.
+            </p>
+            <Form size="large" onFinish={onFinish}>
+              <Form.Item
+                style={{ marginBottom: 40 }}
+                name={'email'}
+                rules={[
+                  { required: true, message: 'Email is required!' },
+                  { type: 'email', message: 'Email is not a valid!' },
+                ]}
+              >
+                <Input placeholder="Your email" />
+              </Form.Item>
+              <Button type="primary" htmlType="submit">
+                Continue
+              </Button>
+            </Form>
+          </>
+        )}
+      </div>
+    </Layout>
+  );
+};
+
+export default Auth;
diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
@@ -1,75 +1,29 @@
 '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';
+import React from 'react';
 
-const { Header, Content, Footer, Sider } = Layout;
-
-type MenuItem = Required<MenuProps>['items'][number];
+import { Breadcrumb, Layout, theme } from 'antd';
+import Profile from '@/components/Profile';
 
-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 { Header, Content, Footer, Sider } = Layout;
 
 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)}
-      >
+      <Sider>
         <div className="demo-logo-vertical" />
-        <Menu
-          theme="dark"
-          defaultSelectedKeys={['1']}
-          mode="inline"
-          items={items}
-        />
       </Sider>
       <Layout>
-        <Header style={{ padding: 0, background: colorBgContainer }} />
+        <Header style={{ padding: '0 20px', background: colorBgContainer }}>
+          <Profile />
+        </Header>
         <Content style={{ margin: '0 16px' }}>
           <Breadcrumb style={{ margin: '16px 0' }}>
             <Breadcrumb.Item>User</Breadcrumb.Item>
-            <Breadcrumb.Item>Bill</Breadcrumb.Item>
+            <Breadcrumb.Item>Sites</Breadcrumb.Item>
           </Breadcrumb>
           <div
             style={{
@@ -79,7 +33,7 @@ const Dashboard: React.FC = () => {
               borderRadius: borderRadiusLG,
             }}
           >
-            Bill is a cat.
+            No added site yet.
           </div>
         </Content>
         <Footer style={{ textAlign: 'center' }}></Footer>

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,4 +1,5 @@
 import type { Metadata } from 'next';
+
 import { AntdRegistry } from '@ant-design/nextjs-registry';
 import './globals.css';
 

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,4 +1,4 @@
-import Builder from '@/components/Builder';
+import Example from '@/components/Example';
 import { Metadata } from 'next';
 import Title from 'antd/es/typography/Title';
 import { Tag } from 'antd';
@@ -12,7 +12,7 @@ export const metadata: Metadata = {
 
 export default function Home() {
   return (
-    <main className="max-w-screen-sm py-10 mx-auto">
+    <main className="max-w-screen-sm py-12 mx-auto">
       <div className="mb-5 flex flex-col justify-center items-center">
         <Title
           style={{
@@ -38,7 +38,7 @@ export default function Home() {
           Add Comments to Your Website
         </Title>
       </div>
-      <Builder />
+      <Example lng="en" theme="light" />
     </main>
   );
 }
diff --git a/components/Builder.tsx b/components/Builder.tsx
diff --git a/components/Example.tsx b/components/Example.tsx
diff --git a/components/Example/index.tsx b/components/Example/index.tsx
@@ -0,0 +1,35 @@
+'use client';
+import Script from 'next/script';
+
+export default function Example({
+  lng,
+  theme,
+}: {
+  lng: string;
+  theme: string;
+}) {
+  return (
+    <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="❤️,😀,🪄,🥸,💡,🤔,💩,😢"
+  ></div>
+  <script src='https://cdn.zoomment.com/zoomment.min.js'></script>
+        `}
+      </pre>
+
+      <div
+        id="zoomment"
+        className="w-full"
+        data-theme={theme}
+        data-language={lng}
+        data-emotions="❤️,😀,🪄,🥸,💡,🤔,💩,😢"
+      ></div>
+      <Script src="https://cdn.zoomment.com/zoomment.min.js"></Script>
+    </div>
+  );
+}