Skip to content

Commit

Permalink
schedule progress
Browse files Browse the repository at this point in the history
  • Loading branch information
@lassejaco
lassejaco committed Oct 25, 2024
1 parent f55cc4b commit dea09be
Show file tree
Hide file tree
Showing 5 changed files with 139 additions and 25 deletions.
125 changes: 107 additions & 18 deletions devcon-app/src/components/domain/app/dc7/sessions/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,41 @@ const useSessionFilter = (sessions: SessionType[], event: any) => {
}
}

const getExpertiseColor = (expertise: string) => {
if (expertise === 'Beginner') return 'bg-[#7dffa050]'
if (expertise === 'Intermediate') return 'bg-[#baacff50]'
if (expertise === 'Expert') return 'bg-[#faa8a850]'

return 'bg-[#765ae450]'
}

const getTrackColor = (track: string) => {
switch (track) {
case 'Core Protocol':
return 'bg-[#F6F2FF]'
case 'Cypherpunk & Privacy':
return 'bg-[#FFF4FF]'
case 'Usability':
return 'bg-[#FFF4F4]'
case 'Real World Ethereum':
return 'bg-[#FFEDDF]'
case 'Applied Cryptography':
return 'bg-[#FFFEF4]'
case 'Cryptoeconomics':
return 'bg-[#F9FFDF]'
case 'Coordination':
return 'bg-[#E9FFD7]'
case 'Developer Experience':
return 'bg-[#E8FDFF]'
case 'Security':
return 'bg-[#E4EEFF]'
case 'Layer 2':
return 'bg-[#F0F1FF]'
default:
return 'bg-[#CCCCCC]' // Light Gray (default color)
}
}

const getTrackLogo = (track: string) => {
let trackLogo

Expand Down Expand Up @@ -109,8 +144,38 @@ const getTrackLogo = (track: string) => {
return trackLogo
}

const ExpertiseTag = ({ expertise, className }: { expertise: string; className?: string }) => {
return (
<div
className={cn(
'text-[10px] text-black rounded-full bg-[#b3a1fd] px-2 py-0.5 font-semibold',
getExpertiseColor(expertise),
css['glass-tag'],
className
)}
>
{expertise}
</div>
)
}

const TrackTag = ({ track, className }: { track: string; className?: string }) => {
return (
<div
className={cn(
'text-[10px] text-black rounded-full px-2 py-0.5 font-semibold border border-solid border-[#E1E4EA]',
getTrackColor(track),
css['glass-tag'],
className
)}
>
{track}
</div>
)
}

export const SessionCard = ({ session, className }: { session: SessionType; className?: string }) => {
const { id, title, speakers, track, date, startTime, endTime, expertise } = session
const { id, title, speakers, track, date, startTime, endTime, expertise, description } = session
const [selectedSession, setSelectedSession] = useRecoilState(selectedSessionAtom)
const formatTime = (time: moment.Moment | undefined) => time?.format('HH:mm')
const speakerNames = speakers ? speakers.map(speaker => speaker.name).join(', ') : ''
Expand All @@ -129,12 +194,14 @@ export const SessionCard = ({ session, className }: { session: SessionType; clas
const relativeTime = start?.from(now)
const router = useRouter()

const [favorited, setFavorited] = useState(false)

const trackLogo = getTrackLogo(track)

return (
<Link
className={cn(
'flex flex-col bg-white rounded-lg shadow-md w-full overflow-hidden hover:border-[#ac9fdf] border border-solid border-[transparent] transition-all duration-300',
'flex flex-col bg-white rounded-lg overflow-hidden hover:border-[#ac9fdf] border border-solid border-[#E1E4EA] transition-all duration-300',
selectedSession?.id === id ? 'border-[#ac9fdf] !bg-[#EFEBFF]' : '',
className
)}
Expand All @@ -149,11 +216,16 @@ export const SessionCard = ({ session, className }: { session: SessionType; clas
}
}}
>
<div className="flex justify-between h-[100px]">
<div className="basis-[100px] shrink-0 bg-purple-200 flex items-center justify-center relative overflow-hidden">
<div className="flex justify-between min-h-[100px]">
<div
className={cn(
'basis-[100px] shrink-0 flex rounded-tr-none rounded-br-none items-center justify-center relative overflow-hidden',
getTrackColor(track)
)}
>
<div
className={cn(
'absolute top-0 w-full text-xs text-white font-semibold p-2 z-[1] h-[52px] line-clamp-3 break-words',
'absolute top-0 w-full self-start text-xs text-white font-semibold p-2 z-[1] h-[52px] line-clamp-3 break-words',
css['expertise-gradient']
)}
>
Expand All @@ -163,16 +235,14 @@ export const SessionCard = ({ session, className }: { session: SessionType; clas
<Image
src={trackLogo}
alt={track}
height={100}
width={100}
height={150}
width={150}
className="w-full h-[90%] object-contain transform translate-x-1/4 -translate-y-1/6"
/>
)}

<div className="absolute bottom-1 w-full left-1 flex">
<div className="text-[10px] text-black rounded-full bg-[#b3a1fd] px-2 py-0.5 font-semibold">
{expertise}
</div>
<ExpertiseTag expertise={expertise || ''} />
</div>
</div>
<div className="flex flex-col justify-between grow p-2 pl-3">
Expand All @@ -181,7 +251,7 @@ export const SessionCard = ({ session, className }: { session: SessionType; clas
{/* <p className="text-xs text-gray-600 mt-1 truncate">{track}</p> */}
</div>
<div>
{/* <p className="text-xs text-gray-600 mt-1 line-clamp-2 mb-1">{description}</p> */}
<p className="text-xs text-gray-600 mt-1 line-clamp-2 mb-1">{description}</p>
{sessionIsLive && <div className="label rounded red bold mb-1 sm">Happening now!</div>}
{isSoon && (
<div className="label rounded text-gray-500 !border-gray-400 bold sm mb-1">Starts {relativeTime}</div>
Expand All @@ -206,8 +276,16 @@ export const SessionCard = ({ session, className }: { session: SessionType; clas
</div>
</div>

<div className="shrink-0 flex justify-center p-3 pl-1 cursor-pointer">
<CalendarIcon className="icon" style={{ '--color-icon': '#99A0AE' }} />
<div
className="shrink-0 flex justify-center p-3 pl-1 cursor-pointer"
onClick={e => {
e.stopPropagation()
e.preventDefault()

setFavorited(!favorited)
}}
>
<CalendarIcon className="icon" style={{ '--color-icon': favorited ? 'red' : '#99A0AE' }} />
{/* <p className="text-sm font-semibold text-gray-800 truncate">{date}</p> */}
</div>
</div>
Expand Down Expand Up @@ -366,7 +444,7 @@ export const SessionList = ({ sessions, event }: { sessions: SessionType[]; even
<SessionCard
session={session}
key={session.id}
className={cn('w-[360px] shrink-0', index === 0 ? 'lg:ml-4' : '')}
className={cn('w-[360px] max-w-[360px] shrink-0', index === 0 ? 'lg:ml-4' : '')}
/>
// <div>
// className={cn(
Expand Down Expand Up @@ -498,7 +576,7 @@ export const SessionView = ({ session, event }: { session: SessionType; event: a

return (
<div data-type="session-view" className={cn(cardClass, 'flex flex-col gap-3 lg:p-4 self-start w-full')}>
<div className="relative rounded-2xl w-full h-full flex items-end bg-purple-200">
<div className={cn('relative rounded-2xl w-full h-full flex items-end', getTrackColor(session.track))}>
<Image
// @ts-ignore
src={trackLogo}
Expand All @@ -507,13 +585,21 @@ export const SessionView = ({ session, event }: { session: SessionType; event: a
// height={393}
className="rounded-2xl w-[120%] h-[120%] aspect-video object-contain object-right "
/>
<div className="absolute inset-0 flex items-start gap-2 p-2">
<TrackTag track={session.track} className="self-start" />
<ExpertiseTag expertise={session.expertise || ''} className="self-start" />
</div>

<div
className={cn(
'absolute rounded-2xl flex justify-between items-end p-3 pt-7 self-end left-0 right-0',
css['session-gradient-2']
)}
>
<div className="font-medium z-10 text-lg translate-y-[3px] text-white max-w-[70%]">{session.title}</div>
<div className="font-medium z-10 flex flex-col gap-2 translate-y-[3px] text-white max-w-[70%]">
{/* <TrackTag track={session.track} className="self-start" /> */}
<p className="text-lg">{session.title}</p>
</div>
<div className="text-2xl lg:text-lg z-10 flex flex-row gap-4">
<HeartIcon
className="icon cursor-pointer hover:scale-110 transition-transform duration-300"
Expand Down Expand Up @@ -545,8 +631,11 @@ export const SessionView = ({ session, event }: { session: SessionType; event: a
</div>

<div className="border-top border-bottom py-4">
<StandalonePrompt className="w-full" onClick={() => setDevaBotVisible(`Tell me more about "${session.title}"`)}>
<div className="truncate">Tell me more about "{session.title}"</div>
<StandalonePrompt
className="w-full"
onClick={() => setDevaBotVisible(`Tell me about similar sessions to "${session.title}"`)}
>
<div className="truncate">Tell me about similar sessions</div>
</StandalonePrompt>
</div>

Expand Down
9 changes: 9 additions & 0 deletions devcon-app/src/components/domain/app/dc7/sessions/sessions.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,3 +27,12 @@
// backdrop-filter: blur(3px);
}
}

.glass-tag {
/* From https://css.glass */
// background: rgba(255, 255, 255, 0.465);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
// border: 1px solid rgba(255, 255, 255, 0.3);
}
24 changes: 20 additions & 4 deletions devcon-app/src/components/domain/app/dc7/speakers/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,8 @@ const useSpeakerFilter = (speakers: SpeakerType[] | null) => {

export const SpeakerCard = ({ speaker }: { speaker: SpeakerType }) => {
const [selectedSpeaker, setSelectedSpeaker] = useRecoilState(selectedSpeakerAtom)
// TODO: Add favorited to user account
const [favorited, setFavorited] = useState(false)
const router = useRouter()

return (
Expand Down Expand Up @@ -99,8 +101,19 @@ export const SpeakerCard = ({ speaker }: { speaker: SpeakerType }) => {
</div>
</div>

<div className="flex items-center justify-center mx-2">
<HeartIcon className="icon" />
<div
className={cn(
'flex items-center justify-center p-2 hover:scale-110 transition-transform duration-300',
favorited ? 'text-[#ac9fdf]' : ''
)}
onClick={e => {
e.stopPropagation()
e.preventDefault()

setFavorited(!favorited)
}}
>
<HeartIcon className="icon" style={{ '--color-icon': favorited ? 'red' : '#99A0AE' }} />
</div>
</Link>
)
Expand Down Expand Up @@ -400,15 +413,18 @@ export const SpeakerView = ({ speaker }: { speaker: SpeakerType | null }) => {
{/* <Button color="black-1" fill className="self-center text-sm sticky top-[76px] z-10">
Back to Overview
</Button> */}
<div className="relative rounded-full w-full h-full flex items-end">
<div className="relative rounded-2xl w-full h-full flex items-end bg-purple-200">
<Image
// @ts-ignore
src={speaker?.avatar}
// @ts-ignore
alt={speaker?.name}
width={393}
height={393}
className="rounded-2xl w-full h-full aspect-video object-cover"
className={cn(
'rounded-2xl w-full h-full aspect-video',
speaker.avatar?.startsWith('data') ? 'object-contain object-center' : 'object-cover'
)}
/>
<div
className={cn(
Expand Down
4 changes: 2 additions & 2 deletions devcon-app/src/pages/schedule.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@ export default pageHOC((props: any) => {
// current: DEFAULT_APP_PAGE,
// }

console.log(sessions, 'sessions?')
console.log(props.event, 'event?')
// console.log(sessions, 'sessions?')
// console.log(props.event, 'event?')

return (
<AppLayout pageTitle="Schedule" breadcrumbs={[{ label: 'Schedule' }]}>
Expand Down
2 changes: 1 addition & 1 deletion lib/components/ai/overlay.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -599,7 +599,7 @@ const DevaBot = ({
SessionComponent ? (
// @ts-ignore
<SessionComponent
{...session}
session={session}
key={index}
/>
) : (
Expand Down

0 comments on commit dea09be

Please sign in to comment.