aljaz/landscape-template
1
0
Fork 0
mirror of https://github.com/aljazceru/landscape-template.git synced 2026-02-23 15:34:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: project details modal

Browse Source
This commit is contained in:
MTG2000
2022-10-06 13:03:13 +03:00
parent 9c388ecdb4
commit 034b3317aa
37 changed files with 1674 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/features/Projects/Components/Categories/Categories.stories.tsx Normal file
View File

@@ -0,0 +1,15 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import Categories from './Categories';
export default {
title: 'Projects/Explore Page/Categories',
component: Categories,
} as ComponentMeta<typeof Categories>;
const Template: ComponentStory<typeof Categories> = (args) => <Categories />;
export const Default = Template.bind({});

68
src/features/Projects/Components/Categories/Categories.tsx Normal file
View File

@@ -0,0 +1,68 @@
import { useNavigate } from 'react-router-dom';
import { useAllCategoriesQuery } from 'src/graphql';
import { FaChevronLeft, FaChevronRight } from 'react-icons/fa';
import { useCarousel } from 'src/utils/hooks';
const colors = [
'#FDF2F8',
'#F5F3FF',
'#FEFCE8',
'#F0FDF4',
'#EFF6FF',
'#FFFBEB',
'#FEF2F2',
'#FDF2F8',
'#FFF7ED',
'#F1F5F9'
]
export default function Categories() {
const { viewportRef, scrollSlides, canScrollNext, canScrollPrev, isClickAllowed } = useCarousel({
align: 'start', slidesToScroll: 2,
containScroll: "trimSnaps",
})
const { data, loading } = useAllCategoriesQuery();
const navigate = useNavigate();
if (loading || !data)
return <div className="flex gap-12">
{Array(5).fill(0).map((_, idx) =>
<div
key={idx}
className=' block p-16 rounded-16 bg-gray-100 active:scale-90 transition-transform'
>
<span className="opacity-0">category</span>
</div>
)}
</div>
return (
<div className="relative group">
<div className="overflow-hidden" ref={viewportRef}>
<div className="select-none w-full flex gap-16">
{data?.categoryList?.filter(c => c !== null).map((category, idx) =>
<button
key={category!.id}
onClick={() => { }}
className='min-w-max block p-16 rounded-16 hover:bg-gray-100 active:bg-gray-200 active:scale-90 transition-transform'
style={{ backgroundColor: colors[idx % colors.length] }}
>{category!.icon} {category!.name}</button>
)}
</div>
</div>
<button className={`absolute text-body6 w-[28px] aspect-square flex justify-center items-center left-0 -translate-x-1/2 top-1/2 -translate-y-1/2 rounded-full bg-white text-gray-400 opacity-0 ${canScrollPrev && 'group-hover:opacity-100'} active:scale-90 transition-opacity border border-gray-200 shadow-md`} onClick={() => scrollSlides(-1)}>
<FaChevronLeft />
</button>
<button className={`absolute text-body6 w-[28px] aspect-square flex justify-center items-center right-0 translate-x-1/2 top-1/2 -translate-y-1/2 rounded-full bg-white text-gray-400 opacity-0 ${canScrollNext && 'group-hover:opacity-100'} active:scale-90 transition-opacity border border-gray-200 shadow-md`} onClick={() => scrollSlides(1)}>
<FaChevronRight />
</button>
</div>
)
}

7
src/features/Projects/Components/Categories/allCategories.graphql Normal file
View File

@@ -0,0 +1,7 @@
query AllCategories {
categoryList {
id
name
icon
}
}

4
src/features/Projects/Components/ProjectCardMini/ProjectCardMini.tsx
View File

@@ -20,10 +20,10 @@ export default function ProjectCardMini({ project, onClick }: Props) {
tabIndex={0}
role='button'
>
<img src={project?.logo?.[0]['thumbnails']['large'].url} alt={project?.project ?? ''} draggable="false" className="flex-shrink-0 w-64 h-64 bg-gray-200 border-0 rounded-full hover:cursor-pointer"></img>
<img src={project?.logo?.[0]['thumbnails']['large'].url} alt={project?.title ?? ''} draggable="false" className="flex-shrink-0 w-64 h-64 bg-gray-200 border-0 rounded-full hover:cursor-pointer"></img>
<div className="justify-around items-start min-w-0 flex-1 hover:cursor-pointer"
>
<p className="text-body4 w-full font-bold overflow-ellipsis overflow-hidden whitespace-nowrap">{project?.category}</p>
<p className="text-body4 w-full font-bold overflow-ellipsis overflow-hidden whitespace-nowrap">{project?.title}</p>
{/* <p className="text-body5 text-gray-600 font-light my-[5px]">{project?.category.title}</p> */}
{/* <span className="chip-small bg-warning-50 text-yellow-700 font-light text-body5 py-[3px] px-10"> <MdLocalFireDepartment className='inline-block text-fire transform text-body4 align-middle' /> {numberFormatter(project?.votes_count)} </span> */}
</div>