footer
This commit is contained in:
hamid zarghami
@@ -67,3 +67,7 @@ tbody tr {
|
||||
|
||||
backdrop-filter: blur(44px);
|
||||
}
|
||||
|
||||
.dltr {
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
@@ -6,6 +6,7 @@ import WhyDanak from './home/WhyDanak'
|
||||
import DanakServices from './home/DanakServices'
|
||||
import Blog from './home/Blog'
|
||||
import Collaboration from './home/Collaboration'
|
||||
import Footer from '@/shared/Footer'
|
||||
|
||||
const Home: NextPage = () => {
|
||||
return (
|
||||
@@ -24,6 +25,8 @@ const Home: NextPage = () => {
|
||||
|
||||
<Collaboration />
|
||||
|
||||
<Footer />
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
import { FC } from 'react'
|
||||
|
||||
type Props = {
|
||||
errorText: string
|
||||
}
|
||||
|
||||
const Error: FC<Props> = (props: Props) => {
|
||||
return (
|
||||
<div className='mt-1.5 font-normal text-red-500 text-[11px]'>
|
||||
{props.errorText}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Error
|
||||
@@ -0,0 +1,109 @@
|
||||
'use client'
|
||||
import { FC, InputHTMLAttributes, useEffect, useState } from 'react'
|
||||
import { clx } from '../helpers/utils';
|
||||
import { SearchNormal } from 'iconsax-react';
|
||||
import Error from './Error';
|
||||
|
||||
type Variant = "floating_outlined" | "primary" | "search";
|
||||
|
||||
type Props = {
|
||||
label?: string;
|
||||
className?: string;
|
||||
variant?: Variant;
|
||||
error_text?: string;
|
||||
onEnter?: () => void;
|
||||
unit?: string;
|
||||
seprator?: boolean;
|
||||
isNotRequired?: boolean;
|
||||
onChangeSearchFinal?: (value: string) => void;
|
||||
} & InputHTMLAttributes<HTMLInputElement>
|
||||
|
||||
const formatNumber = (value: string | number): string => {
|
||||
if (!value) return '';
|
||||
const inputValue = String(value).replace(/,/g, '');
|
||||
return inputValue.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
||||
};
|
||||
|
||||
const Input: FC<Props> = (props: Props) => {
|
||||
|
||||
const [formattedValue, setFormattedValue] = useState<string>(
|
||||
props.value ? formatNumber(props.value as string) : ''
|
||||
);
|
||||
|
||||
const [search, setSearch] = useState<string>('')
|
||||
|
||||
const inputClass = clx(
|
||||
'w-full h-10 text-black block px-4 text-xs rounded-xl border border-border',
|
||||
props.readOnly && 'bg-gray-100 border-0 text-description',
|
||||
props.variant === 'search' && 'bg-[#EEF0F7] border-0 ps-10',
|
||||
props.className
|
||||
);
|
||||
|
||||
const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (props.seprator) {
|
||||
const inputValue = event.target.value.replace(/,/g, ''); // حذف کاماها
|
||||
const formatted = formatNumber(inputValue);
|
||||
|
||||
// بهروزرسانی مقدار قالببندیشده
|
||||
setFormattedValue(formatted);
|
||||
|
||||
// ارسال مقدار خام به `onChange` والد
|
||||
props.onChange?.({
|
||||
...event,
|
||||
target: {
|
||||
...event.target,
|
||||
value: inputValue,
|
||||
},
|
||||
});
|
||||
} else {
|
||||
props.onChange?.(event);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (props.value) {
|
||||
setFormattedValue(formatNumber(props.value as string));
|
||||
} else {
|
||||
setFormattedValue('');
|
||||
}
|
||||
}, [props.value])
|
||||
|
||||
useEffect(() => {
|
||||
if (props.variant === 'search' && props.onChangeSearchFinal) {
|
||||
const timeout = setTimeout(() => {
|
||||
props.onChangeSearchFinal?.(search)
|
||||
}, 1000)
|
||||
return () => clearTimeout(timeout)
|
||||
}
|
||||
}, [search, props])
|
||||
|
||||
|
||||
return (
|
||||
<div className='w-full'>
|
||||
<label className='text-sm'>
|
||||
{props.label}
|
||||
</label>
|
||||
|
||||
<div className='w-full relative mt-1'>
|
||||
<input {...props} onChange={(e) => {
|
||||
setSearch(e.target.value)
|
||||
handleInputChange(e)
|
||||
}} value={props.seprator ? formattedValue : props.value} type={props.type} className={inputClass} />
|
||||
|
||||
{
|
||||
props.variant === 'search' &&
|
||||
<SearchNormal size={20} color='#8C90A3' className='absolute top-0 w-5 bottom-0 my-auto right-3' />
|
||||
}
|
||||
|
||||
{
|
||||
props.error_text &&
|
||||
<Error
|
||||
errorText={props.error_text}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Input
|
||||
@@ -0,0 +1,148 @@
|
||||
import Input from '@/components/Input'
|
||||
import { ArrowLeft } from 'iconsax-react'
|
||||
import Image from 'next/image'
|
||||
import { FC } from 'react'
|
||||
|
||||
const Footer: FC = () => {
|
||||
return (
|
||||
<div className='w-full border-4 border-white rounded-4xl bg-white/26 px-4 min-h-[550px] mt-24 flex flex-col'>
|
||||
<div className='max-w-maxWidth mx-auto flex flex-col flex-1 w-full'>
|
||||
<div className='flex-1 flex items-center'>
|
||||
|
||||
<div className='flex gap-24 w-full'>
|
||||
|
||||
<div className='max-w-[203px]'>
|
||||
<Image
|
||||
src={'/images/logo.svg'}
|
||||
width={140}
|
||||
height={58}
|
||||
alt='لوگو داناک'
|
||||
/>
|
||||
|
||||
<p className='mt-6 text-sm text-justify'>
|
||||
ما در داناک هم تولیدکننده نرمافزارهای پیشرفته هستیم و هم بستری برای فروش محصولات نرمافزاری دیگران فراهم کردهایم. با ما هوشمندانه بسازید و حرفهای بفروشید.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h6 className='font-bold'>
|
||||
داناک
|
||||
</h6>
|
||||
<ul className='text-sm mt-4 flex flex-col gap-4'>
|
||||
<li>
|
||||
محصولات
|
||||
</li>
|
||||
<li>
|
||||
خدمات
|
||||
</li>
|
||||
<li>
|
||||
مجله
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h6 className='font-bold'>
|
||||
سرویس ها محبوب
|
||||
</h6>
|
||||
<ul className='text-sm mt-4 flex flex-col gap-4'>
|
||||
<li>
|
||||
دی منو
|
||||
</li>
|
||||
<li>
|
||||
دی میل
|
||||
</li>
|
||||
<li>
|
||||
دی پیج
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h6 className='font-bold'>
|
||||
همکاری با داناک
|
||||
</h6>
|
||||
<ul className='text-sm mt-4 flex flex-col gap-4'>
|
||||
<li>
|
||||
توسعه دهندگان
|
||||
</li>
|
||||
<li>
|
||||
نمایندگان
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className='w-full flex-1'>
|
||||
<h6 className='font-bold'>
|
||||
خبرنامه
|
||||
</h6>
|
||||
|
||||
<div className='mt-4 relative'>
|
||||
<Input
|
||||
className='bg-[#ECEFF6] border-none shadow-inner'
|
||||
/>
|
||||
<div className='absolute left-1 top-1 rounded-xl size-8 bg-white flex justify-center items-center'>
|
||||
<ArrowLeft
|
||||
size={18}
|
||||
color='black'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-10 flex gap-4 items-center'>
|
||||
<Image
|
||||
src={'/images/linkedin.svg'}
|
||||
width={24}
|
||||
height={24}
|
||||
alt='داناک لینکداین'
|
||||
/>
|
||||
<Image
|
||||
src={'/images/instagram.svg'}
|
||||
width={24}
|
||||
height={24}
|
||||
alt='داناک ایسنتاگرام'
|
||||
/>
|
||||
<Image
|
||||
src={'/images/whatsapp.svg'}
|
||||
width={24}
|
||||
height={24}
|
||||
alt='داناک واتساپ'
|
||||
/>
|
||||
<Image
|
||||
src={'/images/telegram.svg'}
|
||||
width={24}
|
||||
height={24}
|
||||
alt='داناک تلگرام'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className='h-14 border-t border-[#DADDE6] flex justify-between items-center'>
|
||||
<ul className='flex gap-4 text-sm'>
|
||||
<li className='pl-4 border-l border-[#DADDE6]'>
|
||||
درباره ی ما
|
||||
</li>
|
||||
<li className='pl-4 border-l border-[#DADDE6]'>
|
||||
حریم خصوصی
|
||||
</li>
|
||||
<li className='pl-4 border-l border-[#DADDE6]'>
|
||||
قوانین و مقررات
|
||||
</li>
|
||||
<li>
|
||||
تماس با ما
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div className='text-sm dltr'>
|
||||
© 2025 Danak. All rights reserved.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Footer
|
||||
Reference in New Issue
Block a user