-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #91 from BacPacNet/v2/community-post
created post and imageSlider
- Loading branch information
Showing
24 changed files
with
933 additions
and
71 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import LeftNavWrapper from '@/components/molecules/LeftNavWrapper' | ||
| import UniversityCard from '@/components/molecules/UniversityCard' | ||
| import PostContainer from '@/components/organisms/PostsContainer' | ||
| import UserPostContainer from '@/components/organisms/UserPostContainer' | ||
| import { PostInputType } from '@/types/constants' | ||
| import React from 'react' | ||
|
|
||
| const Community = () => { | ||
| return ( | ||
| <LeftNavWrapper> | ||
| <UniversityCard | ||
| universityLogo={''} | ||
| universityName={'Lorem University'} | ||
| isAiPowered={true} | ||
| joinedSince={'07/12/23'} | ||
| description={ | ||
| 'Official community page for Lorem University. For inquiries contact the Human Resources Department in B-Wing of Northern Campus.' | ||
| } | ||
| memberCount={200} | ||
| /> | ||
| <UserPostContainer type={PostInputType.Community} /> | ||
| <PostContainer /> | ||
| </LeftNavWrapper> | ||
| ) | ||
| } | ||
|
|
||
| export default Community |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,28 +1,16 @@ | ||
| import LeftNavWrapper from '@/components/molecules/LeftNavWrapper' | ||
| import UniversityCard from '@/components/molecules/UniversityCard' | ||
| import LeftNavbar from '@/components/organisms/LeftNavbar' | ||
| import PostContainer from '@/components/organisms/PostsContainer' | ||
| import UserPostContainer from '@/components/organisms/UserPostContainer' | ||
| import { PostInputType } from '@/types/constants' | ||
| import React from 'react' | ||
|
|
||
| export default function Timeline() { | ||
| return ( | ||
| <div className="flex h-screen gap-8 py-8 px-4"> | ||
| <div className="w-1/5 hidden md:block"> | ||
| <LeftNavbar /> | ||
| </div> | ||
| <div className="w-3/5"> | ||
| <UniversityCard | ||
| universityLogo={''} | ||
| universityName={'Lorem University'} | ||
| isAiPowered={true} | ||
| joinedSince={'07/12/23'} | ||
| description={ | ||
| 'Official community page for Lorem University. For inquiries contact the Human Resources Department in B-Wing of Northern Campus.' | ||
| } | ||
| memberCount={200} | ||
| /> | ||
| <UserPostContainer /> | ||
| </div> | ||
| <div className="w-1/5 rounded-2xl shadow-2xl bg-white hidden lg:block"></div> | ||
| </div> | ||
| <LeftNavWrapper> | ||
| <UserPostContainer type={PostInputType.Timeline} /> | ||
| <PostContainer /> | ||
| </LeftNavWrapper> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| import React from 'react' | ||
| import Image from 'next/image' | ||
| import { PostType } from '@/types/constants' | ||
|
|
||
| type props = { | ||
| images: { | ||
| imageUrl: string | ||
| }[] | ||
| setImageCarasol: React.Dispatch< | ||
| React.SetStateAction<{ | ||
| isShow: boolean | ||
| images: any | ||
| currImageIndex: number | null | ||
| }> | ||
| > | ||
| idx: number | ||
| type: PostType.Community | PostType.Timeline | ||
| } | ||
|
|
||
| const DynamicImageContainer = ({ images, setImageCarasol }: props) => { | ||
| const imageCount = images?.length | ||
|
|
||
| if (imageCount == 0) { | ||
| return <div></div> | ||
| } | ||
|
|
||
| const handleImageClick = (index: number) => { | ||
| setImageCarasol({ | ||
| isShow: true, | ||
| images: images, | ||
| currImageIndex: index, | ||
| }) | ||
| } | ||
| const getGridTemplate = () => { | ||
| switch (imageCount) { | ||
| case 1: | ||
| return 'grid-cols-1' | ||
| case 2: | ||
| return 'grid-cols-2' | ||
| case 3: | ||
| return 'grid-cols-2 grid-rows-2' | ||
| case 4: | ||
| return 'grid-cols-3 grid-rows-2' | ||
| default: | ||
| return 'grid-cols-3 grid-rows-2' | ||
| } | ||
| } | ||
|
|
||
| return ( | ||
| <div className={`grid gap-2 ${getGridTemplate()} w-full h-80 px-4 mx-auto`}> | ||
| {images?.slice(0, 4).map((src, index) => ( | ||
| <div | ||
| key={index} | ||
| className={`relative overflow-hidden flex ${imageCount == 1 && 'h-80'} ${imageCount == 2 && 'h-80'} ${ | ||
| imageCount === 3 && index === 2 && 'col-span-2 ' | ||
| } ${imageCount === 4 && index === 2 ? 'row-span-2 ' : ''} ${imageCount >= 4 && index === 2 && 'row-span-2 '} ${ | ||
| imageCount >= 4 && index === 3 && 'col-span-2 ' | ||
| } `} | ||
| onClick={() => handleImageClick(index)} | ||
| > | ||
| <Image | ||
| layout="fill" | ||
| objectFit="cover" | ||
| objectPosition="center" | ||
| key={index} | ||
| src={src.imageUrl} | ||
| alt={`Image ${index + 1}`} | ||
| className="rounded-lg " | ||
| /> | ||
| {imageCount > 4 && index == 2 && ( | ||
| <div className="absolute bg-slate-50 shadow-lg w-40 h-40 -right-10 -bottom-10 rounded-full text-neutral-700 flex items-center justify-center"> | ||
| +{imageCount - 4} | ||
| </div> | ||
| )} | ||
| </div> | ||
| ))} | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default DynamicImageContainer |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| 'use client' | ||
| import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/Popover' | ||
| import Link from 'next/link' | ||
|
|
||
| import React from 'react' | ||
| import { FiMoreHorizontal } from 'react-icons/fi' | ||
| import { HiOutlineBell, HiOutlineFlag } from 'react-icons/hi' | ||
| import { MdOutlineBookmarkBorder, MdOutlineOpenInNew } from 'react-icons/md' | ||
|
|
||
| interface PostOptionType { | ||
| postID: string | ||
| isType: string | ||
| } | ||
|
|
||
| const PostCartOption = ({ postID, isType }: PostOptionType) => { | ||
| return ( | ||
| <Popover> | ||
| <PopoverTrigger> | ||
| <FiMoreHorizontal /> | ||
| </PopoverTrigger> | ||
| <PopoverContent className="relative right-16 bottom-16 w-auto p-5 border-none shadow-lg bg-white shadow-gray-light"> | ||
| <div className="flex flex-col gap-5"> | ||
| <div className="flex gap-1 items-center"> | ||
| <Link className="flex gap-1 items-center" href={`/post/${postID}?isType=${isType}`}> | ||
| <MdOutlineOpenInNew className="text-primary" size={20} /> | ||
| <p className="font-medium text-sm">Open Post</p> | ||
| </Link> | ||
| </div> | ||
| <div className="flex gap-1 items-center"> | ||
| <MdOutlineBookmarkBorder className="text-primary" size={20} /> | ||
| <p className="font-medium text-sm">Save Post</p> | ||
| </div> | ||
| <div className="flex gap-1 items-center"> | ||
| <HiOutlineBell className="text-primary" size={20} /> | ||
| <p className="font-medium text-sm">Mute Post from</p> | ||
| </div> | ||
| <div className="flex gap-1 items-center"> | ||
| <HiOutlineFlag className="text-primary" size={20} /> | ||
| <p className="font-medium text-sm">Report this Post</p> | ||
| </div> | ||
| </div> | ||
| </PopoverContent> | ||
| </Popover> | ||
| ) | ||
| } | ||
|
|
||
| export default PostCartOption |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| .swiper { | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
|
|
||
| .swiper-slide { | ||
| text-align: center; | ||
| font-size: 18px; | ||
| background: #fff; | ||
|
|
||
| /* Center slide text vertically */ | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .swiper-slide img { | ||
| display: block; | ||
| width: 100%; | ||
| height: 100%; | ||
| object-fit: cover; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| import React from 'react' | ||
| // Import Swiper React components | ||
| import { Swiper, SwiperSlide } from 'swiper/react' | ||
|
|
||
| // Import Swiper styles | ||
| import 'swiper/css' | ||
| import 'swiper/css/pagination' | ||
| import 'swiper/css/navigation' | ||
|
|
||
| import './index.css' | ||
|
|
||
| // import required modules | ||
| import { Keyboard, Pagination, Navigation } from 'swiper/modules' | ||
| import Image from 'next/image' | ||
|
|
||
| type prop = { | ||
| images: { imageUrl: string }[] | ||
| initialSlide: number | null | ||
| } | ||
|
|
||
| export default function PostImageSlider({ images, initialSlide }: prop) { | ||
| return ( | ||
| <div className="z-40 fixed w-[60%] top-1/4 h-3/6 "> | ||
| <Swiper | ||
| slidesPerView={1} | ||
| spaceBetween={30} | ||
| keyboard={{ | ||
| enabled: true, | ||
| }} | ||
| pagination={{ | ||
| clickable: true, | ||
| }} | ||
| navigation={true} | ||
| modules={[Keyboard, Navigation]} | ||
| initialSlide={initialSlide || 0} | ||
| className="mySwiper " | ||
| > | ||
| {images?.map((item: any) => ( | ||
| <SwiperSlide key={item?.imageUrl}> | ||
| {<Image layout="fill" objectFit="cover" objectPosition="center" src={item?.imageUrl} alt="item" />} | ||
| </SwiperSlide> | ||
| ))} | ||
| </Swiper> | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.