feat: added basic dashboard layout

vincent623 · Mar 9, 2023 · 11cf1ba · 11cf1ba
1 parent 1e6d0e2
commit 11cf1ba
Show file tree

Hide file tree

Showing 9 changed files with 199 additions and 24 deletions.
diff --git a/.example.env b/.example.env
@@ -11,3 +11,4 @@ NEXT_PUBLIC_SUPABASE_URL="https://${SUPABASE_HOSTNAME}"
 NEXT_PUBLIC_SUPABASE_ANON_KEY=""
 SENTRY_AUTH_TOKEN=
 NEXT_PUBLIC_SEGMENT_WRITEKEY=
+NEXT_PUBLIC_SITE_URL=
diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -5,7 +5,7 @@ import { buttonVariants } from "@/components/ui/button";
 
 export default function Footer() {
   return (
-    <footer className="mt-5 mb-3 flex h-16 w-full flex-col items-center justify-between space-y-3 px-3 pt-4 text-center text-slate-400 lg:px-12 sm:mb-0 sm:h-20 sm:flex-row sm:pt-2">
+    <footer className="z-50 mt-5 mb-3 flex h-16 w-full flex-col items-center justify-between space-y-3 bg-white px-3 pt-4 text-center text-slate-400 sm:mb-0 sm:h-20 sm:flex-row sm:pt-2 lg:px-12">
       <div>
         Thanks to{" "}
         <a
@@ -27,11 +27,7 @@ export default function Footer() {
         </a>
       </div>
       <div className="flex items-center space-x-1">
-        <Link
-          href="/privacy"
-          className="group"
-          aria-label="隐私声明"
-        >
+        <Link href="/privacy" className="group" aria-label="隐私声明">
           Privacy Statement
         </Link>
         <Link

diff --git a/components/context/analytics.tsx b/components/context/analytics.tsx
@@ -3,6 +3,7 @@
 import React from "react";
 import { AnalyticsBrowser } from "@segment/analytics-next";
 import { useCDNUrl, useWriteKey } from "~/hooks/useConfig";
+import { isDev } from "~/utils/env";
 
 const AnalyticsContext = React.createContext<{
   analytics: AnalyticsBrowser;
@@ -19,10 +20,11 @@ export const AnalyticsProvider: React.FC<{ children: React.ReactElement }> = ({
   const [cdnURL, setCDNUrl] = useCDNUrl();
 
   const analytics = React.useMemo(() => {
-    console.log(
-      `AnalyticsBrowser loading...`,
-      JSON.stringify({ writeKey, cdnURL })
-    );
+    isDev &&
+      console.log(
+        `AnalyticsBrowser loading...`,
+        JSON.stringify({ writeKey, cdnURL })
+      );
     return AnalyticsBrowser.load({ writeKey, cdnURL });
   }, [writeKey, cdnURL]);
   return (

diff --git a/components/sign-in-modal.tsx b/components/sign-in-modal.tsx
@@ -6,6 +6,8 @@ import Link from "next/link";
 import React, { Dispatch, SetStateAction, useCallback, useMemo, useState } from "react";
 import Modal from "~/components/shared/modal";
 import { BASE_DOMAIN, LOGIN_LIMIT_COUNT } from "~/utils/constants";
+import { isDev } from "~/utils/env";
+import { getRedirectURL } from "~/utils/getRedirectUrl";
 
 const SignInModal = ({
   showSignInModal,
@@ -15,6 +17,7 @@ const SignInModal = ({
   setShowSignInModal: Dispatch<SetStateAction<boolean>>;
 }) => {
   const supabaseClient = useSupabaseClient();
+  const redirectURL = getRedirectURL();
   return (
     <Modal showModal={showSignInModal} setShowModal={setShowSignInModal}>
       <div className="w-full overflow-hidden shadow-xl md:max-w-md md:rounded-2xl md:border md:border-gray-200">
@@ -36,7 +39,7 @@ const SignInModal = ({
         <div className="flex flex-col space-y-4 bg-gray-50 px-4 py-8 md:px-16">
           <Auth
             supabaseClient={supabaseClient}
-            // redirectTo={isDev ? window?.location?.origin : BASE_DOMAIN}
+            redirectTo={redirectURL}
             localization={{
               variables: {
                 sign_up: {

diff --git a/components/user-dropdown.tsx b/components/user-dropdown.tsx
@@ -1,6 +1,7 @@
 import { useSupabaseClient, useUser } from "@supabase/auth-helpers-react";
 import { motion } from "framer-motion";
 import { LayoutDashboard, LogOut } from "lucide-react";
+import Link from "next/link";
 import { useState } from "react";
 import Popover from "~/components/shared/popover";
 import { FADE_IN_ANIMATION_SETTINGS } from "~/utils/constants";
@@ -28,20 +29,13 @@ export default function UserDropdown() {
       <Popover
         content={
           <div className="w-full rounded-md bg-white p-2 sm:w-56">
-            {/* <Link
-              className="flex items-center justify-start space-x-2 relative w-full rounded-md p-2 text-left text-sm transition-all duration-75 hover:bg-gray-100"
-              href="/dashboard"
-            >
-              <LayoutDashboard className="h-4 w-4" />
-              <p className="text-sm">Dashboard</p>
-            </Link> */}
-            <button
-              className="relative flex w-full cursor-not-allowed items-center justify-start space-x-2 rounded-md p-2 text-left text-sm transition-all duration-75 hover:bg-gray-100"
-              disabled
+            <Link
+              href="/user/dashboard"
+              className="relative flex w-full items-center justify-start space-x-2 rounded-md p-2 text-left text-sm transition-all duration-75 hover:bg-gray-100"
             >
               <LayoutDashboard className="h-4 w-4" />
               <p className="text-sm">个人中心</p>
-            </button>
+            </Link>
             <button
               className="relative flex w-full items-center justify-start space-x-2 rounded-md p-2 text-left text-sm transition-all duration-75 hover:bg-gray-100"
               onClick={() => signOut({ redirect: false })}

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -49,7 +49,7 @@ function MyApp({
               )}
             >
               <Header showSingIn={showSingIn} />
-              <main className="mx-auto flex max-w-5xl flex-1 flex-col justify-center bg-white text-slate-900 antialiased dark:bg-slate-900 dark:text-slate-50">
+              <main className="mx-auto w-full flex max-w-5xl flex-1 flex-col justify-center bg-white text-slate-900 antialiased dark:bg-slate-900 dark:text-slate-50">
                 <Component {...pageProps} showSingIn={showSingIn} />
                 <Analytics />
                 <CommandMenu />

diff --git a/pages/user/dashboard.tsx b/pages/user/dashboard.tsx
@@ -0,0 +1,168 @@
+export default () => {
+  return (
+    <>
+      <button
+        data-drawer-target="default-sidebar"
+        data-drawer-toggle="default-sidebar"
+        aria-controls="default-sidebar"
+        type="button"
+        className="mt-2 ml-3 inline-flex items-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600 md:hidden"
+      >
+        <span className="sr-only">Open sidebar</span>
+        <svg
+          className="h-6 w-6"
+          aria-hidden="true"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            fill-rule="evenodd"
+            d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"
+          ></path>
+        </svg>
+      </button>
+
+      <aside
+        id="default-sidebar"
+        className="fixed top-16 left-0 z-40 h-screen w-64 -translate-x-full transition-transform sm:translate-x-0"
+        aria-label="Sidebar"
+      >
+        <div className="h-full overflow-y-auto bg-gray-50 px-3 py-4 dark:bg-gray-800">
+          <ul className="space-y-2">
+            <li>
+              <a
+                href="#"
+                className="flex items-center rounded-lg p-2 text-base font-normal text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
+              >
+                <svg
+                  aria-hidden="true"
+                  className="h-6 w-6 flex-shrink-0 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path d="M8.707 7.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l2-2a1 1 0 00-1.414-1.414L11 7.586V3a1 1 0 10-2 0v4.586l-.293-.293z"></path>
+                  <path d="M3 5a2 2 0 012-2h1a1 1 0 010 2H5v7h2l1 2h4l1-2h2V5h-1a1 1 0 110-2h1a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V5z"></path>
+                </svg>
+                <span className="ml-3 flex-1 whitespace-nowrap">已识别</span>
+                <span className="ml-3 inline-flex h-3 w-3 items-center justify-center rounded-full bg-blue-100 p-3 text-sm font-medium text-blue-800 dark:bg-blue-900 dark:text-blue-300">
+                  3
+                </span>
+              </a>
+            </li>
+            <li>
+              <a
+                href="#"
+                className="flex items-center rounded-lg p-2 text-base font-normal text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
+              >
+                <svg
+                  aria-hidden="true"
+                  className="h-6 w-6 flex-shrink-0 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM11 5a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V5zM11 13a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path>
+                </svg>
+                <span className="ml-3 flex-1 whitespace-nowrap">导出笔记</span>
+                <span className="ml-3 inline-flex items-center justify-center rounded-full bg-gray-200 px-2 text-sm font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-300">
+                  Pro
+                </span>
+              </a>
+            </li>
+            <li>
+              <a
+                href="/shop"
+                className="flex items-center rounded-lg p-2 text-base font-normal text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
+              >
+                <svg
+                  aria-hidden="true"
+                  className="h-6 w-6 flex-shrink-0 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M10 2a4 4 0 00-4 4v1H5a1 1 0 00-.994.89l-1 9A1 1 0 004 18h12a1 1 0 00.994-1.11l-1-9A1 1 0 0015 7h-1V6a4 4 0 00-4-4zm2 5V6a2 2 0 10-4 0v1h4zm-6 3a1 1 0 112 0 1 1 0 01-2 0zm7-1a1 1 0 100 2 1 1 0 000-2z"
+                    clip-rule="evenodd"
+                  ></path>
+                </svg>
+                <span className="ml-3 flex-1 whitespace-nowrap">
+                  购买次数(时长)
+                </span>
+              </a>
+            </li>
+            <li>
+              <a
+                href="#"
+                className="flex cursor-not-allowed items-center rounded-lg p-2 text-base font-normal text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
+              >
+                <svg
+                  aria-hidden="true"
+                  className="h-6 w-6 flex-shrink-0 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
+                    clip-rule="evenodd"
+                  ></path>
+                </svg>
+                <span className="ml-3 flex-1 whitespace-nowrap">邀请他人</span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </aside>
+
+      <div className="p-4">
+        <div className="rounded-lg border-2 border-dashed border-gray-200 p-4 dark:border-gray-700">
+          <div className="mb-4 grid grid-cols-3 gap-4">
+            <div className="flex h-24 items-center justify-center rounded bg-gray-50 dark:bg-gray-800">
+              <p className="text-2xl text-gray-400 dark:text-gray-500">+</p>
+            </div>
+            <div className="flex h-24 items-center justify-center rounded bg-gray-50 dark:bg-gray-800">
+              <p className="text-2xl text-gray-400 dark:text-gray-500">+</p>
+            </div>
+            <div className="flex h-24 items-center justify-center rounded bg-gray-50 dark:bg-gray-800">
+              <p className="text-2xl text-gray-400 dark:text-gray-500">+</p>
+            </div>
+          </div>
+          <div className="mb-4 flex h-48 items-center justify-center rounded bg-gray-50 dark:bg-gray-800">
+            <p className="text-2xl text-gray-400 dark:text-gray-500">+</p>
+          </div>
+          <div className="mb-4 grid grid-cols-2 gap-4">
+            <div className="flex h-28 items-center justify-center rounded bg-gray-50 dark:bg-gray-800">
+              <p className="text-2xl text-gray-400 dark:text-gray-500">+</p>
+            </div>
+            <div className="flex h-28 items-center justify-center rounded bg-gray-50 dark:bg-gray-800">
+              <p className="text-2xl text-gray-400 dark:text-gray-500">+</p>
+            </div>
+          </div>
+          <div className="mb-4 flex h-48 items-center justify-center rounded bg-gray-50 dark:bg-gray-800">
+            <p className="text-2xl text-gray-400 dark:text-gray-500">+</p>
+          </div>
+          <div className="grid grid-cols-2 gap-4">
+            <div className="flex h-28 items-center justify-center rounded bg-gray-50 dark:bg-gray-800">
+              <p className="text-2xl text-gray-400 dark:text-gray-500">+</p>
+            </div>
+            <div className="flex h-28 items-center justify-center rounded bg-gray-50 dark:bg-gray-800">
+              <p className="text-2xl text-gray-400 dark:text-gray-500">+</p>
+            </div>
+            <div className="flex h-28 items-center justify-center rounded bg-gray-50 dark:bg-gray-800">
+              <p className="text-2xl text-gray-400 dark:text-gray-500">+</p>
+            </div>
+            <div className="flex h-28 items-center justify-center rounded bg-gray-50 dark:bg-gray-800">
+              <p className="text-2xl text-gray-400 dark:text-gray-500">+</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -32,7 +32,7 @@ module.exports = {
     },
   },
   plugins: [
-    // require("flowbite/plugin"),
+    require("flowbite/plugin"),
     require("tailwindcss-animate"),
   ],
 };
diff --git a/utils/getRedirectUrl.ts b/utils/getRedirectUrl.ts
@@ -0,0 +1,11 @@
+export const getRedirectURL = () => {
+  let url =
+    process?.env?.NEXT_PUBLIC_SITE_URL ?? // Set this to your site URL in production env.
+    process?.env?.NEXT_PUBLIC_VERCEL_URL ?? // Automatically set by Vercel.
+    "http://localhost:3000/";
+  // Make sure to include `https://` when not localhost.
+  url = url.includes("http") ? url : `https://${url}`;
+  // Make sure to including trailing `/`.
+  url = url.charAt(url.length - 1) === "/" ? url : `${url}/`;
+  return url;
+};