apuc/front_gestalt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mobile

Browse Source
This commit is contained in:
Николай Полтщук
2025-01-27 22:42:23 +03:00
parent 1278f7463d
commit ec0f24e450
17 changed files with 165 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/breadcrumb.tsx
View File

@ -16,8 +16,8 @@ const Breadcrumbs: React.FC = () => {
}
return(
<nav className="max-w-[1032px] mx-auto">
<ol className="flex text-middleGrey font-[350] my-[50px]">
<nav className="max-w-[1083px] px-[25px] mx-auto">
<ol className="flex flex-wrap text-middleGrey font-[350] my-[50px]">
<li>
<Link href="/">главная</Link>
</li>

8
components/footer.tsx
View File

@ -5,19 +5,19 @@ import Link from 'next/link';
const Footer: React.FC = () => {
return (
<footer className="container pb-8 px-8 m-auto flex justify-center mt-[80px]">
<footer className="flex flex-col items-center gap-[10px] mt-[20px] md:flex-row md:mt-[80px] md:gap-0 max-w-[1083px] px-[25px] justify-between pb-8 m-auto">
<a href="/public">
<Image width={150} height={48} src="/logo.svg" alt="logo"/>
</a>
<div className="flex gap-[96px] text-[15px] text-dark ml-[108px] mr-[188px] items-center font-[350]">
<div className="max-w-[500px] w-full justify-between md:w-fit gap-[25px] lg:gap-[96px] flex text-[15px] text-dark items-center font-[350]">
<Link href="/events">События</Link>
<Link href="/participants">Участники</Link>
</div>
<div className="flex gap-[25px]">
<div className="max-w-[500px] w-full justify-between md:w-fit flex gap-[25px]">
<Image width={83} height={21} src="/images/oppgp.svg" alt="oop"/>
<Image width={96} height={27} src="/images/pmg.svg" alt="pmg"/>
</div>
<div className="flex ml-[49px] gap-[29px]">
<div className="max-w-[500px] w-full justify-center md:w-fit flex gap-[29px]">
<SocialItem icon="logo_tg" link=""/>
<SocialItem icon="logo_vk" link=""/>
</div>

11
components/header.tsx
View File

@ -5,15 +5,18 @@ import Link from 'next/link';
const Header: React.FC = () => {
return (
<header className="flex pt-8 px-8 justify-center items-center container m-auto">
<div className="flex gap-[96px] text-[15px] text-dark mr-[220px] font-[350]">
<header className="flex pt-8 px-[25px] m-auto justify-between items-center max-w-[1083px] relative">
<div className="sm:hidden max-w-[95px] w-full">
<Image width={23} height={17} className="cursor-pointer sm:hidden" src="/images/burger.svg" alt="burger" />
</div>
<div className="hidden w-full justify-between mt-[10px] gap-[19px] text-[15px] text-dark font-[350] sm:flex sm:max-w-[145px] sm:mt-0 md:gap-[96px]">
<Link href="/events">События</Link>
<Link href="/participants">Участники</Link>
</div>
<Link href="/">
<Link href="/" className=" ">
<Image width={150} height={48} src="/logo.svg" alt="logo" />
</Link>
<div className="flex ml-[340px] gap-[19px]">
<div className="flex gap-[13px] sm:gap-[19px]">
<SocialItem icon="logo_tg" link=""/>
<SocialItem icon="logo_vk" link=""/>
</div>

37
components/human-card.tsx
View File

@ -15,17 +15,17 @@ interface Props {
const HumanCard: React.FC<Props> = ({name, description, image, skills,post, variant = 'default'}) => {
const cardStyles = {
default: {
main: "",
main: "px-[9px] pt-[11px] pb-[25px]",
img: {
w: 221,
h: 221
w: 260,
h: 181
},
name: "text-[18px]",
description: "",
blocks: ""
},
secondary: {
main: "flex w-full justify-between",
main: "flex w-full justify-between p-[11px]",
img: {
w: 218,
h: 232
@ -44,32 +44,43 @@ const HumanCard: React.FC<Props> = ({name, description, image, skills,post, vari
};
return (
<Link href="/participants/1" className={`${cardStyles[variant].main} backdrop-blur-custom border-[1px] border-white rounded-[6px] bg-darkWhite p-[10px] text-black w-fit shadow-custom`}>
<Link href="/participants/1" className={` backdrop-blur-custom border-[1px] border-white rounded-[15px] bg-darkWhite text-black w-fit shadow-custom ${cardStyles[variant].main}`}>
{image ? <Image src={image} alt='image' width={cardStyles[variant].img.w} height={cardStyles[variant].img.h} /> :
<Image src={variant === "secondary" ? "/images/mok_human2.svg" :"/images/mok_human.svg"} alt='image' width={cardStyles[variant].img.w} height={cardStyles[variant].img.h} className="rotate-[180deg]" />
<Image src={variant === "secondary" ? "/images/mok_human2.svg" :"/images/mok_human_new.svg"} alt='image' width={cardStyles[variant].img.w} height={cardStyles[variant].img.h} className="rotate-[180deg]" />
}
{(variant === 'default' || variant === 'lg') &&
<>
<div className="px-[13px]">
<h5 className={`${cardStyles[variant].name} font-[400] leading-[20px] max-w-[190px] mt-[16px] mb-[20px]`}>{name}</h5>
<span className={`text-lightGrey`}>
Работает с темами
<p className={`text-black text-[13px] leading-[15px] line-clamp-3 text-ellipsis max-w-[220px] mb-[16px] ${cardStyles[variant].description}`}>{description}</p>
</span>
<div className={`flex gap-[5px] max-w-[220px] flex-wrap ${cardStyles[variant].blocks}`}>
{skills.map((skill, index) => {
<div className={`flex gap-[5px] max-w-[220px] flex-wrap items-center ${cardStyles[variant].blocks}`}>
{skills.slice(0, 3).map((skill, index) => {
return <InfoItem name={skill} key={index} />
})}
{skills.length > 3 &&
<div className="bg-bgGrey rounded-[6px] w-[28px] h-[28px] flex justify-center items-center">
<span className="text-white text-[13px] font-[400]">+{skills.length - 3}</span>
</div>
}
</div>
</>
</div>
}
{variant === 'secondary' &&
<div className="flex flex-col ml-[16px]">
<h5 className="font-[400] text-[21px] leading-[25px] max-w-[204px] mt-[8px] mb-[18px]">{name}</h5>
<span className="text-[15px] text-lightGrey mb-[12px]">{post}</span>
<div className="flex gap-[7px] flex-wrap">
{skills.map((skill, index) => {
return <InfoItem name={skill} key={index} variable="white"/>
<div
className={`flex gap-[5px] max-w-[220px] mt-[57px] flex-wrap items-center`}>
{skills.slice(0, 3).map((skill, index) => {
return <InfoItem name={skill} key={index} />
})}
{skills.length > 3 &&
<div className="bg-bgGrey rounded-[6px] w-[28px] h-[28px] flex justify-center items-center">
<span className="text-white text-[13px] font-[400]">+{skills.length - 3}</span>
</div>
}
</div>
</div>
}

4
components/info-block.tsx
View File

@ -3,9 +3,9 @@ import Image from "next/image";
const InfoBlock: React.FC = () => {
return (
<div className="flex bg-blue rounded-[25px] relative max-w-[1032px] w-full m-auto pt-[59.5px] pb-[59.5px] h-[234px] text-center justify-center">
<div className="hidden lg:flex bg-blue rounded-[25px] relative max-w-[1033px] w-full m-auto pt-[59.5px] pb-[59.5px] h-[234px] text-center justify-center">
<p className="text-white text-[32px] max-w-[671px] font-[700]">Через собственное развитие мы развиваем и популяризируем гештальт-подход</p>
<Image className="absolute right-0 top-[-20px]" src="/images/palm.svg" alt="palm" width={217} height={254} />
<Image className=" absolute right-0 top-[-20px]" src="/images/palm.svg" alt="palm" width={217} height={254} />
</div>
);
};

5
components/info-item.tsx
View File

@ -3,15 +3,16 @@ import Image from "next/image";
interface Props {
name: string;
variable?: 'default' | 'lg' | 'secondary' | 'white' | 'lgFixed' | 'whiteFixed';
variable?: 'default' | 'lg' | 'secondary' | 'white' | 'lgFixed' | 'whiteFixed' | 'lgDefault';
pathImg?: string;
}
const InfoItem: React.FC<Props> = ({name, variable = 'default', pathImg}) => {
const variantClasses = {
default: 'text-[12px] py-[4px] px-[8px] rounded-[3px] border-[0.5px] text-blue font-[700]',
default: 'text-[13px] px-[9.5px] rounded-[6px] border-[0.5px] text-blue font-[400] min-h-[28px] max-h-[28px] h-full',
secondary: 'text-[16px] text-lightBlack border-[1px] rounded-[6px] py-[10px] px-[28px] gap-[10px] items-center',
lg: 'px-[10px] py-[6.5px] rounded-[6px] border-[1px] text-[16px] text-blue font-[700]',
lgDefault: 'text-[14px] px-[9.5px] rounded-[6px] border-[0.5px] text-blue font-[400] max-w-[114px] w-full min-h-[34px] h-full',
lgFixed: 'px-[10px] py-[6.5px] max-w-[140px] w-full rounded-[6px] border-[1px] text-[16px] text-blue',
white: 'text-[12px] py-[9px] px-[16px] text-blue bg-white rounded-[6px]',
whiteFixed: 'tex-[14px] rounded-[6px] max-w-[114px] w-full bg-white py-[5px] text-blue font-[700]'

6
components/nav-section.tsx
View File

@ -5,13 +5,13 @@ import SectionItem from "@/components/section-item";
const NavSection: React.FC= () => {
const navigations : string[] = ["конференции", "акредитации", "открытые сертификации", "открытые сертификации", "общие сборы", "протоколы сборов", "новости сайта", "календарь событий", "сайт мги", "вопросы и ответы"]
return (
<div className="flex gap-[53px] items-end m-auto">
<div className="flex max-w-[645px] flex-wrap gap-x-[15px] gap-y-[12px]">
<div className="flex-col w-full max-w-[1083px] px-[25px] flex gap-[53px] items-end m-auto md:flex-row">
<div className="flex md:max-w-[645px] flex-wrap gap-x-[15px] gap-y-[12px]">
{navigations.map((nav, index) => {
return <InfoItem name={nav} key={index} variable="lg" />
})}
</div>
<div className="flex gap-[19px]">
<div className="flex gap-[19px] m-auto">
<SectionItem name="Книги" />
<SectionItem name="лекции" />
</div>

2
components/pagination.tsx
View File

@ -72,7 +72,7 @@ const Pagination: React.FC<PaginationProps> = ({
)
))}
</div>
<button className="flex items-center text-[15px] font-[700] ml-[26px] gap-[11px]" onClick={() => handlePageChange(currentPage + 1)} disabled={currentPage === totalPages}>
<button className=" flex items-center text-[15px] font-[700] ml-auto md:ml-[26px] gap-[11px]" onClick={() => handlePageChange(currentPage + 1)} disabled={currentPage === totalPages}>
Следующая страница
<Image className="rotate-[-90deg] relative top-[-2px]" src="/images/chevronDown.svg" alt="arrow" width={11} height={11} />
</button>