From a8d8157b582e480c6ff6041a722118c87f19363f Mon Sep 17 00:00:00 2001 From: Paul Miller Date: Sat, 11 Feb 2023 16:25:35 -0600 Subject: [PATCH] waitlist mockup --- package.json | 4 +- pnpm-lock.yaml | 43 ++++++++++++++ src/App.tsx | 122 +++++---------------------------------- src/Home.tsx | 115 ++++++++++++++++++++++++++++++++++++ src/Join.tsx | 42 ++++++++++++++ src/Receive.tsx | 19 ++++++ src/components/button.ts | 23 ++++++++ src/main.tsx | 11 +++- tailwind.config.cjs | 3 + 9 files changed, 272 insertions(+), 110 deletions(-) create mode 100644 src/Home.tsx create mode 100644 src/Join.tsx create mode 100644 src/Receive.tsx create mode 100644 src/components/button.ts diff --git a/package.json b/package.json index bebf96b..901f61d 100644 --- a/package.json +++ b/package.json @@ -9,10 +9,12 @@ "preview": "vite preview" }, "dependencies": { + "class-variance-authority": "^0.4.0", "framer-motion": "^8.5.4", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-modal-sheet": "^1.10.0" + "react-modal-sheet": "^1.10.0", + "react-router-dom": "^6.8.0" }, "devDependencies": { "@types/react": "^18.0.26", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c1e8591..5fe806b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5,21 +5,25 @@ specifiers: '@types/react-dom': ^18.0.9 '@vitejs/plugin-react': ^3.0.0 autoprefixer: ^10.4.13 + class-variance-authority: ^0.4.0 framer-motion: ^8.5.4 postcss: ^8.4.21 react: ^18.2.0 react-dom: ^18.2.0 react-modal-sheet: ^1.10.0 + react-router-dom: ^6.8.0 tailwindcss: ^3.2.4 typescript: ^4.9.3 vite: ^4.0.0 vite-plugin-pwa: ^0.14.1 dependencies: + class-variance-authority: 0.4.0_typescript@4.9.4 framer-motion: 8.5.4_react-dom@18.2.0+react@18.2.0 react: 18.2.0 react-dom: 18.2.0_react@18.2.0 react-modal-sheet: 1.10.0_framer-motion@8.5.4+react@18.2.0 + react-router-dom: 6.8.0_react-dom@18.2.0+react@18.2.0 devDependencies: '@types/react': 18.0.27 @@ -1576,6 +1580,11 @@ packages: react: 18.2.0 dev: false + /@remix-run/router/1.3.1: + resolution: {integrity: sha512-+eun1Wtf72RNRSqgU7qM2AMX/oHp+dnx7BHk1qhK5ZHzdHTUU4LA1mGG1vT+jMc8sbhG3orvsfOmryjzx2PzQw==} + engines: {node: '>=14'} + dev: false + /@rollup/plugin-babel/5.3.1_d8e457a9eec5694be0a6185ede2794cb: resolution: {integrity: sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q==} engines: {node: '>= 10.0.0'} @@ -1957,6 +1966,17 @@ packages: fsevents: 2.3.2 dev: true + /class-variance-authority/0.4.0_typescript@4.9.4: + resolution: {integrity: sha512-74enNN8O9ZNieycac/y8FxqgyzZhZbxmCitAtAeUrLPlxjSd5zA7LfpprmxEcOmQBnaGs5hYhiSGnJ0mqrtBLQ==} + peerDependencies: + typescript: '>= 4.5.5 < 5' + peerDependenciesMeta: + typescript: + optional: true + dependencies: + typescript: 4.9.4 + dev: false + /clsx/1.2.1: resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==} engines: {node: '>=6'} @@ -2929,6 +2949,29 @@ packages: engines: {node: '>=0.10.0'} dev: true + /react-router-dom/6.8.0_react-dom@18.2.0+react@18.2.0: + resolution: {integrity: sha512-hQouduSTywGJndE86CXJ2h7YEy4HYC6C/uh19etM+79FfQ6cFFFHnHyDlzO4Pq0eBUI96E4qVE5yUjA00yJZGQ==} + engines: {node: '>=14'} + peerDependencies: + react: '>=16.8' + react-dom: '>=16.8' + dependencies: + '@remix-run/router': 1.3.1 + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + react-router: 6.8.0_react@18.2.0 + dev: false + + /react-router/6.8.0_react@18.2.0: + resolution: {integrity: sha512-760bk7y3QwabduExtudhWbd88IBbuD1YfwzpuDUAlJUJ7laIIcqhMvdhSVh1Fur1PE8cGl84L0dxhR3/gvHF7A==} + engines: {node: '>=14'} + peerDependencies: + react: '>=16.8' + dependencies: + '@remix-run/router': 1.3.1 + react: 18.2.0 + dev: false + /react/18.2.0: resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==} engines: {node: '>=0.10.0'} diff --git a/src/App.tsx b/src/App.tsx index a5fdb55..fdaffba 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,115 +1,21 @@ -import Sheet from 'react-modal-sheet'; -import { useState } from 'react'; -import logo from './assets/mutiny-logo.svg'; -import mutiny_m from './assets/m.svg'; -import scan from './assets/scan.svg'; -import settings from './assets/settings.svg'; -import send from './assets/send.svg'; - - -function ActivityItem() { - return ( -
- logo -
-

Bitcoin Beefsteak

-

-1,441,851 SAT

-

Jul 24

-
-
SEND
-
- ) -} +import { Routes, Route } from "react-router-dom"; +import { AnimatePresence } from "framer-motion"; +import Home from "./Home"; +import Receive from "./Receive"; +import Join from "./Join"; function App() { - const [isOpen, setOpen] = useState(false); - return ( -
-
-
-
- logo -
-
-
- Balance -
-
-

- 69,420 SAT -

-
-
- - -
-
-
-
- Activity -
- - - - - - - - -
- {/* safety div */} -
-
+
+ {/* globals such as header will go here */} -
- - setOpen(false)}> - - - -
-
- Activity -
- -

- It's a sheet! Like a modal, but a sheet. -

-
- - - - - - - - - - - -
- ) + + {/* } /> */} + } /> + +
+ ); } -export default App +export default App; \ No newline at end of file diff --git a/src/Home.tsx b/src/Home.tsx new file mode 100644 index 0000000..94ff9f6 --- /dev/null +++ b/src/Home.tsx @@ -0,0 +1,115 @@ +import Sheet from 'react-modal-sheet'; +import { useState } from 'react'; +import logo from './assets/mutiny-logo.svg'; +import mutiny_m from './assets/m.svg'; +import scan from './assets/scan.svg'; +import settings from './assets/settings.svg'; +import send from './assets/send.svg'; + + +function ActivityItem() { + return ( +
+ logo +
+

Bitcoin Beefsteak

+

-1,441,851 SAT

+

Jul 24

+
+
SEND
+
+ ) +} + +function App() { + const [isOpen, setOpen] = useState(false); + + return ( +
+
+
+
+ logo +
+
+
+ Balance +
+
+

+ 69,420 SAT +

+
+
+ + +
+
+
+
+ Activity +
+ + + + + + + + +
+ {/* safety div */} +
+
+ + +
+ + setOpen(false)}> + + + +
+
+ Activity +
+ +

+ It's a sheet! Like a modal, but a sheet. +

+
+ + + + + + + + + + + +
+ ) +} + +export default App diff --git a/src/Join.tsx b/src/Join.tsx new file mode 100644 index 0000000..8816559 --- /dev/null +++ b/src/Join.tsx @@ -0,0 +1,42 @@ +import { useState } from "react"; +import button from "./components/button" + +const INPUT = "w-full mb-4 p-2 rounded-lg text-black" +export default function Join() { + let [nostr, setNostr] = useState(true); + return ( +
+
+
+

Join Waitlist

+ {/* HTML form with three inputs: nostr pubkey (text), email (text), and a textarea for comments */} + +
+
+ + +
+
+ {nostr && + <> + + + + } + { + !nostr && + <> + + + + } + +