From 8baba4b1e2d261b88bb6c381578fec7621a2e6e1 Mon Sep 17 00:00:00 2001 From: Ren Amamiya <123083837+reyamir@users.noreply.github.com> Date: Mon, 19 Jun 2023 09:30:49 +0700 Subject: [PATCH] add button component --- pnpm-lock.yaml | 12 +++--- src/app/channel/components/createModal.tsx | 33 +++------------- src/shared/button.tsx | 46 ++++++++++++++++++++++ src/shared/composer/modal.tsx | 15 ++++--- src/shared/composer/types/post.tsx | 11 ++---- src/shared/navigation.tsx | 2 +- src/shared/notes/replies/form.tsx | 14 +++---- 7 files changed, 76 insertions(+), 57 deletions(-) create mode 100644 src/shared/button.tsx diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index af6b3b39..88f87faa 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -411,8 +411,8 @@ packages: resolution: {integrity: sha512-Bu+AMaXNjrpjh41znzHqaz3r2Nr8hHuHZT6V2LBKMhyMl0FgKA62PNYbqnfgmzOhoWZj70Zecisbo4H1rotP5g==} dev: false - /@floating-ui/dom@1.4.0: - resolution: {integrity: sha512-b4F0iWffLiqb/TpP2PWVOixrZqE6ni+6VT64AmFH7sJIF3SFPLbe6/h3jQ5Cwffs+HaC9A8V0TQzCPBwVvziIA==} + /@floating-ui/dom@1.4.1: + resolution: {integrity: sha512-loCXUOLzIC3jp50RFOKXZ/kQjjz26ryr/23M+FWG9jrmAv8lRf3DUfC2AiVZ3+K316GOhB08CR+Povwz8e9mDw==} dependencies: '@floating-ui/core': 1.3.1 dev: false @@ -423,7 +423,7 @@ packages: react: '>=16.8.0' react-dom: '>=16.8.0' dependencies: - '@floating-ui/dom': 1.4.0 + '@floating-ui/dom': 1.4.1 react: 18.2.0 react-dom: 18.2.0(react@18.2.0) dev: false @@ -530,8 +530,8 @@ packages: resolution: {integrity: sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==} dev: false - /@maverick-js/signals@5.10.5: - resolution: {integrity: sha512-Q9cKATEqEpXoTssZ2Lx83kjgpLYMlpE2V+LlwuudXRT/pxPAIGRxq0xnXk7B2CQlD3Zjc5xXb7a87sGWdavjfA==} + /@maverick-js/signals@5.11.0: + resolution: {integrity: sha512-SpV3TAt8/ugELL2cI4mF70paHL3dnJbM69xSq7+z2BlsKeDwMK+oVXSq+WLgYANlfwkiOhZvvfQHo6Zo0muQVw==} dev: false /@noble/curves@1.0.0: @@ -3075,7 +3075,7 @@ packages: resolution: {integrity: sha512-p8L5V62CV6TmHAngmRAopp231oJKeH77mJja5SsKOfvzrPRoThT/Jo9U0jMRB5iMykqkvyg2J5V5Agn6FPXDWQ==} engines: {node: '>=16'} dependencies: - '@maverick-js/signals': 5.10.5 + '@maverick-js/signals': 5.11.0 type-fest: 3.12.0 dev: false diff --git a/src/app/channel/components/createModal.tsx b/src/app/channel/components/createModal.tsx index a6e6b79c..ca84bce3 100644 --- a/src/app/channel/components/createModal.tsx +++ b/src/app/channel/components/createModal.tsx @@ -2,7 +2,8 @@ import { Dialog, Transition } from "@headlessui/react"; import { createChannel } from "@libs/storage"; import { NDKEvent, NDKPrivateKeySigner } from "@nostr-dev-kit/ndk"; import { AvatarUploader } from "@shared/avatarUploader"; -import { CancelIcon, PlusIcon } from "@shared/icons"; +import { Button } from "@shared/button"; +import { CancelIcon, LoaderIcon, PlusIcon } from "@shared/icons"; import { Image } from "@shared/image"; import { RelayContext } from "@shared/relayProvider"; import { useActiveAccount } from "@stores/accounts"; @@ -217,37 +218,13 @@ export function ChannelCreateModal() {
- +
diff --git a/src/shared/button.tsx b/src/shared/button.tsx new file mode 100644 index 00000000..d4a2c2c3 --- /dev/null +++ b/src/shared/button.tsx @@ -0,0 +1,46 @@ +import { ReactNode } from "react"; +import { twMerge } from "tailwind-merge"; + +export function Button({ + preset, + children, + disabled = false, + onClick = undefined, +}: { + preset: "small" | "publish" | "large"; + children: ReactNode; + disabled: boolean; + onClick?: () => void; +}) { + let preClass: string; + switch (preset) { + case "small": + preClass = + "w-min h-9 px-4 bg-zinc-900 rounded-md text-sm font-medium text-zinc-100 hover:bg-fuchsia-600"; + break; + case "publish": + preClass = + "w-min h-9 px-4 bg-fuchsia-500 rounded-md text-sm font-medium text-zinc-100 hover:bg-fuchsia-600"; + break; + case "large": + preClass = + "h-11 w-full bg-fuchsia-500 rounded-md text-sm font-medium text-zinc-100 hover:bg-fuchsia-600"; + break; + default: + break; + } + + return ( + + ); +} diff --git a/src/shared/composer/modal.tsx b/src/shared/composer/modal.tsx index ef9b6e65..991e29d7 100644 --- a/src/shared/composer/modal.tsx +++ b/src/shared/composer/modal.tsx @@ -1,4 +1,5 @@ import { Dialog, Transition } from "@headlessui/react"; +import { Button } from "@shared/button"; import { Post } from "@shared/composer/types/post"; import { User } from "@shared/composer/user"; import { @@ -24,14 +25,10 @@ export function Composer() { return ( <> - + -
+
New Post
@@ -83,7 +80,9 @@ export function Composer() { />
- + {account && ( + + )} diff --git a/src/shared/composer/types/post.tsx b/src/shared/composer/types/post.tsx index 46fbdb09..bc6783a5 100644 --- a/src/shared/composer/types/post.tsx +++ b/src/shared/composer/types/post.tsx @@ -1,4 +1,5 @@ import { NDKEvent, NDKPrivateKeySigner } from "@nostr-dev-kit/ndk"; +import { Button } from "@shared/button"; import { ImageUploader } from "@shared/composer/imageUploader"; import { TrashIcon } from "@shared/icons"; import { MentionNote } from "@shared/notes/mentions/note"; @@ -146,13 +147,9 @@ export function Post({ pubkey, privkey }: { pubkey: string; privkey: string }) {
- +
diff --git a/src/shared/navigation.tsx b/src/shared/navigation.tsx index 7480bddb..a31932ce 100644 --- a/src/shared/navigation.tsx +++ b/src/shared/navigation.tsx @@ -13,7 +13,7 @@ export function Navigation() { return (
-
+
diff --git a/src/shared/notes/replies/form.tsx b/src/shared/notes/replies/form.tsx index e16ffba6..daf8e060 100644 --- a/src/shared/notes/replies/form.tsx +++ b/src/shared/notes/replies/form.tsx @@ -1,4 +1,5 @@ import { NDKEvent, NDKPrivateKeySigner } from "@nostr-dev-kit/ndk"; +import { Button } from "@shared/button"; import { Image } from "@shared/image"; import { RelayContext } from "@shared/relayProvider"; import { useActiveAccount } from "@stores/accounts"; @@ -40,18 +41,18 @@ export function NoteReplyForm({ id }: { id: string }) { name="content" onChange={(e) => setValue(e.target.value)} placeholder="Reply to this thread..." - className="relative h-20 w-full resize-none rounded-md px-5 py-5 text-base bg-transparent !outline-none placeholder:text-zinc-400 dark:text-zinc-100 dark:placeholder:text-zinc-500" + className="relative h-20 w-full resize-none rounded-md px-5 py-3 text-base bg-transparent !outline-none placeholder:text-zinc-400 dark:text-zinc-100 dark:placeholder:text-zinc-500" spellCheck={false} />
-
+
{account.npub}
@@ -64,14 +65,13 @@ export function NoteReplyForm({ id }: { id: string }) {
- +