zojgame/graff.estate-nextjs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

project with year starting

Browse Source
This commit is contained in:
zojgame
2024-03-22 18:02:48 +05:00
parent 026fd6a949
commit 8ecd402849
8 changed files with 133 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/images/award.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 248 KiB

After

Width:  |  Height:  |  Size: 81 KiB

src/app/page.tsx
+93 -23
View File
@@ -27,23 +27,81 @@ import VKIcon from "@components/icons/VKIcon";
import YouTubeIcon from "@components/icons/YouTubeIcon";
import TelegramIcon from "@components/icons/TelegramIcon";
import { IProject } from "../types/IProject";
import { SortedProject } from "../types/SortedProject";
import { ProjectYear } from "../types/ProjectYear";
import Histories from "@components/Histories";
import Winners from "@components/Winners";
import { getTime, getDate, getYear } from "date-fns";
import YearCard from "@components/CardYear";
import ProjectYearSection from "@components/ProjectYearSection";
function getSortedProjects(projects: IProject[]) {
const sorted = [...projects].sort(
(da, db) => getTime(db.releaseDate) - getTime(da.releaseDate)
);
const sortedProject: SortedProject = new Map();
for (let i = 0; i < sorted.length; i++) {
const project = sorted[i];
const projectYear = getYear(project.releaseDate);
const key = project.stage !== 6 ? "В работе" : projectYear;
// if(project.stage === 6){
// if(sortedProject.has(key)){
// }
// }
if (sortedProject.has(key)) {
const prevProjects = sortedProject.get(key) as IProject[];
const updatedProjects = [...prevProjects, project];
sortedProject.set(key, updatedProjects);
} else {
const createdProjects = [project];
sortedProject.set(key, createdProjects);
}
}
console.log("sortedProject", sortedProject);
return sortedProject;
}
function getProjectYears(projects: IProject[]) {
const projectYears: number[] = [];
for (let i = 0; i < projects.length; i++) {
const project = getYear(projects[i].releaseDate);
if (projectYears.includes(project)) continue;
projectYears.push(project);
}
projectYears.sort((a, b) => b - a);
const projectLabels = ["В работе", ...projectYears];
return projectLabels;
}
export default function App() {
const [selectedVideo, setSelectedVideo] = useState<string>(
"/videos/features/virtual_tour.mp4"
);
const [projects, setProjects] = useState<IProject[]>([]);
const [projectYears, setProjectYears] = useState<number[]>([]);
const [sortedProjects, setSortedProjects] = useState<SortedProject>();
const [setModal] = useModalStore((state) => [state.setModal]);
const [isShownAllProjects, setIsShownAllProjects] = useState<boolean>(false);
const [isBuffering, setIsBuffering] = useState(true);
async function getProjects() {
try {
const projects: IProject[] = await api.get("projects").json();
const _projects: IProject[] = await api.get("projects").json();
const _projectYears = getProjectYears(_projects);
const _sortedProjects = getSortedProjects(_projects);
setProjects(projects);
setProjectYears(_projectYears);
setSortedProjects(_sortedProjects);
setProjects(_projects);
} catch (error) {
if (error instanceof Error) {
alert(`Error: ${error.message}`);
@@ -585,14 +643,28 @@ export default function App() {
</div>
</div>
<Winners />
<div className="flex flex-col 2xl:gap-16 xl:gap-10 gap-8 2xl:mb-[200px] sm:mb-[120px] mb-20">
<Heading2>Проекты</Heading2>
<div className="2xl:grid hidden xl:grid-cols-3 sm:grid-cols-2 2xl:gap-8 xl:gap-6 gap-3">
<div className="2xl:grid hidden xl:grid-cols-4 sm:grid-cols-3 gap-4">
{/* {projectYears.map((year) => {
const projects =
(sortedProjects && sortedProjects.get(year)) ?? [];
return (
<ProjectYearSection
key={year}
year={year}
projects={projects}
/>
);
})} */}
{projects.map((project, index) => (
<ProjectCard key={index} {...project} />
))}
</div>
<div className="2xl:hidden grid xl:grid-cols-3 sm:grid-cols-2 2xl:gap-8 xl:gap-6 gap-3">
<div className="2xl:hidden grid xl:grid-cols-4 sm:grid-cols-3 gap-4">
{[...Array(5)].map((_, index) => (
<ProjectCard key={index} {...projects[index]} />
))}
@@ -632,28 +704,26 @@ export default function App() {
<img src="/images/blendings/6.svg" alt="" />
</div>
</div>
<Winners />
<div className="relative overflow-hidden pb-[50px]">
<div className="lg:mt-40 sm:mt-[120px] mt-[88px]">
<div className="grid lg:grid-cols-4 grid-cols-1 lg:gap-4 gap-6">
<div className="col-span-1">
<div className="grid lg:grid-cols-1 sm:grid-cols-2 lg:gap-6 gap-4">
<p className="2xl:text-[64px] xl:text-5xl text-[40px] font-gilroy text-gradient font-medium w-fit leading-none">
Свяжитесь
<br />с нами
</p>
<p className="2xl:text-xl lg:text-lg font-gilroy font-semibold leading-tight">
Хотите увеличить конверсию?
<br />
Давайте обсудим детали!
</p>
</div>
</div>
<div className="lg:col-span-3">
<FeedbackForm />
<div className="relative overflow-hidden pb-[50px]">
<div className="grid lg:grid-cols-4 grid-cols-1 lg:gap-4 gap-6">
<div className="col-span-1">
<div className="grid lg:grid-cols-1 sm:grid-cols-2 lg:gap-6 gap-4">
<p className="2xl:text-[64px] xl:text-5xl text-[40px] font-gilroy text-gradient font-medium w-fit leading-none">
Свяжитесь
<br />с нами
</p>
<p className="2xl:text-xl lg:text-lg font-gilroy font-semibold leading-tight">
Хотите увеличить конверсию?
<br />
Давайте обсудим детали!
</p>
</div>
</div>
<div className="lg:col-span-3">
<FeedbackForm />
</div>
</div>
<div className="mt-[104px] relative">
<div className="relative grid lg:grid-cols-4 gap-4">
src/components/CardYear.tsx
+9
View File
@@ -0,0 +1,9 @@
interface YearCardProps {
year: number;
}
const YearCard = ({ year }: YearCardProps): JSX.Element => {
return <div className="font-semibold text-xl">{year}</div>;
};
export default YearCard;
src/components/ProjectCard.tsx
+1 -1
View File
@@ -23,7 +23,7 @@ function ProjectCard({
whileInView={{ opacity: 1 }}
viewport={{ once: true, margin: "-100px" }}
transition={{ duration: 1, ease: [0.58, 0.12, 0.27, 0.98], delay: 0.2 }}
className="group relative aspect-[4/3] p-4 flex items-end overflow-hidden"
className="group relative aspect-square p-4 flex items-end overflow-hidden"
>
<div
className="group-hover:scale-110 transition-transform duration-500 absolute top-0 left-0 w-full h-full bg-cover bg-center bg-no-repeat"
src/components/ProjectYearSection.tsx
+21
View File
@@ -0,0 +1,21 @@
import { IProject } from "../types/IProject";
import YearCard from "./CardYear";
import ProjectCard from "./ProjectCard";
type ProjectYearSectionProps = {
year: number;
projects: IProject[];
};
const ProjectYearSection = ({ year, projects }: ProjectYearSectionProps) => {
return (
<>
<YearCard year={year} />
{projects.map((project, index) => (
<ProjectCard key={index} {...project} />
))}
</>
);
};
export default ProjectYearSection;
src/components/Winners.tsx
+1 -3
View File
@@ -3,13 +3,12 @@ import Heading2 from "./Headings/Heading2";
const Winners = () => {
return (
<div className="flex sm:flex-row flex-col-reverse border border-[#3D425C] font-gilroy">
<div className="flex sm:flex-row flex-col-reverse border border-[#3D425C] font-gilroy 2xl:mb-[200px] sm:mb-[120px] mb-20">
<div className="flex justify-center items-center sm:w-1/2 py-5 px-16 sm:border-r border-t sm:border-t-0 border-[#3D425C]">
<img src="/images/award.png" alt="awards" />
</div>
<div className="flex flex-col sm:w-1/2 sm:justify-between justify-center gap-4 2xl: xl:p-[72px] sm:p-7 py-5 px-8">
<div>
{/* <p className="2xl:text-[64px] 2xl:leading-[64px] xl:text-5xl xl:leading-[48px] text-[40px] leading-10 xl:mb-8 sm:mb-6 mb-4"> */}
<Heading2 className="xl:mb-8 sm:mb-6 mb-4">
<span className="">Победители</span>
<br />
@@ -17,7 +16,6 @@ const Winners = () => {
<br />
<span className="text-gradient-none"> в номинации IT</span>
</Heading2>
{/* </p> */}
<p className="font-semibold 2xl:text-xl 2xl:leading-6 text-sm leading-[19.2px] 2xl:max-w-[448px] xl:max-w-[395px] sm:max-w-[311px] max-w-[288px] text-wrap">
В 2023 году наш продукт для застройщиков graff.estate был признан
лучшим в категории IT на Акселераторе технологических стартапов от
src/types/ProjectYear.ts
+3
View File
@@ -0,0 +1,3 @@
type ProjectYear = number | string;
export type {ProjectYear}
src/types/SortedProject.ts
+5
View File
@@ -0,0 +1,5 @@
import { IProject } from "./IProject";
type SortedProject = Map<number | string, IProject[]>
export type {SortedProject}