danak/dpage-editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

preview page in pages sections

Browse Source
This commit is contained in:
hamid zarghami
2026-05-23 12:33:02 +03:30
parent b6bff9956a
commit ebb6c1c9c6
6 changed files with 126 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/home/Home.tsx
+49 -57
View File
@@ -9,20 +9,29 @@ import { useCreateCatalog } from './hooks/useHomeData'
import { useNavigate } from 'react-router-dom'
import { Paths } from '@/config/Paths'
import DirectLogin from '../auth/components/DirectLogin'
import { extractErrorMessage } from '@/helpers/utils'
import { clx, extractErrorMessage } from '@/helpers/utils'
const CATALOG_SIZES = [
{ id: 'a4', label: 'A4' },
{ id: 'a3', label: 'A3' },
{ id: 'a5', label: 'A5' },
] as const
const Home: FC = () => {
const navigate = useNavigate()
const [active, setActive] = useState<string>('a4')
const [name, setName] = useState<string>('')
const [slug, setSlug] = useState<string>('')
const { mutate: createCatalog, isPending } = useCreateCatalog()
const handleSubmit = () => {
if (!name) {
toast('نام کاتالوگ را وارد کنید', 'error')
} else if (!slug) {
toast('اسلاگ کاتالوگ را وارد کنید', 'error')
} else {
createCatalog({ name: name, size: active, content: '' }, {
createCatalog({ name, slug, size: active, content: '' }, {
onSuccess: (data) => {
toast('کاتالوگ با موفقیت ساخته شد', 'success')
navigate(Paths.editor + `/${data?.data?.id}`)
@@ -36,75 +45,58 @@ const Home: FC = () => {
return (
<div className='mt-4 w-full'>
<div className='flex justify-between'>
<h1 className='text-lg font-light'>
<div className='flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between'>
<h1 className='text-base font-light sm:text-lg'>
ساخت کاتالوگ ب ویرایشگر داناک
</h1>
<DirectLogin />
</div>
<div className='mt-20 bg-white rounded-4xl p-10'>
<div className='text-center'>
<div className='mt-8 rounded-2xl bg-white p-4 sm:mt-12 sm:rounded-3xl sm:p-6 lg:mt-20 lg:rounded-4xl lg:p-10'>
<div className='mx-auto max-w-xl px-1 text-center text-sm leading-relaxed sm:text-base'>
سایز و نام مورد نظر را انتخاب کنبد و یک کاتالوگ زیبا با ویرایشگر داناک بسازید
</div>
<div>
<div className='mt-8 flex justify-center gap-8'>
<div onClick={() => setActive('a4')} className={`
w-[160px] h-[166px] rounded-[20px] border border-border flex items-center justify-center
${active === 'a4' && 'border-black!'}
`}>
<div>
<div className='size-[94px] bg-[#EEF0F7] rounded flex justify-center items-center'>
<DocumentText size={24} color='black' />
<div className='mt-6 flex flex-wrap justify-center gap-4 sm:mt-8 sm:gap-6 lg:gap-8'>
{CATALOG_SIZES.map(({ id, label }) => (
<button
key={id}
type='button'
onClick={() => setActive(id)}
className={clx(
'flex w-full h-[126px] sm:w-[120px] cursor-pointer items-center justify-center rounded-[20px] border border-border sm:h-[146px] sm:w-[140px] lg:h-[166px] lg:w-[160px]',
active === id && 'border-black!',
)}
>
<div>
<div className='flex size-[72px] items-center justify-center rounded bg-[#EEF0F7] sm:size-[84px] lg:size-[94px]'>
<DocumentText size={24} color='black' />
</div>
<div className='mt-3 text-center text-sm'>
{label}
</div>
</div>
<div className='mt-3 text-center text-sm'>
A4
</div>
</div>
</div>
<div onClick={() => setActive('a3')} className={`
w-[160px] h-[166px] rounded-[20px] border border-border flex items-center justify-center
${active === 'a3' && 'border-black!'}
`}>
<div>
<div className='size-[94px] bg-[#EEF0F7] rounded flex justify-center items-center'>
<DocumentText size={24} color='black' />
</div>
<div className='mt-3 text-center text-sm'>
A3
</div>
</div>
</div>
<div onClick={() => setActive('a5')} className={`
w-[160px] h-[166px] rounded-[20px] border border-border flex items-center justify-center
${active === 'a5' && 'border-black!'}
`}>
<div>
<div className='size-[94px] bg-[#EEF0F7] rounded flex justify-center items-center'>
<DocumentText size={24} color='black' />
</div>
<div className='mt-3 text-center text-sm'>
A5
</div>
</div>
</div>
</button>
))}
</div>
<div className='mt-5'>
<div className='mx-auto mt-5 flex w-full max-w-md flex-col gap-4 px-1 sm:px-0'>
<Input
label='نام کاتالوگ'
value={name}
onChange={(e) => setName(e.target.value)}
/>
<Input
label='اسلاگ'
value={slug}
onChange={(e) => setSlug(e.target.value)}
/>
</div>
<div className='flex justify-center'>
<Button disabled={isPending} onClick={handleSubmit} className='mt-8 rounded-xl'>
<div className='flex gap-2 items-center'>
<Button disabled={isPending} onClick={handleSubmit} className='mt-6 w-full max-w-md rounded-xl sm:mt-8 sm:w-auto'>
<div className='flex items-center justify-center gap-2'>
ادامه
<ArrowLeft size={16} color='white' />
</div>
@@ -112,16 +104,16 @@ const Home: FC = () => {
</div>
</div>
<Divider label='یا' className='mt-10' />
<Divider label='یا' className='mt-8 sm:mt-10' />
<div className='mt-20 flex justify-center'>
<div className='w-[183px] h-[193px] rounded-[18px] border flex flex-col items-center justify-center'>
<img src={PdfIcon} alt='upload' className='w-12' />
<div className='text-sm mt-3'>
<div className='mt-12 flex justify-center sm:mt-16 lg:mt-20'>
<div className='flex h-[160px] w-[150px] flex-col items-center justify-center rounded-[18px] border sm:h-[193px] sm:w-[183px]'>
<img src={PdfIcon} alt='upload' className='w-10 sm:w-12' />
<div className='mt-3 text-sm'>
آپلود PDF
</div>
<div className='h-5 px-5 rounded-full flex items-center bg-[#D4EDDE] text-[#01973D] text-[10px] mt-3'>
<div className='mt-3 flex h-5 items-center rounded-full bg-[#D4EDDE] px-5 text-[10px] text-[#01973D]'>
رایگان
</div>
</div>
src/pages/home/types/Types.ts
+1
View File
@@ -1,5 +1,6 @@
export type CreateCatalogParamsType = {
name: string;
slug: string;
size: string;
content?: string;
id?: string;