reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add button component

Browse Source
This commit is contained in:
Ren Amamiya
2023-06-19 09:30:49 +07:00
parent 6d2e976355
commit 8baba4b1e2
7 changed files with 76 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/app/channel/components/createModal.tsx
View File

@@ -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() {
</div>
</div>
<div>
<button
type="submit"
disabled={!isDirty || !isValid}
className="inline-flex h-11 w-full transform items-center justify-center rounded-lg bg-fuchsia-500 font-medium text-zinc-100 shadow-button active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-30"
>
<Button preset="large" disabled={!isDirty || !isValid}>
{loading ? (
<svg
className="h-4 w-4 animate-spin text-black dark:text-zinc-100"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<title id="loading">Loading</title>
<circle
className="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
strokeWidth="4"
/>
<path
className="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
/>
</svg>
<LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-zinc-100" />
) : (
"Create channel"
)}
</button>
</Button>
</div>
</form>
</div>

46
src/shared/button.tsx Normal file
View File

@@ -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 (
<button
type="button"
onClick={onClick}
disabled={disabled}
className={twMerge(
"inline-flex items-center justify-center gap-1 transform active:translate-y-1 disabled:pointer-events-none disabled:opacity-50 focus:outline-none",
preClass,
)}
>
{children}
</button>
);
}

15
src/shared/composer/modal.tsx
View File

@@ -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 (
<>
<button
type="button"
onClick={() => 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"
>
<Button onClick={() => toggle(true)} preset="small">
<ComposeIcon width={14} height={14} />
Compose
</button>
</Button>
<Transition appear show={open} as={Fragment}>
<Dialog as="div" className="relative z-10" onClose={closeModal}>
<Transition.Child
@@ -66,7 +63,7 @@ export function Composer() {
className="text-zinc-500"
/>
</span>
<div className="inline-flex h-6 w-max items-center justify-center gap-0.5 rounded bg-zinc-800 pl-3 pr-1.5 text-sm font-medium text-zinc-400">
<div className="inline-flex h-7 w-max items-center justify-center gap-0.5 rounded bg-zinc-800 pl-3 pr-1.5 text-sm font-medium text-zinc-400">
New Post
<ChevronDownIcon width={14} height={14} />
</div>
@@ -83,7 +80,9 @@ export function Composer() {
/>
</div>
</div>
<Post pubkey={account.pubkey} privkey={account.privkey} />
{account && (
<Post pubkey={account.pubkey} privkey={account.privkey} />
)}
</Dialog.Panel>
</Transition.Child>
</div>

11
src/shared/composer/types/post.tsx
View File

@@ -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 }) {
</div>
<div className="mt-4 flex items-center justify-between">
<ImageUploader />
<button
type="button"
onClick={submit}
className="inline-flex h-7 w-max items-center justify-center gap-1 rounded-md bg-fuchsia-500 px-3.5 text-base font-medium text-zinc-100 shadow-button hover:bg-fuchsia-600"
>
Post
</button>
<Button onClick={() => submit} preset="publish">
Publish
</Button>
</div>
</div>
</Slate>

2
src/shared/navigation.tsx
View File

@@ -13,7 +13,7 @@ export function Navigation() {
return (
<div className="flex w-[232px] flex-col gap-3 border-r border-zinc-900">
<AppHeader />
<div className="flex flex-col gap-3 h-full overflow-y-auto scrollbar-hide">
<div className="flex flex-col gap-5 h-full overflow-y-auto scrollbar-hide">
<div className="inlin-lflex h-8 px-3.5">
<Composer />
</div>

14
src/shared/notes/replies/form.tsx
View File

@@ -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}
/>
</div>
<div className="border-t border-zinc-800 w-full py-3 px-5">
<div className="flex w-full items-center justify-between">
<div className="inline-flex items-center gap-2">
<div className="relative h-8 w-8 shrink-0 rounded">
<div className="relative h-9 w-9 shrink-0 rounded">
<Image
src={user?.image || DEFAULT_AVATAR}
alt={account.npub}
className="h-8 w-8 rounded bg-white object-cover"
className="h-9 w-9 rounded-md bg-white object-cover"
/>
</div>
<div>
@@ -64,14 +65,13 @@ export function NoteReplyForm({ id }: { id: string }) {
</div>
</div>
<div className="flex items-center gap-2">
<button
type="button"
<Button
onClick={() => submitEvent()}
disabled={value.length === 0 ? true : false}
className="inline-flex h-8 w-16 items-center justify-center rounded-md bg-fuchsia-500 px-4 text-base font-medium hover:bg-fuchsia-600 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
preset="publish"
>
Reply
</button>
</Button>
</div>
</div>
</div>