Skip to content

Commit

Permalink
people archive page
Browse files Browse the repository at this point in the history
  • Loading branch information
@GraemeFulton
GraemeFulton committed Feb 15, 2024
1 parent 8d50233 commit fae02bb
Show file tree
Hide file tree
Showing 12 changed files with 217 additions and 95 deletions.
200 changes: 148 additions & 52 deletions components/people/ProfileCard.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import Image from "next/image";
import Link from "next/link";
import gumletLoader from "../new-index/gumletLoader";

import { DribbbleLogo, TwitterLogo, GithubLogo, MapPin } from "phosphor-react";
import { accountLocations } from "@/lib/constants";
import { useState } from "react";
export default function ProfileCard({
title,
slug,
Expand All @@ -10,67 +12,161 @@ export default function ProfileCard({
bio = "",
location = "",
avatar = "",
twitter, dribbble, kofi, github
}) {
let skillArr = [];
if (skills && skills !== "") {
skillArr = skills.split(",");
}
const img = avatar ? avatar : legacyAvatar;

const [locationNiceName, setLocationNiceName] = useState(()=>{
if(location){
for(var x =0;x<accountLocations?.length;x++){
if(accountLocations[x]?.Code==location){
return(accountLocations[x]?.Name)
}
}
}
})


return (
<Link href={`/people/${slug}`}>
<div className="flex shadow-sm group flex-col flex-grow h-full border-black/5 border-1 hover:shadow-lg transition-shadow duration-500 bg-white relative rounded-3xl">
<div className="p-3 flex flex-col">
{img && (
<div className="basis-[68px] mr-5 w-full flex justify-center">
<div
className="rounded-full flex basis-[68px] my-auto transform group-hover:scale-110 transition duration-700 ease-out"
style={{ height: "68px", width: "68px" }}
>

<Image
loader={gumletLoader}
width="68"
height="68"
alt={`Avatar for ${title}`}
className="border-black border-opacity-[0.05] mx-auto border border-1 h-[68px] w-[68px] object-cover cursor-pointer flex-shrink-0 shine rounded-full bg-white"
src={img}
/>
</div>
<div
className="cursor-pointer relative w-full rounded-2xl"
// style={{ height: 300 }}
>
<div className="flex relative flex-col flex-grow h-full rounded-t-2xl shadow-sm hover:shadow-lg pb-8 bg-white relative rounded-2xl fade-undefined">
<Link
className="absolute block w-full h-full z-10"
href={`/people/${slug}`}
/>
<div
className="rounded-t-2xl flex w-full bg-gray-200/90"
style={{
// background: "linear-gradient(#82e788, #91f697)",
display: "flex",
height: 95,
opacity: 1
}}
/>
<div>
<div
className="rounded-full bg-white absolute -mt-[30px] left-[12px]"
// style={{ position: "absolute", marginTop: "-12px", left: 12 }}
>
{img? <Image
loader={gumletLoader}
width="68"
height="68"
alt={`Avatar for ${title}`}
className="w-[68px] h-[68px] object-cover rounded-full flex-shrink-0 shine border-2 border-white bg-white shadow-md gm-loaded gm-observing gm-observing-cb"
src={img}
/>:<div className="w-[68px] h-[68px] rounded-full bg-gray-100"/>}
</div>
</div>
<div className="relative px-5 pt-10 flex justify-between">
<div className="overflow-hidden mt-1">
<div>
<h1
className="text-lg mb-2 font-medium overflow-hidden heading mt-0 h-6 mt-0 text-black/90"
>
{title}
</h1>
</div>
{locationNiceName? <div className="text-sm flex leading-normal my-2 text-black/80 font-normal capitalize">
<MapPin className="mr-1 my-auto" color="rgba(0,0,0,0.8)" width={16} height={16}/>
<div className="inline-block my-auto">{locationNiceName}</div>
</div>:null}
<div className="text-sm text-gray-700 h-10 mt-2">
<div>
{bio}
</div>
)}
<div className="flex flex-col my-auto">
<div className="relative flex justify-between">
<div className="overflow-hidden">
<div>
<Link href={`/people/${slug}`}>
<h1 style={{wordWrap:'break-word', wordBreak: 'break-word'}} className="text-lg font-bold cursor-pointer overflow-hidden mt-0 h-6 mt-0 text-gray-900">
{title}
</h1>
</Link>
</div>
{/* <div className="text-xs uppercase text-gray-700 mt-1">
{location}
</div> */}
<div className="text-base text-gray-700 mt-2 clamp-2">
<div dangerouslySetInnerHTML={{ __html: bio }} style={{wordWrap:'break-word', wordBreak: 'break-word'}} />
</div>
</div>
</div>
{/* {skillArr?.length?<div className="text-base text-gray-600 mt-3 h-7 overflow-hidden">
{skillArr.length
? skillArr.map((skill) => {
return (
<div className="bg-gray-200 mr-2 text-gray-600 text-xs mb-1 px-2 py-1 rounded inline-block">
# {skill}
</div>
);
})
: null}
</div>:''} */}

</div>
</div>
<div className="flex absolute top-0 right-0 mr-2.5 mt-3 z-20">
{twitter?<a
className="link block mx-1"
href="https://web.archive.org/web/20210127134122/https://twitter.com/ebruspace"
target="_blank"
>
<TwitterLogo color="rgba(0,0,0,0.8)" width={20} height={20}/>
</a>:null}
{dribbble?<a
className="link block mx-1"
href="https://web.archive.org/web/20210127134122/https://twitter.com/ebruspace"
target="_blank"
>
<DribbbleLogo color="rgba(0,0,0,0.8)" width={20} height={20}/>
</a>:null}
{github?<a
className="link block mx-1"
href="https://web.archive.org/web/20210127134122/https://twitter.com/ebruspace"
target="_blank"
>
<GithubLogo color="rgba(0,0,0,0.8)" width={20} height={20}/>
</a>:null}
</div>
</div>
</Link>
{/* <div
className="text-base text-gray-600 mt-2 mx-5 absolute bottom-0 mb-5 overflow-hidden"
style={{ height: 27 }}
>
{skillArr?.map((skill)=>{
return (<div className="bg-gray-200 mr-2 text-gray-600 text-xs px-2 py-1 rounded inline-block">
{skill}
</div>)
})}
</div> */}
</div>
</div>


);
}


// <Link href={`/people/${slug}`}>
// <div className="flex shadow-sm group flex-col flex-grow h-full border-black/5 border-1 hover:shadow-lg transition-shadow duration-500 bg-white relative rounded-2xl">
// <div className="p-3 flex flex-col">
// {img && (
// <div className="basis-[68px] mr-5 w-full flex justify-center">
// <div
// className="rounded-full flex basis-[68px] my-auto transform group-hover:scale-110 transition duration-700 ease-out"
// style={{ height: "68px", width: "68px" }}
// >

// <Image
// loader={gumletLoader}
// width="68"
// height="68"
// alt={`Avatar for ${title}`}
// className="border-black border-opacity-[0.05] mx-auto border border-1 h-[68px] w-[68px] object-cover cursor-pointer flex-shrink-0 shine rounded-full bg-white"
// src={img}
// />
// </div>
// </div>
// )}
// <div className="flex flex-col my-auto">
// <div className="relative flex justify-between">
// <div className="overflow-hidden">
// <div>
// <Link href={`/people/${slug}`}>
// <h1 style={{wordWrap:'break-word', wordBreak: 'break-word'}} className="text-lg font-bold cursor-pointer overflow-hidden mt-0 h-6 mt-0 text-gray-900">
// {title}
// </h1>
// </Link>
// </div>
// {/* <div className="text-xs uppercase text-gray-700 mt-1">
// {location}
// </div> */}
// <div className="text-base text-gray-700 mt-2 clamp-2">
// <div dangerouslySetInnerHTML={{ __html: bio }} style={{wordWrap:'break-word', wordBreak: 'break-word'}} />
// </div>
// </div>
// </div>

// </div>
// </div>
// </div>
// </Link>
4 changes: 2 additions & 2 deletions components/people/ProfilePageLayout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,10 +100,10 @@ const ProfilePageLayout = ({
<img src='/static/images/toolbox/squares.svg' className=" opacity absolute w-full h-full object-cover top-0 left-0"/>

{/* <div className="magicpattern absolute top-0 left-0 w-full"/> */}
<div className="relative max-w-[1320px] mx-auto flex justify-center">
<div className="relative px-6 md:px-0 max-w-[1320px] mx-auto flex flex-col md:flex-row justify-center">

<div
className="w-[168px] bg-white h-[168px] -mt-2 rounded-full border border-1 overflow- relative border-black/10 shadow-sm mr-12"
className="w-[168px] bg-white h-[168px] -mt-2 rounded-full border border-1 overflow- relative border-black/10 shadow-sm mb-3 md:mb-0 md:mr-12"
>
{(kofi || (unapproved && user?.profile?.kofi)) && (
<div className="absolute z-10 bottom-0 mb-3 left-0">
Expand Down
8 changes: 4 additions & 4 deletions components/toolbox/ToolboxHeroWithEmailSignup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,8 +139,8 @@ const ToolBoxHeroWithSignup = ({user}) => {
<div className="w-full max-w-full relative py-5 flex flex-col gap-2 overflow-hidden">
<div className=" flex flex-col items-center max-w-7xl mx-auto grid gap-5 top-0 w-full ">
<MotionSlider
initialDuration={60}
slides={ProductListData.map((data, i) => {
initialDuration={180}
slides={ProductListData.map((data, i) => {
return (
<MotionSliderToolCard
title={data.title}
Expand All @@ -152,8 +152,8 @@ const ToolBoxHeroWithSignup = ({user}) => {
})}
/>
<MotionSlider
initialDuration={45}
slides={ProductListData2.map((data, i) => {
initialDuration={150}
slides={ProductListData2.map((data, i) => {
return (
<MotionSliderToolCard
slug={data.slug}
Expand Down
8 changes: 4 additions & 4 deletions components/toolbox/toolboxHero.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,8 +124,8 @@ const ToolBoxHero = () => {
<div className="w-full max-w-full relative py-5 flex flex-col gap-2 overflow-hidden">
<div className=" flex flex-col items-center max-w-7xl mx-auto grid gap-5 top-0 w-full ">
<MotionSlider
initialDuration={60}
slides={ProductListData.map((data, i) => {
initialDuration={180}
slides={ProductListData.map((data, i) => {
return (
<MotionSliderToolCard
title={data.title}
Expand All @@ -137,8 +137,8 @@ const ToolBoxHero = () => {
})}
/>
<MotionSlider
initialDuration={45}
slides={ProductListData2.map((data, i) => {
initialDuration={150}
slides={ProductListData2.map((data, i) => {
return (
<MotionSliderToolCard
slug={data.slug}
Expand Down
4 changes: 2 additions & 2 deletions components/v4/layout/TwoColumnCardsB.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@ import Link from "next/link";
const dummyData = [{
image:'/static/images/jobs.svg',
slug:'/network',
class:'bg-gray-100',
class:'bg-gray-50',
title:'Post an article',
description:'Share your story with us and get featured in the newsletter.'
},
{image:'/static/images/botty.svg',
slug:'/toolbox',
class:'bg-gray-100',
class:'bg-gray-50',
title:'Get your tool featured',
description:'List your tool in the Prototypr Toolbox and claim your page.'}
]
Expand Down
4 changes: 2 additions & 2 deletions components/v4/section/HeroArticleSection.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@
import Container from "@/components/container";
import HeroPostGrid from "../layout/HeroPostGrid";
// import {RssSimple} from 'phosphor-react'
const HeroArticleSection = ({user, heroCardPost,showBigPost, viewablePosts, cols,title }) => {
const HeroArticleSection = ({user, heroCardPost,showBigPost, viewablePosts, cols,title, showHeading,showHeadingRow }) => {
return (
<Container maxWidth="max-w-[1320px]">
{/* <div className="w-full shadow-md h-full grid grid-cols-12 flex justify-center bg-white rounded-3xl p-6 lg:p-6"> */}
<div className="w-full h-full grid grid-cols-12 flex justify-center">
<div className={`w-full max-w-full flex flex-col col-span-12 `}>
<HeroPostGrid cols={cols} showBigPost={showBigPost} title={title} largePost={heroCardPost} smallPosts={viewablePosts} />
<HeroPostGrid title={title} showHeading={showHeading} showHeadingRow={showHeadingRow} cols={cols} showBigPost={showBigPost} largePost={heroCardPost} smallPosts={viewablePosts} />
</div>
{/* <SidebarDiscover
paddingTop="hidden ml-4 pl-6 lg:block pt-12"
Expand Down
21 changes: 16 additions & 5 deletions components/v4/section/PostsSectionHero.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,31 @@ import RSSTitle from "../text/RSSTitle";
import SectionDivider from "./SectionDivider";
import TagsNavRow from "./TagsNavRow";
import HeroPostGrid from "../layout/HeroPostGrid";
import HeroArticleSection from "./HeroArticleSection";
// import {CaretRight} from 'phosphor-react'
// import ToolIconCard from "../card/ToolIconCard";
// import Link from 'next/link'
// import {RssSimple} from 'phosphor-react'
const PostsSectionHero = ({user, heroCardPost,toolsList,showHeroTitle, viewablePosts, showTags,title, showRecent,showTitle }) => {
const PostsSectionHero = ({user, heroCardPost,toolsList,showHeroTitle,groupSlice, viewablePosts, showTags,title, showRecent,showTitle }) => {
return (
<Container maxWidth="max-w-[1320px]">
{showRecent &&
<>
{/* <div className="w-full shadow-md h-full grid grid-cols-12 flex justify-center bg-white rounded-3xl p-6 mt-6 lg:p-6"> */}
<div className="w-full h-full grid grid-cols-12 flex justify-center">
<div className={`w-full max-w-full flex flex-col col-span-12 `}>
<div className={`w-full max-w-full flex flex-col col-span-12 mt-3 `}>
{/* <PostsGridHero title={title} largePost={heroCardPost} showHeading={showHeroTitle!==false} smallPosts={viewablePosts} /> */}
<PostsGroup3Cards posts={[heroCardPost,...viewablePosts?.slice(0,2)]} />
{/* <PostsGroup3Cards posts={[heroCardPost,...viewablePosts?.slice(0,2)]} /> */}
<HeroArticleSection
cols={3}
title={false}
showHeading={false}
showHeadingRow={false}
// cols={3}
heroCardPost={heroCardPost}
viewablePosts={viewablePosts?.slice(0,3)}
// showBigPost={false}
showBigPost={2}/>
{/* <HeroPostGrid cols={3} showBigPost={2} showHeadingRow={false} largePost={heroCardPost} smallPosts={viewablePosts} /> */}
</div>
</div>
Expand All @@ -32,7 +43,7 @@ const PostsSectionHero = ({user, heroCardPost,toolsList,showHeroTitle, viewableP
<TagsNavRow/>
</div>
}
<div className="w-full h-full grid grid-cols-12 flex justify-center">
<div className="w-full h-full grid grid-cols-12 flex justify-center px-3">
<div className={`${!showRecent?'-mt-4':''} w-full max-w-full flex flex-col gap-2 col-span-12 `}>
<div className="flex justify-between">
{showTitle!==false &&
Expand All @@ -41,7 +52,7 @@ const PostsSectionHero = ({user, heroCardPost,toolsList,showHeroTitle, viewableP
</div>
}
</div>
<PostsGroup3Cards posts={!showRecent?viewablePosts:viewablePosts?.slice(2,viewablePosts?.length)}/>
<PostsGroup3Cards posts={!showRecent?viewablePosts:viewablePosts?.slice(groupSlice?groupSlice:2,viewablePosts?.length)}/>
</div>
{/* <SidebarDiscover
paddingTop="hidden ml-4 pl-6 lg:block pt-12"
Expand Down
4 changes: 4 additions & 0 deletions lib/queries/newPeopleQuery.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,10 @@ query newPeopleQuery ($pageSize: Int, $page: Int){
}
}
}
twitter
dribbble
github
kofi
skills
legacyAvatar
}
Expand Down
Loading

0 comments on commit fae02bb

Please sign in to comment.