mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-19 11:43:30 +00:00
updated create channel modal
This commit is contained in:
parent
13a2950b03
commit
bb944ab683
@ -44,7 +44,7 @@
|
|||||||
"@tailwindcss/typography": "^0.5.9",
|
"@tailwindcss/typography": "^0.5.9",
|
||||||
"@tauri-apps/cli": "^1.2.3",
|
"@tauri-apps/cli": "^1.2.3",
|
||||||
"@trivago/prettier-plugin-sort-imports": "^4.1.1",
|
"@trivago/prettier-plugin-sort-imports": "^4.1.1",
|
||||||
"@types/node": "^18.15.13",
|
"@types/node": "^18.16.0",
|
||||||
"@types/react": "^18.0.38",
|
"@types/react": "^18.0.38",
|
||||||
"@types/react-dom": "^18.0.11",
|
"@types/react-dom": "^18.0.11",
|
||||||
"@typescript-eslint/eslint-plugin": "^5.59.0",
|
"@typescript-eslint/eslint-plugin": "^5.59.0",
|
||||||
@ -62,7 +62,7 @@
|
|||||||
"husky": "^8.0.3",
|
"husky": "^8.0.3",
|
||||||
"lint-staged": "^13.2.1",
|
"lint-staged": "^13.2.1",
|
||||||
"postcss": "^8.4.23",
|
"postcss": "^8.4.23",
|
||||||
"prettier": "^2.8.7",
|
"prettier": "^2.8.8",
|
||||||
"prettier-plugin-tailwindcss": "^0.2.7",
|
"prettier-plugin-tailwindcss": "^0.2.7",
|
||||||
"prop-types": "^15.8.1",
|
"prop-types": "^15.8.1",
|
||||||
"tailwindcss": "^3.3.1",
|
"tailwindcss": "^3.3.1",
|
||||||
|
@ -14,7 +14,7 @@ specifiers:
|
|||||||
'@tauri-apps/api': ^1.2.0
|
'@tauri-apps/api': ^1.2.0
|
||||||
'@tauri-apps/cli': ^1.2.3
|
'@tauri-apps/cli': ^1.2.3
|
||||||
'@trivago/prettier-plugin-sort-imports': ^4.1.1
|
'@trivago/prettier-plugin-sort-imports': ^4.1.1
|
||||||
'@types/node': ^18.15.13
|
'@types/node': ^18.16.0
|
||||||
'@types/react': ^18.0.38
|
'@types/react': ^18.0.38
|
||||||
'@types/react-dom': ^18.0.11
|
'@types/react-dom': ^18.0.11
|
||||||
'@typescript-eslint/eslint-plugin': ^5.59.0
|
'@typescript-eslint/eslint-plugin': ^5.59.0
|
||||||
@ -38,7 +38,7 @@ specifiers:
|
|||||||
nostr-relaypool: ^0.5.18
|
nostr-relaypool: ^0.5.18
|
||||||
nostr-tools: ^1.10.1
|
nostr-tools: ^1.10.1
|
||||||
postcss: ^8.4.23
|
postcss: ^8.4.23
|
||||||
prettier: ^2.8.7
|
prettier: ^2.8.8
|
||||||
prettier-plugin-tailwindcss: ^0.2.7
|
prettier-plugin-tailwindcss: ^0.2.7
|
||||||
prop-types: ^15.8.1
|
prop-types: ^15.8.1
|
||||||
react: ^18.2.0
|
react: ^18.2.0
|
||||||
@ -88,8 +88,8 @@ dependencies:
|
|||||||
devDependencies:
|
devDependencies:
|
||||||
'@tailwindcss/typography': 0.5.9_tailwindcss@3.3.1
|
'@tailwindcss/typography': 0.5.9_tailwindcss@3.3.1
|
||||||
'@tauri-apps/cli': 1.2.3
|
'@tauri-apps/cli': 1.2.3
|
||||||
'@trivago/prettier-plugin-sort-imports': 4.1.1_prettier@2.8.7
|
'@trivago/prettier-plugin-sort-imports': 4.1.1_prettier@2.8.8
|
||||||
'@types/node': 18.15.13
|
'@types/node': 18.16.0
|
||||||
'@types/react': 18.0.38
|
'@types/react': 18.0.38
|
||||||
'@types/react-dom': 18.0.11
|
'@types/react-dom': 18.0.11
|
||||||
'@typescript-eslint/eslint-plugin': 5.59.0_p5urazbkpxqwbpulw3y4eskliy
|
'@typescript-eslint/eslint-plugin': 5.59.0_p5urazbkpxqwbpulw3y4eskliy
|
||||||
@ -107,12 +107,12 @@ devDependencies:
|
|||||||
husky: 8.0.3
|
husky: 8.0.3
|
||||||
lint-staged: 13.2.1
|
lint-staged: 13.2.1
|
||||||
postcss: 8.4.23
|
postcss: 8.4.23
|
||||||
prettier: 2.8.7
|
prettier: 2.8.8
|
||||||
prettier-plugin-tailwindcss: 0.2.7_yk5p2qt6yzw3zyyilt4azle7eu
|
prettier-plugin-tailwindcss: 0.2.7_vx2i665krt45esupzuhn5o4zsy
|
||||||
prop-types: 15.8.1
|
prop-types: 15.8.1
|
||||||
tailwindcss: 3.3.1_postcss@8.4.23
|
tailwindcss: 3.3.1_postcss@8.4.23
|
||||||
typescript: 4.9.5
|
typescript: 4.9.5
|
||||||
vite: 4.3.1_@types+node@18.15.13
|
vite: 4.3.1_@types+node@18.16.0
|
||||||
vite-plugin-ssr: 0.4.115_vite@4.3.1
|
vite-plugin-ssr: 0.4.115_vite@4.3.1
|
||||||
vite-plugin-top-level-await: 1.3.0_vite@4.3.1
|
vite-plugin-top-level-await: 1.3.0_vite@4.3.1
|
||||||
vite-tsconfig-paths: 4.2.0_mzhihm7zd2gyalpll4qoudvuha
|
vite-tsconfig-paths: 4.2.0_mzhihm7zd2gyalpll4qoudvuha
|
||||||
@ -1541,7 +1541,7 @@ packages:
|
|||||||
'@tauri-apps/cli-win32-x64-msvc': 1.2.3
|
'@tauri-apps/cli-win32-x64-msvc': 1.2.3
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/@trivago/prettier-plugin-sort-imports/4.1.1_prettier@2.8.7:
|
/@trivago/prettier-plugin-sort-imports/4.1.1_prettier@2.8.8:
|
||||||
resolution:
|
resolution:
|
||||||
{ integrity: sha512-dQ2r2uzNr1x6pJsuh/8x0IRA3CBUB+pWEW3J/7N98axqt7SQSm+2fy0FLNXvXGg77xEDC7KHxJlHfLYyi7PDcw== }
|
{ integrity: sha512-dQ2r2uzNr1x6pJsuh/8x0IRA3CBUB+pWEW3J/7N98axqt7SQSm+2fy0FLNXvXGg77xEDC7KHxJlHfLYyi7PDcw== }
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
@ -1557,7 +1557,7 @@ packages:
|
|||||||
'@babel/types': 7.17.0
|
'@babel/types': 7.17.0
|
||||||
javascript-natural-sort: 0.7.1
|
javascript-natural-sort: 0.7.1
|
||||||
lodash: 4.17.21
|
lodash: 4.17.21
|
||||||
prettier: 2.8.7
|
prettier: 2.8.8
|
||||||
transitivePeerDependencies:
|
transitivePeerDependencies:
|
||||||
- supports-color
|
- supports-color
|
||||||
dev: true
|
dev: true
|
||||||
@ -1572,9 +1572,9 @@ packages:
|
|||||||
{ integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ== }
|
{ integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ== }
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/@types/node/18.15.13:
|
/@types/node/18.16.0:
|
||||||
resolution:
|
resolution:
|
||||||
{ integrity: sha512-N+0kuo9KgrUQ1Sn/ifDXsvg0TTleP7rIy4zOBGECxAljqvqfqpTfzx0Q1NUedOixRMBfe2Whhb056a42cWs26Q== }
|
{ integrity: sha512-BsAaKhB+7X+H4GnSjGhJG9Qi8Tw+inU9nJDwmD5CgOmBLEI6ArdhikpLX7DjbjDRDTbqZzU2LSQNZg8WGPiSZQ== }
|
||||||
|
|
||||||
/@types/phoenix/1.5.6:
|
/@types/phoenix/1.5.6:
|
||||||
resolution:
|
resolution:
|
||||||
@ -1613,7 +1613,7 @@ packages:
|
|||||||
resolution:
|
resolution:
|
||||||
{ integrity: sha512-NbsqiNX9CnEfC1Z0Vf4mE1SgAJ07JnRYcNex7AJ9zAVzmiGHmjKFEk7O4TJIsgv2B1sLEb6owKFZrACwdYngsQ== }
|
{ integrity: sha512-NbsqiNX9CnEfC1Z0Vf4mE1SgAJ07JnRYcNex7AJ9zAVzmiGHmjKFEk7O4TJIsgv2B1sLEb6owKFZrACwdYngsQ== }
|
||||||
dependencies:
|
dependencies:
|
||||||
'@types/node': 18.15.13
|
'@types/node': 18.16.0
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
/@typescript-eslint/eslint-plugin/5.59.0_p5urazbkpxqwbpulw3y4eskliy:
|
/@typescript-eslint/eslint-plugin/5.59.0_p5urazbkpxqwbpulw3y4eskliy:
|
||||||
@ -1761,7 +1761,7 @@ packages:
|
|||||||
vite: ^4
|
vite: ^4
|
||||||
dependencies:
|
dependencies:
|
||||||
'@swc/core': 1.3.53
|
'@swc/core': 1.3.53
|
||||||
vite: 4.3.1_@types+node@18.15.13
|
vite: 4.3.1_@types+node@18.16.0
|
||||||
transitivePeerDependencies:
|
transitivePeerDependencies:
|
||||||
- '@swc/helpers'
|
- '@swc/helpers'
|
||||||
dev: true
|
dev: true
|
||||||
@ -4258,7 +4258,7 @@ packages:
|
|||||||
engines: { node: '>= 0.8.0' }
|
engines: { node: '>= 0.8.0' }
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/prettier-plugin-tailwindcss/0.2.7_yk5p2qt6yzw3zyyilt4azle7eu:
|
/prettier-plugin-tailwindcss/0.2.7_vx2i665krt45esupzuhn5o4zsy:
|
||||||
resolution:
|
resolution:
|
||||||
{ integrity: sha512-jQopIOgjLpX+y8HeD56XZw7onupRTC0cw7eKKUimI7vhjkPF5/1ltW5LyqaPtSyc8HvEpvNZsvvsGFa2qpa59w== }
|
{ integrity: sha512-jQopIOgjLpX+y8HeD56XZw7onupRTC0cw7eKKUimI7vhjkPF5/1ltW5LyqaPtSyc8HvEpvNZsvvsGFa2qpa59w== }
|
||||||
engines: { node: '>=12.17.0' }
|
engines: { node: '>=12.17.0' }
|
||||||
@ -4311,13 +4311,13 @@ packages:
|
|||||||
prettier-plugin-twig-melody:
|
prettier-plugin-twig-melody:
|
||||||
optional: true
|
optional: true
|
||||||
dependencies:
|
dependencies:
|
||||||
'@trivago/prettier-plugin-sort-imports': 4.1.1_prettier@2.8.7
|
'@trivago/prettier-plugin-sort-imports': 4.1.1_prettier@2.8.8
|
||||||
prettier: 2.8.7
|
prettier: 2.8.8
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/prettier/2.8.7:
|
/prettier/2.8.8:
|
||||||
resolution:
|
resolution:
|
||||||
{ integrity: sha512-yPngTo3aXUUmyuTjeTUT75txrf+aMh9FiD7q9ZE/i6r0bPb22g4FsE6Y338PQX1bmfy08i9QQCB7/rcUAVntfw== }
|
{ integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q== }
|
||||||
engines: { node: '>=10.13.0' }
|
engines: { node: '>=10.13.0' }
|
||||||
hasBin: true
|
hasBin: true
|
||||||
dev: true
|
dev: true
|
||||||
@ -5214,7 +5214,7 @@ packages:
|
|||||||
fast-glob: 3.2.12
|
fast-glob: 3.2.12
|
||||||
picocolors: 1.0.0
|
picocolors: 1.0.0
|
||||||
sirv: 2.0.2
|
sirv: 2.0.2
|
||||||
vite: 4.3.1_@types+node@18.15.13
|
vite: 4.3.1_@types+node@18.16.0
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/vite-plugin-top-level-await/1.3.0_vite@4.3.1:
|
/vite-plugin-top-level-await/1.3.0_vite@4.3.1:
|
||||||
@ -5226,7 +5226,7 @@ packages:
|
|||||||
'@rollup/plugin-virtual': 3.0.1
|
'@rollup/plugin-virtual': 3.0.1
|
||||||
'@swc/core': 1.3.53
|
'@swc/core': 1.3.53
|
||||||
uuid: 9.0.0
|
uuid: 9.0.0
|
||||||
vite: 4.3.1_@types+node@18.15.13
|
vite: 4.3.1_@types+node@18.16.0
|
||||||
transitivePeerDependencies:
|
transitivePeerDependencies:
|
||||||
- '@swc/helpers'
|
- '@swc/helpers'
|
||||||
- rollup
|
- rollup
|
||||||
@ -5244,13 +5244,13 @@ packages:
|
|||||||
debug: 4.3.4
|
debug: 4.3.4
|
||||||
globrex: 0.1.2
|
globrex: 0.1.2
|
||||||
tsconfck: 2.1.1_typescript@4.9.5
|
tsconfck: 2.1.1_typescript@4.9.5
|
||||||
vite: 4.3.1_@types+node@18.15.13
|
vite: 4.3.1_@types+node@18.16.0
|
||||||
transitivePeerDependencies:
|
transitivePeerDependencies:
|
||||||
- supports-color
|
- supports-color
|
||||||
- typescript
|
- typescript
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/vite/4.3.1_@types+node@18.15.13:
|
/vite/4.3.1_@types+node@18.16.0:
|
||||||
resolution:
|
resolution:
|
||||||
{ integrity: sha512-EPmfPLAI79Z/RofuMvkIS0Yr091T2ReUoXQqc5ppBX/sjFRhHKiPPF/R46cTdoci/XgeQpB23diiJxq5w30vdg== }
|
{ integrity: sha512-EPmfPLAI79Z/RofuMvkIS0Yr091T2ReUoXQqc5ppBX/sjFRhHKiPPF/R46cTdoci/XgeQpB23diiJxq5w30vdg== }
|
||||||
engines: { node: ^14.18.0 || >=16.0.0 }
|
engines: { node: ^14.18.0 || >=16.0.0 }
|
||||||
@ -5276,7 +5276,7 @@ packages:
|
|||||||
terser:
|
terser:
|
||||||
optional: true
|
optional: true
|
||||||
dependencies:
|
dependencies:
|
||||||
'@types/node': 18.15.13
|
'@types/node': 18.16.0
|
||||||
esbuild: 0.17.18
|
esbuild: 0.17.18
|
||||||
postcss: 8.4.23
|
postcss: 8.4.23
|
||||||
rollup: 3.20.7
|
rollup: 3.20.7
|
||||||
|
@ -2,12 +2,10 @@ import { createBlobFromFile } from '@utils/createBlobFromFile';
|
|||||||
|
|
||||||
import { open } from '@tauri-apps/api/dialog';
|
import { open } from '@tauri-apps/api/dialog';
|
||||||
import { Body, fetch } from '@tauri-apps/api/http';
|
import { Body, fetch } from '@tauri-apps/api/http';
|
||||||
import { Plus } from 'iconoir-react';
|
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
|
|
||||||
export const ImagePicker = () => {
|
export const AvatarUploader = ({ valueState }: { valueState: any }) => {
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [value, setValue] = useState('');
|
|
||||||
|
|
||||||
const openFileDialog = async () => {
|
const openFileDialog = async () => {
|
||||||
const selected: any = await open({
|
const selected: any = await open({
|
||||||
@ -44,17 +42,16 @@ export const ImagePicker = () => {
|
|||||||
});
|
});
|
||||||
const webpImage = 'https://void.cat/d/' + res.data.file.id + '.webp';
|
const webpImage = 'https://void.cat/d/' + res.data.file.id + '.webp';
|
||||||
|
|
||||||
setValue(webpImage);
|
valueState(webpImage);
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
console.log(value);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
onClick={() => openFileDialog()}
|
onClick={() => openFileDialog()}
|
||||||
className="inline-flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-zinc-700"
|
type="button"
|
||||||
|
className="inline-flex h-6 cursor-pointer items-center justify-center rounded bg-zinc-900 px-3 text-xs font-medium text-zinc-200 ring-1 ring-zinc-800 hover:bg-zinc-700"
|
||||||
>
|
>
|
||||||
{loading ? (
|
{loading ? (
|
||||||
<svg
|
<svg
|
||||||
@ -71,7 +68,7 @@ export const ImagePicker = () => {
|
|||||||
></path>
|
></path>
|
||||||
</svg>
|
</svg>
|
||||||
) : (
|
) : (
|
||||||
<Plus width={16} height={16} className="text-zinc-400" />
|
<span className="leading-none">Upload</span>
|
||||||
)}
|
)}
|
||||||
</button>
|
</button>
|
||||||
);
|
);
|
||||||
|
@ -1,7 +1,8 @@
|
|||||||
|
import { AvatarUploader } from '@components/avatarUploader';
|
||||||
import { RelayContext } from '@components/relaysProvider';
|
import { RelayContext } from '@components/relaysProvider';
|
||||||
|
|
||||||
import { defaultChannelsAtom } from '@stores/channel';
|
import { defaultChannelsAtom } from '@stores/channel';
|
||||||
import { FULL_RELAYS } from '@stores/constants';
|
import { DEFAULT_AVATAR, FULL_RELAYS } from '@stores/constants';
|
||||||
|
|
||||||
import { dateToUnix } from '@utils/getDate';
|
import { dateToUnix } from '@utils/getDate';
|
||||||
import { createChannel } from '@utils/storage';
|
import { createChannel } from '@utils/storage';
|
||||||
@ -11,19 +12,22 @@ import useLocalStorage from '@rehooks/local-storage';
|
|||||||
import { Cancel, Plus } from 'iconoir-react';
|
import { Cancel, Plus } from 'iconoir-react';
|
||||||
import { useSetAtom } from 'jotai';
|
import { useSetAtom } from 'jotai';
|
||||||
import { getEventHash, signEvent } from 'nostr-tools';
|
import { getEventHash, signEvent } from 'nostr-tools';
|
||||||
import { useContext, useState } from 'react';
|
import { useContext, useEffect, useState } from 'react';
|
||||||
import { useForm } from 'react-hook-form';
|
import { useForm } from 'react-hook-form';
|
||||||
|
|
||||||
export const CreateChannelModal = () => {
|
export const CreateChannelModal = () => {
|
||||||
const [pool]: any = useContext(RelayContext);
|
const [pool]: any = useContext(RelayContext);
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
const [activeAccount]: any = useLocalStorage('account', {});
|
const [activeAccount]: any = useLocalStorage('account', {});
|
||||||
|
const [image, setImage] = useState(DEFAULT_AVATAR);
|
||||||
|
|
||||||
const setChannel = useSetAtom(defaultChannelsAtom);
|
const setChannel = useSetAtom(defaultChannelsAtom);
|
||||||
|
|
||||||
const {
|
const {
|
||||||
register,
|
register,
|
||||||
handleSubmit,
|
handleSubmit,
|
||||||
reset,
|
reset,
|
||||||
|
setValue,
|
||||||
formState: { isDirty, isValid },
|
formState: { isDirty, isValid },
|
||||||
} = useForm();
|
} = useForm();
|
||||||
|
|
||||||
@ -37,6 +41,7 @@ export const CreateChannelModal = () => {
|
|||||||
};
|
};
|
||||||
event.id = getEventHash(event);
|
event.id = getEventHash(event);
|
||||||
event.sig = signEvent(event, activeAccount.privkey);
|
event.sig = signEvent(event, activeAccount.privkey);
|
||||||
|
console.log(event);
|
||||||
|
|
||||||
// publish channel
|
// publish channel
|
||||||
pool.publish(event, FULL_RELAYS);
|
pool.publish(event, FULL_RELAYS);
|
||||||
@ -57,6 +62,10 @@ export const CreateChannelModal = () => {
|
|||||||
reset();
|
reset();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setValue('picture', image);
|
||||||
|
}, [setValue, image]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Dialog.Root open={open} onOpenChange={setOpen}>
|
<Dialog.Root open={open} onOpenChange={setOpen}>
|
||||||
<Dialog.Trigger asChild>
|
<Dialog.Trigger asChild>
|
||||||
@ -82,6 +91,7 @@ export const CreateChannelModal = () => {
|
|||||||
</h5>
|
</h5>
|
||||||
<Dialog.Close asChild>
|
<Dialog.Close asChild>
|
||||||
<button
|
<button
|
||||||
|
type="button"
|
||||||
autoFocus={false}
|
autoFocus={false}
|
||||||
className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-900"
|
className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-900"
|
||||||
>
|
>
|
||||||
@ -97,6 +107,21 @@ export const CreateChannelModal = () => {
|
|||||||
</div>
|
</div>
|
||||||
<div className="flex h-full w-full flex-col overflow-y-auto px-5 pb-5 pt-3">
|
<div className="flex h-full w-full flex-col overflow-y-auto px-5 pb-5 pt-3">
|
||||||
<form onSubmit={handleSubmit(onSubmit)} className="flex h-full w-full flex-col gap-4">
|
<form onSubmit={handleSubmit(onSubmit)} className="flex h-full w-full flex-col gap-4">
|
||||||
|
<input
|
||||||
|
type={'hidden'}
|
||||||
|
{...register('picture')}
|
||||||
|
value={image}
|
||||||
|
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 className="flex flex-col gap-1">
|
||||||
|
<label className="text-xs font-semibold uppercase tracking-wider text-zinc-400">Picture</label>
|
||||||
|
<div className="relative inline-flex h-36 w-full items-center justify-center overflow-hidden rounded-lg border border-zinc-900 bg-zinc-950">
|
||||||
|
<img src={image} alt="channel picture" className="relative z-10 h-11 w-11 rounded-md" />
|
||||||
|
<div className="absolute bottom-3 right-3 z-10">
|
||||||
|
<AvatarUploader valueState={setImage} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div className="flex flex-col gap-1">
|
<div className="flex flex-col gap-1">
|
||||||
<label className="text-xs font-semibold uppercase tracking-wider text-zinc-400">
|
<label className="text-xs font-semibold uppercase tracking-wider text-zinc-400">
|
||||||
Channel name *
|
Channel name *
|
||||||
@ -110,17 +135,6 @@ export const CreateChannelModal = () => {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col gap-1">
|
|
||||||
<label className="text-xs font-semibold uppercase tracking-wider text-zinc-400">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">
|
<div className="flex flex-col gap-1">
|
||||||
<label className="text-xs font-semibold uppercase tracking-wider text-zinc-400">Description</label>
|
<label className="text-xs font-semibold uppercase tracking-wider text-zinc-400">Description</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">
|
<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">
|
||||||
|
Loading…
Reference in New Issue
Block a user