setting personality
This commit is contained in:
hamid zarghami
@@ -0,0 +1,41 @@
|
||||
import { FC, useState } from 'react'
|
||||
import ColorImage from '@/assets/images/color.png'
|
||||
import { HexColorPicker } from 'react-colorful'
|
||||
|
||||
type Props = {
|
||||
defaultColor?: string
|
||||
changeColor: (color: string) => void,
|
||||
label: string
|
||||
}
|
||||
|
||||
const ColorPicker: FC<Props> = ({ defaultColor, changeColor, label }) => {
|
||||
|
||||
const [showPicker, setShowPicker] = useState(false)
|
||||
const [color, setColor] = useState<string>(defaultColor || '#000')
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div>
|
||||
{label}
|
||||
</div>
|
||||
<div onClick={() => setShowPicker(!showPicker)}
|
||||
className='mt-2 relative cursor-pointer h-10 border border-[#D0D0D0] rounded-xl px-4 flex justify-between items-center'>
|
||||
<div className='flex gap-1.5 items-center'>
|
||||
<div style={{ background: color }} className='size-4 rounded-full'></div>
|
||||
<div className='text-description text-sm dltr text-right'>{color}</div>
|
||||
</div>
|
||||
<img src={ColorImage} alt="color" className='size-6' />
|
||||
{showPicker && (
|
||||
<div style={{ position: "absolute", top: "50px", zIndex: 10 }}>
|
||||
<HexColorPicker color={color} onChange={(newColor) => {
|
||||
setColor(newColor)
|
||||
changeColor(newColor)
|
||||
}} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ColorPicker
|
||||
@@ -15,6 +15,7 @@ type Props = {
|
||||
seprator?: boolean;
|
||||
isNotRequired?: boolean;
|
||||
onChangeSearchFinal?: (value: string) => void;
|
||||
endIcon?: React.ReactNode;
|
||||
} & InputHTMLAttributes<HTMLInputElement>
|
||||
|
||||
const formatNumber = (value: string | number): string => {
|
||||
@@ -103,6 +104,13 @@ const Input: FC<Props> = (props: Props) => {
|
||||
<SearchNormal size={20} color='#8C90A3' className='absolute pointer-events-none top-0 w-5 bottom-0 my-auto right-3' />
|
||||
}
|
||||
|
||||
{
|
||||
props.endIcon &&
|
||||
<div className='absolute flex items-center pointer-events-none top-0 bottom-0 cursor-pointer my-auto left-3'>
|
||||
{props.endIcon}
|
||||
</div>
|
||||
}
|
||||
|
||||
{
|
||||
props.error_text &&
|
||||
<Error
|
||||
|
||||
@@ -0,0 +1,153 @@
|
||||
import { CloseCircle, DocumentUpload, Gallery } from 'iconsax-react'
|
||||
import { FC, useCallback, useEffect, useState } from 'react'
|
||||
import { useDropzone } from 'react-dropzone';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { clx } from '../helpers/utils';
|
||||
|
||||
type Props = {
|
||||
label: string;
|
||||
onChange: (file: File[]) => void;
|
||||
isMultiple?: boolean;
|
||||
isFile?: boolean,
|
||||
preview?: string[],
|
||||
onChangePreview?: (preview: string[]) => void,
|
||||
getCover?: (url: string) => void,
|
||||
coverUrl?: string
|
||||
}
|
||||
|
||||
const UploadBoxDraggble: FC<Props> = (props: Props) => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
const [files, setFiles] = useState<File[]>([])
|
||||
const [perviews, setPerviews] = useState<string[]>(props.preview ? props.preview : [])
|
||||
const [isFill, setIsFill] = useState<boolean>(false)
|
||||
const [cover, setCover] = useState<string>(props.coverUrl ? props.coverUrl : '')
|
||||
|
||||
const onDrop = useCallback((acceptedFiles: File[]) => {
|
||||
if (props.isMultiple) {
|
||||
const array = [...files]
|
||||
array.push(acceptedFiles[0])
|
||||
setFiles(array)
|
||||
props.onChange(array)
|
||||
} else {
|
||||
setFiles([acceptedFiles[0]])
|
||||
props.onChange([acceptedFiles[0]])
|
||||
}
|
||||
}, [files])
|
||||
const { getRootProps, getInputProps } = useDropzone({ onDrop })
|
||||
|
||||
const handleDelete = (index: number) => {
|
||||
const array = [...files]
|
||||
array.splice(index, 1)
|
||||
setFiles(array)
|
||||
props.onChange(array)
|
||||
}
|
||||
|
||||
const handleDeletePreview = (index: number) => {
|
||||
const array = [...perviews];
|
||||
array.splice(index, 1);
|
||||
setPerviews(array);
|
||||
if (props.onChangePreview) {
|
||||
props.onChangePreview(array);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
if (props.preview && props.preview.length > 0 && !isFill) {
|
||||
setPerviews(props.preview)
|
||||
console.log('preview', props.preview);
|
||||
|
||||
setIsFill(true)
|
||||
}
|
||||
|
||||
}, [props.preview, isFill])
|
||||
|
||||
useEffect(() => {
|
||||
setCover(props.coverUrl ? props.coverUrl : '')
|
||||
}, [props.coverUrl])
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div {...getRootProps()} className='w-full py-8 border border-dashed border-description flex flex-col justify-center items-center gap-4 rounded-2xl'>
|
||||
<input {...getInputProps()} />
|
||||
<Gallery
|
||||
className='size-8'
|
||||
color='#8C90A3'
|
||||
/>
|
||||
<div className='text-description text-xs'>
|
||||
{props.label}
|
||||
</div>
|
||||
|
||||
<div className='flex items-center gap-2'>
|
||||
<DocumentUpload
|
||||
className='size-4'
|
||||
color='black'
|
||||
/>
|
||||
<div className='text-xs'>{t('upload')}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{
|
||||
files.length > 0 || perviews ? (
|
||||
<div className='mt-4 flex gap-4 items-center'>
|
||||
{
|
||||
perviews && perviews.map((item, index) => {
|
||||
return (
|
||||
<div key={index} className='flex items-center gap-2'>
|
||||
<div key={index} className='flex relative items-center gap-2'>
|
||||
<img onClick={() => {
|
||||
if (props.getCover) {
|
||||
setCover(item)
|
||||
props.getCover(item)
|
||||
}
|
||||
}} src={item}
|
||||
className={clx(
|
||||
'size-10 rounded-full object-cover',
|
||||
cover === item ? 'border-2 border-red-400' : ''
|
||||
)} />
|
||||
<div onClick={() => handleDeletePreview(index)} className='absolute -left-2 -top-2 shadow-md bg-white size-5 rounded-full flex justify-center items-center'>
|
||||
<CloseCircle className='size-4 ' color='red' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
{
|
||||
files.map((file, index) => {
|
||||
if (props.isFile) {
|
||||
return (
|
||||
<div key={index} className='flex border p-2 rounded-lg items-center gap-2'>
|
||||
<div className='flex relative items-center gap-2'>
|
||||
<div className='text-xs'>{file.name}</div>
|
||||
<div className='absolute -left-4 -top-4 shadow-md bg-white size-5 rounded-full flex justify-center items-center'>
|
||||
<CloseCircle onClick={() => handleDelete(index)} className='size-4 ' color='red' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
else
|
||||
return (
|
||||
<div key={index} className='flex items-center gap-2'>
|
||||
<div key={index} className='flex relative items-center gap-2'>
|
||||
<img src={URL.createObjectURL(file)} alt={file.name} className='size-10 rounded-full object-cover' />
|
||||
<div className='absolute -left-2 -top-2 shadow-md bg-white size-5 rounded-full flex justify-center items-center'>
|
||||
<CloseCircle onClick={() => handleDelete(index)} className='size-4 ' color='red' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default UploadBoxDraggble
|
||||
@@ -5,6 +5,7 @@ import { useSharedStore } from '@/shared/store/sharedStore'
|
||||
import Input from '../Input'
|
||||
import ReactQuill from 'react-quill-new';
|
||||
import Button from '../Button'
|
||||
import Select from '../Select'
|
||||
|
||||
|
||||
const NewMessage: FC = () => {
|
||||
@@ -17,10 +18,10 @@ const NewMessage: FC = () => {
|
||||
{openNewMessage && (
|
||||
<>
|
||||
<div
|
||||
className='fixed inset-0 bg-black/50 z-[9998]'
|
||||
className='fixed inset-0 xl:bg-transparent bg-black/50 z-[9998]'
|
||||
onClick={() => setOpenNewMessage(false)}
|
||||
/>
|
||||
<div className='fixed left-2 right-2 bottom-2 md:left-4 md:right-4 md:bottom-4 md:top-4 xl:left-8 xl:right-auto xl:bottom-4 xl:top-4 bg-white rounded-2xl md:rounded-3xl shadow-[0_0_20px_rgba(0,0,0,0.1)] z-[9999] transition-all duration-300 p-4 md:p-6 xl:p-8 w-auto xl:w-[800px] max-h-[90vh] overflow-y-auto'>
|
||||
<div className='fixed left-2 right-2 bottom-2 md:left-4 md:right-4 md:bottom-4 xl:left-8 xl:right-auto xl:bottom-4 bg-white rounded-2xl md:rounded-3xl shadow-[0_0_20px_rgba(0,0,0,0.1)] z-[9999] transition-all duration-300 p-4 md:p-6 xl:p-8 w-auto xl:w-[800px] max-h-[90vh] overflow-y-auto'>
|
||||
{/* Header */}
|
||||
<div className='flex justify-between items-center mb-6 md:mb-8'>
|
||||
<div className='text-lg md:text-xl xl:text-2xl font-semibold'>
|
||||
@@ -61,15 +62,35 @@ const NewMessage: FC = () => {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='flex flex-col sm:flex-row justify-end gap-3 md:gap-4 pt-4'>
|
||||
<Button
|
||||
className='!w-full sm:!w-fit px-6 md:px-10 bg-white text-black border border-primary order-2 sm:order-1'
|
||||
label={t('new_message.draft')}
|
||||
/>
|
||||
<Button
|
||||
className='w-full sm:w-fit px-6 md:px-10 order-1 sm:order-2'
|
||||
label={t('new_message.send')}
|
||||
/>
|
||||
<div className='flex flex-wrap gap-2.5 items-center'>
|
||||
<div className='bg-[#EBEDF5] text-sm flex gap-2 h-10 rounded-full items-center px-4'>
|
||||
<span>Lorem Ipsum.pdf</span>
|
||||
<CloseCircle size={20} color='#D52903' />
|
||||
</div>
|
||||
<div className='bg-[#EBEDF5] text-sm flex gap-2 h-10 rounded-full items-center px-4'>
|
||||
<span>Lorem Ipsum.pdf</span>
|
||||
<CloseCircle size={20} color='#D52903' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex flex-col gap-4 sm:flex-row pt-4'>
|
||||
<div>
|
||||
<Select
|
||||
items={[]}
|
||||
placeholder={t('new_message.select_priority')}
|
||||
className='xl:w-[190px]'
|
||||
/>
|
||||
</div>
|
||||
<div className='flex-1 justify-end flex gap-3'>
|
||||
<Button
|
||||
className='!w-full sm:!w-fit px-6 md:px-10 bg-white text-black border border-primary order-2 sm:order-1'
|
||||
label={t('new_message.draft')}
|
||||
/>
|
||||
<Button
|
||||
className='w-full sm:w-fit px-6 md:px-10 order-1 sm:order-2'
|
||||
label={t('new_message.send')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user