mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-19 11:43:30 +00:00
added channel creation
This commit is contained in:
parent
fb700b1878
commit
549cc991a9
@ -2,8 +2,6 @@
|
|||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
@import './assets/editor.css';
|
|
||||||
|
|
||||||
/* Fixed next/image bug, source: https://nextjs.org/docs/api-reference/next/image */
|
/* Fixed next/image bug, source: https://nextjs.org/docs/api-reference/next/image */
|
||||||
@supports (font: -apple-system-body) and (-webkit-appearance: none) {
|
@supports (font: -apple-system-body) and (-webkit-appearance: none) {
|
||||||
img[loading='lazy'] {
|
img[loading='lazy'] {
|
||||||
|
@ -1,326 +0,0 @@
|
|||||||
.w-md-editor-bar {
|
|
||||||
position: absolute;
|
|
||||||
cursor: s-resize;
|
|
||||||
right: 4px;
|
|
||||||
bottom: 4px;
|
|
||||||
margin-top: -11px;
|
|
||||||
margin-right: 0;
|
|
||||||
width: 14px;
|
|
||||||
z-index: 3;
|
|
||||||
height: 10px;
|
|
||||||
border-radius: 0 0 3px 0;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
.w-md-editor-bar svg {
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
.w-md-editor-aree {
|
|
||||||
overflow: auto;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
.w-md-editor-text {
|
|
||||||
min-height: 100%;
|
|
||||||
position: relative;
|
|
||||||
text-align: left;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
word-break: keep-all;
|
|
||||||
overflow-wrap: break-word;
|
|
||||||
box-sizing: border-box;
|
|
||||||
margin: 0;
|
|
||||||
-webkit-font-variant-ligatures: common-ligatures;
|
|
||||||
font-variant-ligatures: common-ligatures;
|
|
||||||
@apply p-4;
|
|
||||||
}
|
|
||||||
.w-md-editor-text-pre,
|
|
||||||
.w-md-editor-text-input,
|
|
||||||
.w-md-editor-text > .w-md-editor-text-pre {
|
|
||||||
margin: 0;
|
|
||||||
border: 0;
|
|
||||||
background: none;
|
|
||||||
box-sizing: inherit;
|
|
||||||
display: inherit;
|
|
||||||
font-family: inherit;
|
|
||||||
font-size: inherit;
|
|
||||||
font-style: inherit;
|
|
||||||
-webkit-font-variant-ligatures: inherit;
|
|
||||||
font-variant-ligatures: inherit;
|
|
||||||
font-weight: inherit;
|
|
||||||
letter-spacing: inherit;
|
|
||||||
line-height: inherit;
|
|
||||||
tab-size: inherit;
|
|
||||||
text-indent: inherit;
|
|
||||||
text-rendering: inherit;
|
|
||||||
text-transform: inherit;
|
|
||||||
white-space: inherit;
|
|
||||||
overflow-wrap: inherit;
|
|
||||||
word-break: inherit;
|
|
||||||
word-break: normal;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
.w-md-editor-text-pre > code,
|
|
||||||
.w-md-editor-text-input > code,
|
|
||||||
.w-md-editor-text > .w-md-editor-text-pre > code {
|
|
||||||
font-family: inherit;
|
|
||||||
}
|
|
||||||
.w-md-editor-text-pre {
|
|
||||||
position: relative;
|
|
||||||
margin: 0px !important;
|
|
||||||
pointer-events: none;
|
|
||||||
background-color: transparent !important;
|
|
||||||
}
|
|
||||||
.w-md-editor-text-pre > code {
|
|
||||||
padding: 0 !important;
|
|
||||||
}
|
|
||||||
.w-md-editor-text-input {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
resize: none;
|
|
||||||
color: inherit;
|
|
||||||
overflow: hidden;
|
|
||||||
outline: 0;
|
|
||||||
padding: inherit;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
@apply placeholder:text-zinc-500;
|
|
||||||
}
|
|
||||||
.w-md-editor-text-input:empty {
|
|
||||||
-webkit-text-fill-color: inherit !important;
|
|
||||||
}
|
|
||||||
.w-md-editor-text-pre,
|
|
||||||
.w-md-editor-text-input {
|
|
||||||
word-wrap: pre;
|
|
||||||
word-break: break-word;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* Hack to apply on some CSS on IE10 and IE11
|
|
||||||
*/
|
|
||||||
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
|
||||||
/**
|
|
||||||
* IE doesn't support '-webkit-text-fill-color'
|
|
||||||
* So we use 'color: transparent' to make the text transparent on IE
|
|
||||||
* Unlike other browsers, it doesn't affect caret color in IE
|
|
||||||
*/
|
|
||||||
.w-md-editor-text-input {
|
|
||||||
color: transparent !important;
|
|
||||||
}
|
|
||||||
.w-md-editor-text-input::selection {
|
|
||||||
background-color: #accef7 !important;
|
|
||||||
color: transparent !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.w-md-editor-text-pre .punctuation {
|
|
||||||
color: var(--color-prettylights-syntax-comment) !important;
|
|
||||||
}
|
|
||||||
.w-md-editor-text-pre .token.url,
|
|
||||||
.w-md-editor-text-pre .token.content {
|
|
||||||
color: var(--color-prettylights-syntax-constant) !important;
|
|
||||||
}
|
|
||||||
.w-md-editor-text-pre .token.title.important {
|
|
||||||
color: var(--color-prettylights-syntax-markup-bold);
|
|
||||||
}
|
|
||||||
.w-md-editor-text-pre .token.code-block .function {
|
|
||||||
color: var(--color-prettylights-syntax-entity);
|
|
||||||
}
|
|
||||||
.w-md-editor-text-pre .token.bold {
|
|
||||||
font-weight: unset !important;
|
|
||||||
}
|
|
||||||
.w-md-editor-text-pre .token.title {
|
|
||||||
line-height: unset !important;
|
|
||||||
font-size: unset !important;
|
|
||||||
font-weight: unset !important;
|
|
||||||
}
|
|
||||||
.w-md-editor-text-pre .token.code.keyword {
|
|
||||||
color: var(--color-prettylights-syntax-constant) !important;
|
|
||||||
}
|
|
||||||
.w-md-editor-text-pre .token.strike,
|
|
||||||
.w-md-editor-text-pre .token.strike .content {
|
|
||||||
color: var(--color-prettylights-syntax-markup-deleted-text) !important;
|
|
||||||
}
|
|
||||||
.w-md-editor-toolbar-child {
|
|
||||||
position: absolute;
|
|
||||||
border-radius: 3px;
|
|
||||||
box-shadow: 0 0 0 1px var(--color-border-default), 0 0 0 var(--color-border-default),
|
|
||||||
0 1px 1px var(--color-border-default);
|
|
||||||
background-color: var(--color-canvas-default);
|
|
||||||
z-index: 1;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.w-md-editor-toolbar-child.active {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.w-md-editor-toolbar-child .w-md-editor-toolbar {
|
|
||||||
border-bottom: 0;
|
|
||||||
padding: 3px;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
.w-md-editor-toolbar-child .w-md-editor-toolbar ul > li {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.w-md-editor-toolbar-child .w-md-editor-toolbar ul > li button:not(.cta-btn) {
|
|
||||||
width: -webkit-fill-available;
|
|
||||||
height: initial;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 3px 4px 2px 4px;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.w-md-editor-toolbar {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
user-select: none;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
.w-md-editor-toolbar.bottom {
|
|
||||||
border-bottom: 0px;
|
|
||||||
border-top: 1px solid var(--color-border-default);
|
|
||||||
border-radius: 0 0 3px 3px;
|
|
||||||
}
|
|
||||||
.w-md-editor-toolbar ul,
|
|
||||||
.w-md-editor-toolbar li {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style: none;
|
|
||||||
line-height: initial;
|
|
||||||
}
|
|
||||||
.w-md-editor-toolbar li {
|
|
||||||
display: inline-block;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
.w-md-editor-toolbar li + li {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.w-md-editor-toolbar li > button:not(.cta-btn) {
|
|
||||||
border: none;
|
|
||||||
height: 20px;
|
|
||||||
line-height: 14px;
|
|
||||||
background: none;
|
|
||||||
text-transform: none;
|
|
||||||
font-weight: normal;
|
|
||||||
overflow: visible;
|
|
||||||
outline: none;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s;
|
|
||||||
white-space: nowrap;
|
|
||||||
@apply rounded py-1 px-2 text-zinc-500;
|
|
||||||
}
|
|
||||||
.w-md-editor-toolbar li > button:not(.cta-btn):hover,
|
|
||||||
.w-md-editor-toolbar li > button:not(.cta-btn):focus {
|
|
||||||
@apply bg-zinc-700 text-zinc-100;
|
|
||||||
}
|
|
||||||
.w-md-editor-toolbar li > button:not(.cta-btn):active {
|
|
||||||
background-color: var(--color-neutral-muted);
|
|
||||||
color: var(--color-danger-fg);
|
|
||||||
}
|
|
||||||
.w-md-editor-toolbar li > button:not(.cta-btn):disabled {
|
|
||||||
color: var(--color-border-default);
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
.w-md-editor-toolbar li > button:not(.cta-btn):disabled:hover {
|
|
||||||
background-color: transparent;
|
|
||||||
color: var(--color-border-default);
|
|
||||||
}
|
|
||||||
.w-md-editor-toolbar li.active > button:not(.cta-btn) {
|
|
||||||
color: var(--color-accent-fg);
|
|
||||||
background-color: var(--color-neutral-muted);
|
|
||||||
}
|
|
||||||
.w-md-editor-toolbar-divider {
|
|
||||||
height: 14px;
|
|
||||||
width: 1px;
|
|
||||||
margin: -3px 3px 0 3px !important;
|
|
||||||
vertical-align: middle;
|
|
||||||
background-color: var(--color-border-default);
|
|
||||||
}
|
|
||||||
.w-md-editor {
|
|
||||||
text-align: left;
|
|
||||||
border-radius: 3px;
|
|
||||||
padding-bottom: 1px;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column-reverse;
|
|
||||||
@apply gap-3;
|
|
||||||
}
|
|
||||||
.w-md-editor.w-md-editor-rtl {
|
|
||||||
direction: rtl !important;
|
|
||||||
text-align: right !important;
|
|
||||||
}
|
|
||||||
.w-md-editor.w-md-editor-rtl .w-md-editor-preview {
|
|
||||||
right: unset !important;
|
|
||||||
left: 0;
|
|
||||||
text-align: right !important;
|
|
||||||
box-shadow: inset -1px 0 0 0 var(--color-border-default);
|
|
||||||
}
|
|
||||||
.w-md-editor.w-md-editor-rtl .w-md-editor-text {
|
|
||||||
text-align: right !important;
|
|
||||||
}
|
|
||||||
.w-md-editor-toolbar {
|
|
||||||
@apply h-10 shrink-0;
|
|
||||||
}
|
|
||||||
.w-md-editor-content {
|
|
||||||
@apply relative h-full overflow-auto rounded-lg border-[0.5px] border-white/30 bg-zinc-800 shadow-inner;
|
|
||||||
}
|
|
||||||
.w-md-editor .copied {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
.w-md-editor-input {
|
|
||||||
width: 50%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.w-md-editor-text-pre > code {
|
|
||||||
word-break: break-word !important;
|
|
||||||
white-space: pre-wrap !important;
|
|
||||||
}
|
|
||||||
.w-md-editor-preview {
|
|
||||||
width: 50%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
box-shadow: inset 1px 0 0 0 var(--color-border-default);
|
|
||||||
position: absolute;
|
|
||||||
padding: 10px 20px;
|
|
||||||
overflow: auto;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
border-radius: 0 0 5px 0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
.w-md-editor-preview .anchor {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.w-md-editor-preview .contains-task-list {
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
.w-md-editor-show-preview .w-md-editor-input {
|
|
||||||
width: 0%;
|
|
||||||
overflow: hidden;
|
|
||||||
background-color: var(--color-canvas-default);
|
|
||||||
}
|
|
||||||
.w-md-editor-show-preview .w-md-editor-preview {
|
|
||||||
width: 100%;
|
|
||||||
box-shadow: inset 0 0 0 0;
|
|
||||||
}
|
|
||||||
.w-md-editor-show-edit .w-md-editor-input {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.w-md-editor-show-edit .w-md-editor-preview {
|
|
||||||
width: 0%;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
.w-md-editor-fullscreen {
|
|
||||||
overflow: hidden;
|
|
||||||
position: fixed;
|
|
||||||
z-index: 99999;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
height: 100% !important;
|
|
||||||
}
|
|
||||||
.w-md-editor-fullscreen .w-md-editor-content {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
9
src/components/channels/channelList.tsx
Normal file
9
src/components/channels/channelList.tsx
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import { ChannelModal } from '@components/channels/channelModal';
|
||||||
|
|
||||||
|
export default function ChannelList() {
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-px">
|
||||||
|
<ChannelModal />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
129
src/components/channels/channelModal.tsx
Normal file
129
src/components/channels/channelModal.tsx
Normal file
@ -0,0 +1,129 @@
|
|||||||
|
import { RelayContext } from '@components/relaysProvider';
|
||||||
|
|
||||||
|
import { dateToUnix } from '@utils/getDate';
|
||||||
|
|
||||||
|
import * as Dialog from '@radix-ui/react-dialog';
|
||||||
|
import { Cross1Icon, PlusIcon } from '@radix-ui/react-icons';
|
||||||
|
import { getEventHash, signEvent } from 'nostr-tools';
|
||||||
|
import { useContext, useState } from 'react';
|
||||||
|
import { useForm } from 'react-hook-form';
|
||||||
|
|
||||||
|
export const ChannelModal = () => {
|
||||||
|
const [pool, relays]: any = useContext(RelayContext);
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
|
||||||
|
const {
|
||||||
|
register,
|
||||||
|
handleSubmit,
|
||||||
|
reset,
|
||||||
|
formState: { isDirty, isValid },
|
||||||
|
} = useForm();
|
||||||
|
|
||||||
|
const onSubmit = (data) => {
|
||||||
|
const activeAccount = JSON.parse(localStorage.getItem('activeAccount'));
|
||||||
|
|
||||||
|
const event: any = {
|
||||||
|
content: JSON.stringify(data),
|
||||||
|
created_at: dateToUnix(),
|
||||||
|
kind: 40,
|
||||||
|
pubkey: activeAccount.pubkey,
|
||||||
|
tags: [],
|
||||||
|
};
|
||||||
|
event.id = getEventHash(event);
|
||||||
|
event.sig = signEvent(event, activeAccount.privkey);
|
||||||
|
|
||||||
|
// publish channel
|
||||||
|
pool.publish(event, relays);
|
||||||
|
// close modal
|
||||||
|
setOpen(false);
|
||||||
|
// reset form
|
||||||
|
reset();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog.Root open={open} onOpenChange={setOpen}>
|
||||||
|
<Dialog.Trigger asChild>
|
||||||
|
<div className="group inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 hover:bg-zinc-950">
|
||||||
|
<div className="inline-flex h-5 w-5 shrink items-center justify-center rounded bg-zinc-900">
|
||||||
|
<PlusIcon className="h-3 w-3 text-zinc-500" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h5 className="text-sm font-medium text-zinc-500 group-hover:text-zinc-400">Add a new channel</h5>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Dialog.Trigger>
|
||||||
|
<Dialog.Portal>
|
||||||
|
<Dialog.Overlay className="fixed inset-0 z-50 bg-black bg-opacity-30 backdrop-blur-sm data-[state=open]:animate-overlayShow" />
|
||||||
|
<Dialog.Content className="fixed inset-0 z-50 overflow-y-auto">
|
||||||
|
<div className="flex min-h-full items-center justify-center">
|
||||||
|
<div className="relative flex h-min w-full max-w-xl flex-col rounded-lg shadow-modal">
|
||||||
|
<div className="sticky left-0 top-0 flex h-12 w-full shrink-0 items-center justify-between rounded-t-lg bg-zinc-950 px-3">
|
||||||
|
<div className="flex w-full items-center justify-between">
|
||||||
|
<h5 className="font-medium leading-none text-zinc-500"># Create channel</h5>
|
||||||
|
<Dialog.Close asChild>
|
||||||
|
<button
|
||||||
|
autoFocus={false}
|
||||||
|
className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-900"
|
||||||
|
>
|
||||||
|
<Cross1Icon className="h-3 w-3 text-zinc-300" />
|
||||||
|
</button>
|
||||||
|
</Dialog.Close>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex h-full w-full flex-col overflow-y-auto rounded-b-lg bg-zinc-950 px-3 pb-3">
|
||||||
|
<form
|
||||||
|
onSubmit={handleSubmit(onSubmit)}
|
||||||
|
className="flex h-full w-full flex-col gap-4 rounded-lg border border-white/20 bg-zinc-900 p-4"
|
||||||
|
>
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<label className="text-xs font-semibold uppercase tracking-wider text-zinc-300">
|
||||||
|
Channel name *
|
||||||
|
</label>
|
||||||
|
<div className="relative w-full shrink-0 overflow-hidden before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-fuchsia-500 before:opacity-0 before:ring-2 before:ring-fuchsia-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-fuchsia-500/100 dark:focus-within:after:shadow-fuchsia-500/20">
|
||||||
|
<input
|
||||||
|
type={'text'}
|
||||||
|
{...register('name', { required: true })}
|
||||||
|
spellCheck={false}
|
||||||
|
className="relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<label className="text-xs font-semibold uppercase tracking-wider text-zinc-300">Picture</label>
|
||||||
|
<div className="relative w-full shrink-0 overflow-hidden before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-fuchsia-500 before:opacity-0 before:ring-2 before:ring-fuchsia-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-fuchsia-500/100 dark:focus-within:after:shadow-fuchsia-500/20">
|
||||||
|
<input
|
||||||
|
type={'text'}
|
||||||
|
{...register('picture')}
|
||||||
|
spellCheck={false}
|
||||||
|
className="relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<label className="text-xs font-semibold uppercase tracking-wider text-zinc-300">About</label>
|
||||||
|
<div className="relative h-20 w-full shrink-0 overflow-hidden before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-fuchsia-500 before:opacity-0 before:ring-2 before:ring-fuchsia-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-fuchsia-500/100 dark:focus-within:after:shadow-fuchsia-500/20">
|
||||||
|
<textarea
|
||||||
|
{...register('about')}
|
||||||
|
spellCheck={false}
|
||||||
|
className="relative h-20 w-full resize-none rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={!isDirty || !isValid}
|
||||||
|
className="h-11 w-full transform rounded-lg bg-fuchsia-500 font-medium text-white active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-30"
|
||||||
|
>
|
||||||
|
Create
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Dialog.Content>
|
||||||
|
</Dialog.Portal>
|
||||||
|
</Dialog.Root>
|
||||||
|
);
|
||||||
|
};
|
@ -42,7 +42,10 @@ export const ChatModal = () => {
|
|||||||
<div className="sticky left-0 top-0 flex h-12 w-full shrink-0 items-center justify-between rounded-t-lg border-b border-zinc-800 bg-zinc-950 px-3">
|
<div className="sticky left-0 top-0 flex h-12 w-full shrink-0 items-center justify-between rounded-t-lg border-b border-zinc-800 bg-zinc-950 px-3">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<Dialog.Close asChild>
|
<Dialog.Close asChild>
|
||||||
<button className="inline-flex h-5 w-5 items-center justify-center rounded bg-zinc-900">
|
<button
|
||||||
|
autoFocus={false}
|
||||||
|
className="inline-flex h-5 w-5 items-center justify-center rounded bg-zinc-900"
|
||||||
|
>
|
||||||
<Cross1Icon className="h-3 w-3 text-zinc-300" />
|
<Cross1Icon className="h-3 w-3 text-zinc-300" />
|
||||||
</button>
|
</button>
|
||||||
</Dialog.Close>
|
</Dialog.Close>
|
||||||
|
@ -1,3 +1,5 @@
|
|||||||
|
import ChannelList from '@components/channels/channelList';
|
||||||
|
|
||||||
import * as Collapsible from '@radix-ui/react-collapsible';
|
import * as Collapsible from '@radix-ui/react-collapsible';
|
||||||
import { TriangleUpIcon } from '@radix-ui/react-icons';
|
import { TriangleUpIcon } from '@radix-ui/react-icons';
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
@ -18,7 +20,9 @@ export default function Channels() {
|
|||||||
</div>
|
</div>
|
||||||
<h3 className="text-[11px] font-bold uppercase tracking-widest text-zinc-600">Channels</h3>
|
<h3 className="text-[11px] font-bold uppercase tracking-widest text-zinc-600">Channels</h3>
|
||||||
</Collapsible.Trigger>
|
</Collapsible.Trigger>
|
||||||
<Collapsible.Content></Collapsible.Content>
|
<Collapsible.Content>
|
||||||
|
<ChannelList />
|
||||||
|
</Collapsible.Content>
|
||||||
</div>
|
</div>
|
||||||
</Collapsible.Root>
|
</Collapsible.Root>
|
||||||
);
|
);
|
||||||
|
Loading…
Reference in New Issue
Block a user