Skip to content

Commit

Permalink
basic filter rework
Browse files Browse the repository at this point in the history
  • Loading branch information
@lassejaco
lassejaco committed Oct 30, 2024
1 parent 704f6be commit caeb8d9
Show file tree
Hide file tree
Showing 3 changed files with 85 additions and 37 deletions.
112 changes: 82 additions & 30 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 @@ -66,12 +66,18 @@ import PenIcon from 'assets/icons/pen.svg'
import QuestionsIcon from 'assets/icons/questions.svg'
import { Button } from 'lib/components/button'

export const tagClassTwo = (active?: boolean, className?: string) =>
cn(
'shrink-0 select-none cursor-pointer mr-2 rounded-full bg-white border border-solid border-[#E1E4EA] px-3 py-1 text-xs flex items-center justify-center text-[black] hover:border-[black] font-semibold hover:text-black transition-all duration-300',
active ? 'border-[#ac9fdf] !bg-[#EFEBFF]' : '',
className
)
export const cardClass =
'flex flex-col lg:border lg:border-solid lg:border-[#E4E6EB] rounded-3xl relative lg:bg-[#fbfbfb]'
export const tagClass = (active: boolean, className?: string) =>
cn(
'shrink-0 select-none cursor-pointer rounded-full bg-white border border-solid border-[#E1E4EA] px-3 py-1 text-xs flex items-center justify-center text-[#717784] hover:text-black transition-all duration-300',
active ? ' border-[#ac9fdf] !bg-[#EFEBFF]' : '',
active ? ' border-[#ac9fdf] bg-[#EFEBFF]' : '',
className
)

Expand All @@ -91,10 +97,16 @@ const useSessionFilter = (sessions: SessionType[], event: any) => {
return {
type: [...new Set(sessions.map(session => session.type))].filter(Boolean),
day: ['All', 'Nov 12', 'Nov 13', 'Nov 14', 'Nov 15'],
expertise: ['Beginner', 'Intermediate', 'Expert', ...new Set(sessions.map(session => session.expertise))].filter(
Boolean
),
track: [...new Set(sessions.map(session => session.track))].filter(Boolean),
expertise: [
...new Set(
['Beginner', 'Intermediate', 'Expert']
.concat(...sessions.map((session: any) => session.expertise))
.filter(Boolean)
),
],
track: [...new Set(sessions.map(session => session.track))]
.filter(Boolean)
.filter(track => !track.startsWith('[CLS]')),
room: [...new Set(sessions.map(session => session.room))].filter(Boolean),
other: ['Attending', 'Interested In', 'Upcoming', 'Past'],
}
Expand Down Expand Up @@ -151,25 +163,25 @@ const getExpertiseColor = (expertise: string) => {
const getTrackColor = (track: string) => {
switch (track) {
case 'Core Protocol':
return 'bg-[#F6F2FF]'
return '!bg-[#F6F2FF]'
case 'Cypherpunk & Privacy':
return 'bg-[#FFF4FF]'
return '!bg-[#FFF4FF]'
case 'Usability':
return 'bg-[#FFF4F4]'
return '!bg-[#FFF4F4]'
case 'Real World Ethereum':
return 'bg-[#FFEDDF]'
return '!bg-[#FFEDDF]'
case 'Applied Cryptography':
return 'bg-[#FFFEF4]'
return '!bg-[#FFFEF4]'
case 'Cryptoeconomics':
return 'bg-[#F9FFDF]'
return '!bg-[#F9FFDF]'
case 'Coordination':
return 'bg-[#E9FFD7]'
return '!bg-[#E9FFD7]'
case 'Developer Experience':
return 'bg-[#E8FDFF]'
return '!bg-[#E8FDFF]'
case 'Security':
return 'bg-[#E4EEFF]'
return '!bg-[#E4EEFF]'
case 'Layer 2':
return 'bg-[#F0F1FF]'
return '!bg-[#F0F1FF]'
default:
return 'bg-[white]' // Light Gray (default color)
}
Expand Down Expand Up @@ -227,16 +239,19 @@ const ExpertiseTag = ({ expertise, className }: { expertise: string; className?:
)
}

const TrackTag = ({ track, className }: { track: string; className?: string }) => {
const TrackTag = ({ track, className, applyColor = true, ...rest }: any) => {
if (!track) return null

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'],
'text-[10px] text-black rounded-full px-2 py-0.5 font-semibold border border-solid border-[#E1E4EA] flex gap-2 items-center',
applyColor ? getTrackColor(track) : '',
className
)}
{...rest}
>
<Image src={getTrackLogo(track)} alt={track} height={15} width={15} />
{track}
</div>
)
Expand Down Expand Up @@ -354,7 +369,7 @@ export const SessionCard = ({ session, className }: { session: SessionType; clas
</div>

<div className="flex items-center gap-2 text-xs text-gray-500">
<IconClock className="icon flex shrink-0" />
<IconVenue className="icon flex shrink-0" />
<p className="text-xs shrink-0 text-gray-600">
{session.type} - {session.slot_roomId}
</p>
Expand Down Expand Up @@ -439,7 +454,7 @@ export const SessionFilterAdvanced = ({ filterOptions }: { filterOptions: any })
{filterOptions.type.map((type: string) => (
<div
key={type}
className={tagClass(sessionFilter.type[type]) + ' !shrink'}
className={tagClass(sessionFilter.type[type]) + ' !text-black font-semibold !shrink'}
onClick={() => toggleFilter('type', type)}
>
{type}
Expand All @@ -452,13 +467,16 @@ export const SessionFilterAdvanced = ({ filterOptions }: { filterOptions: any })
<div className="flex flex-col gap-3 pb-4 font-semibold">Tracks</div>
<div className="flex flex-wrap gap-2">
{filterOptions.track.map((track: string) => (
<div
<TrackTag
key={track}
track={track}
applyColor={sessionFilter.track[track]}
// className="!shrink"
className={tagClass(sessionFilter.track[track]) + ' !shrink'}
onClick={() => toggleFilter('track', track)}
>
{track}
</div>
</TrackTag>
))}
</div>
</div>
Expand All @@ -469,7 +487,7 @@ export const SessionFilterAdvanced = ({ filterOptions }: { filterOptions: any })
{filterOptions.expertise.map((expertise: string) => (
<div
key={expertise}
className={tagClass(sessionFilter.expertise[expertise]) + ' !shrink'}
className={tagClass(sessionFilter.expertise[expertise]) + ' !text-black font-semibold !shrink'}
onClick={() => toggleFilter('expertise', expertise)}
>
{expertise}
Expand All @@ -489,7 +507,29 @@ export const SessionFilterAdvanced = ({ filterOptions }: { filterOptions: any })
</div>
</div> */}

<Button
<Separator className="my-1" />

<div className="sticky bottom-0 left-0 right-0 shrink-0 flex justify-center">
<div
onClick={() => {
const advancedFilterKeys = ['type', 'track', 'expertise', 'room']
setSessionFilter({
...sessionFilter,
...advancedFilterKeys.reduce((acc, key) => {
acc[key] = {}
return acc
}, {} as any),
})

setSessionFilterOpen(false)
}}
className={tagClassTwo(false, ' !text-[black] font-semibold')}
>
Reset Filter
</div>
</div>

{/* <Button
className="mt-2 flex self-center items-center gap-2 text-sm"
fill
color="black-1"
Expand All @@ -508,7 +548,7 @@ export const SessionFilterAdvanced = ({ filterOptions }: { filterOptions: any })
>
<FilterIcon className="icon" style={{ fontSize: '12px' }} />
Reset Filter
</Button>
</Button> */}
</div>
)
}
Expand Down Expand Up @@ -1022,7 +1062,7 @@ export const Livestream = ({ session, className }: { session: SessionType; class
export const SessionView = ({ session, standalone }: { session: SessionType | null; standalone?: boolean }) => {
const { account, setSessionBookmark } = useAccountContext()
const [_, setDevaBotVisible] = useRecoilState(devaBotVisibleAtom)
const [selectedSession, setSelectedSession] = useRecoilState(selectedSessionAtom)
// const [selectedSession, setSelectedSession] = useRecoilState(selectedSessionAtom)

if (!session) return null

Expand Down Expand Up @@ -1129,7 +1169,7 @@ export const SessionView = ({ session, standalone }: { session: SessionType | nu
)}
</div>

{!standalone && (
{/* {!standalone && (
<Link
className="flex justify-center items-center select-none shrink-0 p-2"
to={`/schedule/${session.sourceId}`}
Expand All @@ -1140,7 +1180,7 @@ export const SessionView = ({ session, standalone }: { session: SessionType | nu
// onClick={copyShareLink}
/>
</Link>
)}
)} */}
</div>
</div>
</div>
Expand Down Expand Up @@ -1259,6 +1299,18 @@ export const SessionView = ({ session, standalone }: { session: SessionType | nu
)}

<Livestream session={session} className="border-top pt-2 shrink-0 lg:hidden" />

{!standalone && (
<div className="sticky bottom-0 left-0 right-0 flex justify-center shrink-0">
<Link
to={`/schedule/${session.sourceId}`}
className={tagClassTwo(false, 'text-[black] font-semibold')}
indicateExternal
>
Go to Session Page
</Link>
</div>
)}
</div>
)
}
Expand Down Expand Up @@ -1333,7 +1385,7 @@ export const SessionLayout = ({ sessions, event }: { sessions: SessionType[] | n
</div>
)}

<div className={cn('block lg:hidden')}>
<div className={cn('block lg:hidden z-[20]')}>
<Popup open={sessionFilterOpen} setOpen={() => setSessionFilterOpen(false)}>
<SessionFilterAdvanced filterOptions={filterOptions} />
</Popup>
Expand Down
8 changes: 2 additions & 6 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 @@ -197,17 +197,13 @@ export const SpeakerCard = ({ speaker }: { speaker: SpeakerType }) => {
className="rounded-full w-[48px] h-[48px] object-cover"
/>
<div className="flex flex-col">
<div className="text-sm font-medium">{speaker.name}</div>
<div className="text-sm font-semibold">{speaker.name}</div>
{speaker.sessions && speaker.sessions?.length > 0 && (
<div className="text-xs text-[#717784]">{speaker.sessions?.length} sessions</div>
)}
{speaker?.twitter && (
<div
onClick={e => {
e.stopPropagation()
e.preventDefault()
window.open(`https://twitter.com/${speaker.twitter}`, '_blank')
}}
onClick={e => window.open(`https://twitter.com/${speaker.twitter}`, '_blank')}
className="flex items-center gap-2 self-start text-xs"
>
<div>@{speaker.twitter}</div>
Expand Down
2 changes: 1 addition & 1 deletion lib/components/pop-up/PopUp.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ export const Popup = ({
Back to Overview
</Button>
</div>
<div className="max-w-[500px] min-w-[300px] w-screen max-h-[80vh] overflow-auto px-4 p-4 pb-24 lg:pb-4 no-scrollbar">
<div className="max-w-[500px] min-w-[300px] w-screen max-h-[80vh] overflow-auto px-4 p-4 pb-8 lg:pb-4 no-scrollbar">
{children}
</div>
</motion.div>
Expand Down

0 comments on commit caeb8d9

Please sign in to comment.