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 (
+
+ {children}
+
+ );
+}
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 (
<>
- toggle(true)}
- className="inline-flex h-8 w-max items-center justify-center gap-1 rounded-md bg-fuchsia-500 px-2.5 text-sm font-medium text-zinc-100 shadow-button hover:bg-fuchsia-600 focus:outline-none"
- >
+ toggle(true)} preset="small">
Compose
-
+