From 5ba3c2d0a1a6eaf04340bd5865d37f970fa8ee99 Mon Sep 17 00:00:00 2001 From: Zach Rose Date: Thu, 20 Mar 2025 18:38:15 -0400 Subject: [PATCH 1/6] Separate sign up and log in pages --- src/contexts/DarkModeContext.tsx | 4 +- src/pages/login.tsx | 161 +++++++++++++----------- src/pages/signup.tsx | 206 +++++++++++++++++++++++++++++++ src/routes.tsx | 23 +++- 4 files changed, 318 insertions(+), 76 deletions(-) create mode 100644 src/pages/signup.tsx diff --git a/src/contexts/DarkModeContext.tsx b/src/contexts/DarkModeContext.tsx index 9d3d632..caf4e43 100644 --- a/src/contexts/DarkModeContext.tsx +++ b/src/contexts/DarkModeContext.tsx @@ -1,6 +1,6 @@ import React, { createContext, useContext, useState, useEffect } from "react"; -const DarkModeContext = createContext(); +export const DarkModeContext = createContext({ isDarkMode: false, toggleDarkMode: function(){} }); function getDarkMode() { const storedDarkMode = localStorage.getItem("darkMode"); @@ -23,7 +23,7 @@ export const DarkModeProvider = ({ children }) => { useEffect(() => { document.documentElement.classList.toggle("dark", isDarkMode); - localStorage.setItem("darkMode", isDarkMode.toString()); + // localStorage.setItem("darkMode", isDarkMode.toString()); }, [isDarkMode]); return ( diff --git a/src/pages/login.tsx b/src/pages/login.tsx index 0f33dc5..f6c2bba 100644 --- a/src/pages/login.tsx +++ b/src/pages/login.tsx @@ -1,33 +1,32 @@ -import React, { useState } from "react"; -import { Button } from "../components/Button"; -import { useDarkMode } from "../contexts/DarkModeContext"; -import { ClerkProvider, SignIn } from "@clerk/clerk-react"; -import { useLoaderData, useNavigate } from "react-router-dom"; +import React from "react"; +import { SignIn } from "@clerk/clerk-react"; +import { useState } from "react"; +import { Link } from "react-router-dom"; +import { useContext } from "react"; +import { DarkModeContext } from "../contexts/DarkModeContext"; const slides = [ - { text: "This is going to be the way to\u00A0make apps.", author: "Boorad / Brad Anderson", role: "startup founder"}, - { text: "Fastest I’ve ever developed any app of any kind.", author: "Mykle Hansen", role: "developer"} + { text: "This is going to be the way to\u00A0make apps.", author: "Boorad / Brad Anderson", role: "startup founder" }, + { text: "Fastest I’ve ever developed any app of any kind.", author: "Mykle Hansen", role: "developer" }, ]; -export async function loader({ request }) { +export async function loginLoader({ request }: { request: Request }) { const url = new URL(request.url); const nextUrl = url.searchParams.get("next_url") || "/"; return nextUrl; } -export default function Login() { - const nextUrl = useLoaderData() as string; - const navigate = useNavigate(); +export function Login() { const [emailPreference, setEmailPreference] = useState(false); const [activeSlide, setActiveSlide] = useState(0); - const isDarkMode = useDarkMode().isDarkMode; + const isDarkMode = useContext(DarkModeContext)?.isDarkMode; function incSlide() { - setActiveSlide(cur => cur === slides.length - 1 ? 0 : ++cur); + setActiveSlide((cur) => (cur === slides.length - 1 ? 0 : ++cur)); } function decSlide() { - setActiveSlide(cur => cur === 0 ? slides.length - 1 : --cur); + setActiveSlide((cur) => (cur === 0 ? slides.length - 1 : --cur)); } return ( @@ -35,7 +34,9 @@ export default function Login() {
- {slides.map(slide => )} + {slides.map((slide, i) => ( + + ))}
-
- navigate(to)} - routerReplace={(to) => navigate(to, { replace: true })} - publishableKey={import.meta.env.VITE_CLERK_PUBLISHABLE_KEY} - signInFallbackRedirectUrl={nextUrl}> -
-
- -
-
- - +
+ + + + -
-

Sign in to see your data live!

- - - + +
+

+ Don't have an account?{" "} + + Sign up + +

@@ -107,23 +114,37 @@ export default function Login() { ); } -function Slide({ data, isDarkMode }) { +function Slide({ data, isDarkMode }: { data: { text: string; author: string; role: string }; isDarkMode: boolean }) { return (

“{data.text}“

-

– {data.author}

+

+ – {data.author} +

{data.role}

); } -function SlideButtonIcon({ isDarkMode }) { +function SlideButtonIcon({ isDarkMode }: { isDarkMode: boolean }) { return ( - + - + ); } diff --git a/src/pages/signup.tsx b/src/pages/signup.tsx new file mode 100644 index 0000000..f3467c2 --- /dev/null +++ b/src/pages/signup.tsx @@ -0,0 +1,206 @@ +import React from "react"; +import { SignUp } from "@clerk/clerk-react"; +import { useContext, useState } from "react"; +import { DarkModeContext, useDarkMode } from "../contexts/DarkModeContext"; + +const checkIsDarkSchemePreferred = () => window?.matchMedia?.('(prefers-color-scheme:dark)')?.matches ?? false; + +const slides = [ + { text: "This is going to be the way to\u00A0make apps.", author: "Boorad / Brad Anderson", role: "startup founder" }, + { text: "Fastest I've ever developed any app of any kind.", author: "Mykle Hansen", role: "developer" }, +]; + +export async function signupLoader({ request }: { request: Request }) { + const url = new URL(request.url); + const nextUrl = url.searchParams.get("next_url") || "/"; + return nextUrl; +} + +export function SignUpPage() { + const [emailOptIn, setEmailOptIn] = useState(false); + const [activeSlide, setActiveSlide] = useState(0); + const isDarkMode = useContext(DarkModeContext)?.isDarkMode || false; + + function incSlide() { + setActiveSlide((cur) => (cur === slides.length - 1 ? 0 : ++cur)); + } + + function decSlide() { + setActiveSlide((cur) => (cur === 0 ? slides.length - 1 : --cur)); + } + + return ( +
+
+
+
+ {slides.map((slide, i) => ( + + ))} +
+
+ +
+ +
+
+ + + + + + + +

+ Create your account +

+

Email preferences

+

+ Would you like to receive emails from us? +

+
+ setEmailOptIn(e.target.checked)} + className="w-[18px] h-[18px] cursor-pointer mt-[3px] accent-fp-a-02" + /> + +
+ + +
+
+
+ ); + } + + function ExtraCTA() { + return ( +
+ + + + +
+

+ Sign in to see your data live! +

+ + + +
+
+ ) +} + +function Slide({ data, isDarkMode }: { data: { text: string; author: string; role: string }; isDarkMode: boolean }) { + return ( +
+

"{data.text}"

+
+

+ – {data.author} +

+

{data.role}

+
+
+ ); +} diff --git a/src/routes.tsx b/src/routes.tsx index f2853b3..9ebc0fe 100644 --- a/src/routes.tsx +++ b/src/routes.tsx @@ -7,6 +7,7 @@ import { createMemoryRouter, RouterProvider, } from "react-router-dom"; +import { ClerkProvider, SignUp } from "@clerk/clerk-react"; import App, { loader as appLoader } from "./layouts/app"; import DatabasesHistory from "./pages/databases/history"; import DatabasesIndex from "./pages/databases/index"; @@ -21,15 +22,27 @@ import Index, { loader as indexLoader } from "./pages/index"; import DatabasesConnect, { loader as connectLoader, } from "./pages/databases/connect"; -import Login, { loader as loginLoader } from "./pages/login"; +import { Login, loginLoader } from "./pages/login"; +import { SignUpPage, signupLoader } from "./pages/signup"; import "./styles/tailwind.css"; import { DarkModeProvider } from "./contexts/DarkModeContext"; +declare global { + interface ImportMeta { + env: { + VITE_CHROME_EXTENSION: string; + VITE_CLERK_PUBLISHABLE_KEY: string; + }; + } +} + + const routes = createRoutesFromElements( } loader={indexLoader} /> } loader={loginLoader} /> + } loader={signupLoader} /> } loader={appLoader}> } /> } action={newDatabaseAction} /> @@ -58,9 +71,11 @@ const rootElement = import.meta.env.VITE_CHROME_EXTENSION if (rootElement) { ReactDOM.createRoot(rootElement).render( - - - + + + + + ); } else { console.error("Root element not found"); From fefc1d828d6e27b3d81a0c40d1154370a2d78c73 Mon Sep 17 00:00:00 2001 From: Zach Rose Date: Thu, 20 Mar 2025 19:28:23 -0400 Subject: [PATCH 2/6] Remove deprecated container query plugin that was causing lint error --- src/pages/databases/show.tsx | 10 +++++----- src/pages/docs/show.tsx | 4 ++-- tailwind.config.js | 1 - 3 files changed, 7 insertions(+), 8 deletions(-) diff --git a/src/pages/databases/show.tsx b/src/pages/databases/show.tsx index 9fc507b..23e14df 100644 --- a/src/pages/databases/show.tsx +++ b/src/pages/databases/show.tsx @@ -148,11 +148,11 @@ function TableView({ name }: { name: string }) { }, []); return ( -
+
{/* Quickstart */} {connection && } -
+