Skip to content

Commit 6174070

Browse files
fluidchunkyfluidchunky
authored
Merge pull request #366 from fluidchunky/main
added home page
2 parents 1790932 + 94cb298 commit 6174070

File tree

10 files changed

+231
-22
lines changed

10 files changed

+231
-22
lines changed

‎components/cards/HomeItemCard.tsx‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
import { ProfileHeaderPlaceholder } from '~/components/placeholders/ProfileHeader'
2+
import { readexPro } from '~/elements/fonts'
3+
import { BannerImage, CompositeImage, Engagements, DynamicIcon, SimpleAvatar, Community, Animation, Author, People, Tags, LargeAvatar } from '~/elements';
4+
import { getImageUrl } from '~/utils/main';
5+
import Image from 'next/image';
6+
7+
const MAX_TITLE = 80
8+
const MAX_INTRO = 120
9+
10+
export const HomeItemCard = ({
11+
onPress,
12+
isLoading,
13+
title,
14+
banner,
15+
avatar,
16+
username,
17+
intro,
18+
highlight,
19+
wide,
20+
actionTitle,
21+
section,
22+
authorImage,
23+
community,
24+
author,
25+
project,
26+
comments,
27+
upVotes,
28+
followers,
29+
projectImage,
30+
communityImage,
31+
downVotes,
32+
noAction,
33+
members,
34+
tags,
35+
shortIntro
36+
}: any) => {
37+
38+
if (isLoading) {
39+
return <ProfileHeaderPlaceholder/>
40+
}
41+
42+
const Username = () => {
43+
if (!username) {
44+
return <div/>
45+
}
46+
47+
let fol = followers ? followers.length : 0
48+
49+
return <div className={`relative z-10 z-10`}>
50+
<h1 className={`${readexPro.className} lg:text-2xl text-2xl text-primary`}>
51+
{ isLoading ? '' : '@' + username.toLowerCase() }
52+
</h1>
53+
{/* <div className='flex flex-row'>
54+
<div className='text-white font-bold mr-1'>
55+
{ fol > 0 ? fol : '' }
56+
</div>
57+
<div className='text-gray-400 mt-2'>
58+
{ fol === 0 ? 'No followers yet' : fol === 1 ? `follower` : `${fol} followers` }
59+
</div>
60+
</div> */}
61+
</div>
62+
}
63+
64+
const CardAuthor = () => {
65+
if (!author) {
66+
if (community) {
67+
return <div className='flex flex-row mt-2'>
68+
<Community
69+
image={getImageUrl(community)}
70+
username={community}/>
71+
</div>
72+
}
73+
return <div/>
74+
}
75+
76+
return <div className='flex flex-row mt-2'>
77+
<Author
78+
image={getImageUrl(project || author || '')}
79+
community={community}
80+
username={project || author}/>
81+
</div>
82+
}
83+
84+
return <div onClick={onPress} className={`cursor-pointer flex flex-col justify-start`}>
85+
<LargeAvatar src={getImageUrl(username)}/>
86+
<div className={`${readexPro.className} mt-1 text-sm text-center`}>
87+
{ title }
88+
</div>
89+
</div>
90+
}
91+
92+
// { banner && <BannerImage onPress={onPress} wide={wide} isLoading={isLoading} banner={banner} avatar={avatar} section={section} username={username}/> }
93+
// <div onClick={onPress} className="flex flex-col p-4 leading-normal text-left w-full">
94+
// <h4 className={`${readexPro.className} ${wide ? 'text-3xl lg:text-3xl' : 'text-xl lg:text-xl'} tracking-tight dark:text-white ${shortIntro ? 'line-clamp-2' : ''}`}>
95+
// <div className={`${highlight ? '' : 'hidden'} badge badge-success badge-xs animate-pulse text-[#8BC34A] mr-2`}/>
96+
// { title }
97+
// </h4>
98+
// <Username/>
99+
// <CardAuthor/>
100+
// { tags && <Tags tags={tags || []} containerClass="mt-4" /> }
101+
// <p className={`${readexPro.className} text-md font-thin text-gray-400 2xl:w-5/6 mt-4 ${shortIntro ? 'line-clamp-2' : ''}`}>
102+
// { intro }
103+
// </p>
104+
// <div className='flex flex-col items-start pb-10 w-full'>
105+
// {/* { <Engagements comments={comments} upVotes={upVotes} downVotes={downVotes}/> } */}
106+
// { members && <People size={3} all={members}/> }
107+
// {/* { noAction || <ActionButton highlight={highlight} title={actionTitle} onPress={onPress}/> } */}
108+
// </div>
109+
// </div>

‎components/cards/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,5 @@ export * from './ProjectCard'
99
export * from './CarmelPostCard'
1010
export * from './CarmelCommentCard'
1111
export * from './CarmelEditCard'
12-
export * from './AgentCard'
12+
export * from './AgentCard'
13+
export * from './HomeItemCard'

‎components/layout/Navbar/Navbar.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { readexPro } from '~/elements/fonts';
99
import profile_placeholder from '~/images/profile_placeholder.webp';
1010
import { ConfirmModal } from '~/components/access/ConfirmModal';
1111
import { DynamicIcon, showSuccessToast, AuthButton, SoftActionButton } from '~/elements';
12+
import { getImageUrl } from '~/utils/main';
1213

1314
export const Navbar = ({ auth }: any) => {
1415
const [showMenu, setShowMenu] = useState(false);
@@ -89,7 +90,7 @@ export const Navbar = ({ auth }: any) => {
8990
// icon: "Cog8ToothIcon"
9091
}, {
9192
id: "signout",
92-
title: "Sign out",
93+
title: "Logout",
9394
icon: "ArrowLeftOnRectangleIcon"
9495
}]
9596
}
@@ -108,7 +109,7 @@ export const Navbar = ({ auth }: any) => {
108109
<div
109110
className="w-10 h-10 m-auto z-10 bg-transparent">
110111
<Image
111-
src={auth.session.avatarImage || profile_placeholder}
112+
src={getImageUrl(auth.profile.username)}
112113
width={180}
113114
height={180}
114115
alt={'profile'}
@@ -143,7 +144,7 @@ export const Navbar = ({ auth }: any) => {
143144
<Link href={'/login'} key={'reg1'}>
144145
<button
145146
className={`${readexPro.className} text-nowrap text-sm md:text-md shrink-0 hover:opacity-80 border-cyan font-medium text-primary px-4 py-3 shrink-0`}>
146-
Sign in
147+
Login
147148
</button>
148149
</Link>
149150
<Link href={'/register'} key={'reg1'}>

‎elements/avatars.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,46 @@ export const SimpleAvatar = (props: any) => {
2929
);
3030
}
3131

32+
// export const LargeAvatar = (props: any) => {
33+
// return (
34+
// <div className="flex flex-col items-center border">
35+
// {/* <div
36+
// className="w-20 h-20 bg-primary/30 z-10"
37+
// style={{
38+
// // clipPath: 'polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%)',
39+
// }}/> */}
40+
// {/* <div
41+
// className="z-20 bg-primary absolute"
42+
// style={{
43+
// // clipPath: 'polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%)',
44+
// }}> */}
45+
// <Image
46+
// src={props.src || placeholder}
47+
// alt={props.alt ?? ''}
48+
// width={100}
49+
// height={100}
50+
// className="object-cover w-40 h-40"
51+
// />
52+
// </div>
53+
// </div>
54+
// );
55+
// }
56+
57+
58+
export const LargeAvatar = (props: any) => {
59+
return (
60+
<div className="flex flex-col items-center">
61+
<Image
62+
src={props.src || placeholder}
63+
alt={props.alt ?? ''}
64+
width={100}
65+
height={100}
66+
className="object-cover w-32 h-32 mask mask-hexagon"
67+
/>
68+
</div>
69+
);
70+
}
71+
3272
export const Chunky = (props: any) => {
3373
return (
3474
<div className="flex flex-col items-center">

‎elements/people.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,14 +37,14 @@ export const Community = ({
3737
<ComplexAvatar
3838
noCommunityLink
3939
profileImage={image}
40-
alt="Community"
41-
communityName={"community"}
40+
alt="studio"
41+
communityName={"studio"}
4242
username={username}
4343
/>
4444
</div>
4545
}
4646

47-
export const People = ({ all, size }: any) => {
47+
export const People = ({ all, size }: any) => {
4848
return <div className="px-4 flex flex-row items-center">
4949
{ all.slice(0, size).map((p: any, i: number) => <div key={`${i}-num`} className='-ml-2 z-10'><SimpleAvatar src={getImageUrl(p)} className=""/></div>) }
5050
<div className="flex items-center justify-center ml-3 mt-1">

‎screens/AccountScreen.tsx‎

Lines changed: 33 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,6 @@ import { DynamicIcon } from '~/elements';
1414
const CardAuthor = ({
1515
author, community, communityImage, authorImage
1616
}: any) => {
17-
console.log({
18-
author, community, communityImage, authorImage
19-
})
2017
if (!author) {
2118
if (community) {
2219
return <div className={`flex flex-row relative z-10 lg:ml-56 mt-4`}>
@@ -117,19 +114,47 @@ export const AccountScreen = (props: any) => {
117114
setCarmels(all)
118115
}, [carmel.data])
119116

117+
const isOnHome = () => {
118+
return (props.auth.isLoggedIn &&
119+
props.auth.profile.home &&
120+
props.auth.profile.home[item.username])
121+
}
122+
123+
const onAddToHome = async () => {
124+
if (!props.auth.isLoggedIn()) {
125+
router.push("/register")
126+
return
127+
}
128+
129+
if (isOnHome()) {
130+
router.push(`/app/${item.username}`)
131+
return
132+
}
133+
134+
const result = await props.auth.accountAction("addtohome", {
135+
details: {
136+
...item
137+
}
138+
})
139+
140+
await props.auth.getFreshProfile()
141+
142+
router.push('/')
143+
}
144+
120145
const ActionsSection = () => {
121146
if (item.type !== "product") {
122147
return <div className='mt-16'>
123148
</div>
124149
}
125-
150+
126151
return <div className={`w-full flex flex-row justify-end mt-4`}>
127-
<Link href={`/app/${item.username}`} key={'app'}>
128152
<button
129-
className={`${readex_pro.className} text-nowrap text-sm md:text-md shrink-0 hover:opacity-80 border-cyan font-medium border text-white px-2 py-2 shadow-early-access-button shrink-0`}>
130-
Open App
153+
onClick={onAddToHome}
154+
className={`${readex_pro.className} text-nowrap text-sm md:text-md shrink-0 hover:opacity-80 border-cyan font-medium border px-2 py-2 shadow-early-access-button shrink-0 flex flex-row items-center text-white`}>
155+
<DynamicIcon name={isOnHome() ? 'PlayIcon' : 'SquaresPlusIcon'} width={24} height={24} className='text-primary mr-3'/>
156+
{ isOnHome() ? `Open App` : `Add to Home` }
131157
</button>
132-
</Link>
133158
</div>
134159
}
135160

‎screens/Container.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const PROFILE_PLACEHOLDER = `/images/profile_placeholder.webp`
2424

2525

2626
const ProfileImage = ({ avatar, username, isLoading }: any) => {
27-
return <div className={`absolute mt-20 lg:-mt-8 ml-2`}>
27+
return <div className={`absolute mt-16 lg:-mt-8 ml-2`}>
2828
<div className="mask mask-hexagon rounded-none bg-primary bg-opacity-20 border border-1 border-cyan/50">
2929
{ isLoading || <Image
3030
src={avatar ? getImageUrl(username) : PROFILE_PLACEHOLDER}

‎screens/ListScreen.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,6 @@ export const ListScreen = ({ auth, nodes, sections = [], mainAction, onItemPress
6262
}
6363

6464
return <div className='mb-8 border-b w-full pb-4 border-primary/40'>
65-
6665
<Tabs
6766
isLoading={false}
6867
tabs={tabs}

‎screens/home/MainHomeScreen.tsx‎

Lines changed: 38 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,12 @@ import wire1 from '~/images/stories/Wire1.webp';
55
import wire2 from '~/images/stories/Wire2.webp';
66
import { ActionButton } from '~/elements';
77
import Link from 'next/link';
8-
9-
import { readex_pro, DynamicIcon } from '~/elements';
10-
8+
import { readex_pro } from '~/elements';
9+
import { ListPlaceholder } from '~/components/placeholders/ListPlaceholder';
10+
import { HomeItemCard } from '~/components/cards'
11+
import { ListScreen } from '../ListScreen'
12+
import { Title, DynamicIcon, InfiniteScrollComponent, readexPro } from '~/elements';
13+
import { useRouter } from 'next/router'
1114

1215
export const Container = ({ children }: any) => {
1316
return (
@@ -25,7 +28,7 @@ export const Container = ({ children }: any) => {
2528
)
2629
}
2730

28-
export const MainHomeScreen = () => {
31+
const EmptyHome = () => {
2932
return <Container>
3033
<div className="w-full flex flex-col justify-start items-center mt-64 lg:mt-10 pb-80 bg-black/0 z-50">
3134
<DynamicIcon name={'SquaresPlusIcon'} width={48} height={48} className='text-primary mr-3'/>
@@ -42,5 +45,36 @@ export const MainHomeScreen = () => {
4245
</Link>
4346
</div>
4447
</Container>
48+
}
49+
50+
const onItemPress = (element: any, router: any) => {
51+
router.push(`/app/${element.username}`)
52+
}
53+
54+
const HomeList = ({ home }: any) => {
55+
const items = Object.values(home)
56+
const router = useRouter()
57+
58+
return <div className='w-full mb-20 min-h-screen'>
59+
<InfiniteScrollComponent
60+
containerClasses={`justify-center gap-4 mt-24 lg:mt-4 grid grid-cols-3 lg:grid-cols-4 p-2`}
61+
renderItem={items.map((element: any, elementId: any) => <HomeItemCard
62+
{...element}
63+
onPress={() => onItemPress(element, router) }
64+
/>)}
65+
elementsNumber={3}
66+
loader={<ListPlaceholder />}
67+
/>
68+
</div>
69+
}
70+
71+
export const MainHomeScreen = (props: any) => {
72+
const { home } = props.auth.profile
73+
74+
if (!home) {
75+
return <EmptyHome/>
76+
}
77+
78+
return <HomeList home={home}/>
4579
}
4680

‎utils/main.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export const getImageUrl = (username: string, kind: string = "avatar", section:
99

1010
const url = `${process.env['NEXT_PUBLIC_GATEWAY_URL']}/carmel/${kind}/${section}/${username}`
1111
return url
12-
}
12+
}
1313

1414
export const getCompositeImageUrl = (collection: string, id: number) => {
1515
const url = `${process.env['NEXT_PUBLIC_GATEWAY_URL']}/carmel/composite/${collection}/${id}`

0 commit comments

Comments
 (0)