76 lines
1.8 KiB
TypeScript
76 lines
1.8 KiB
TypeScript
import clsx from 'clsx'
|
|
import _ from 'lodash'
|
|
|
|
import { User } from '../../../common/user'
|
|
import { Row } from '../layout/row'
|
|
import { CATEGORIES, CATEGORY_LIST } from '../../../common/categories'
|
|
import { updateUser } from '../../lib/firebase/users'
|
|
|
|
export function CategorySelector(props: {
|
|
user: User | null | undefined
|
|
className?: string
|
|
}) {
|
|
const { className, user } = props
|
|
|
|
const followedCategories = user?.followedCategories ?? []
|
|
|
|
return (
|
|
<Row
|
|
className={clsx(
|
|
'carousel mr-2 items-center space-x-2 space-y-2 overflow-x-scroll pt-4 pb-4 sm:flex-wrap',
|
|
className
|
|
)}
|
|
>
|
|
<div />
|
|
<CategoryButton
|
|
key={'all' + followedCategories.length}
|
|
category="All"
|
|
isFollowed={followedCategories.length === 0}
|
|
toggle={async () => {
|
|
if (!user?.id) return
|
|
|
|
await updateUser(user.id, {
|
|
followedCategories: [],
|
|
})
|
|
}}
|
|
/>
|
|
|
|
{CATEGORY_LIST.map((cat) => (
|
|
<CategoryButton
|
|
key={cat + followedCategories.length}
|
|
category={CATEGORIES[cat].split(' ')[0]}
|
|
isFollowed={followedCategories.includes(cat)}
|
|
toggle={async () => {
|
|
if (!user?.id) return
|
|
|
|
await updateUser(user.id, {
|
|
followedCategories: [cat],
|
|
})
|
|
}}
|
|
/>
|
|
))}
|
|
</Row>
|
|
)
|
|
}
|
|
|
|
function CategoryButton(props: {
|
|
category: string
|
|
isFollowed: boolean
|
|
toggle: () => void
|
|
}) {
|
|
const { toggle, category, isFollowed } = props
|
|
|
|
return (
|
|
<div
|
|
className={clsx(
|
|
'rounded-full border-2 px-4 py-1 shadow-md hover:bg-gray-200',
|
|
'cursor-pointer select-none',
|
|
isFollowed ? 'border-gray-300 bg-gray-300' : 'bg-white'
|
|
)}
|
|
onClick={toggle}
|
|
>
|
|
<span className="text-sm text-gray-500">{category}</span>
|
|
</div>
|
|
)
|
|
}
|