fix: css fixes

This commit is contained in:
2024-05-15 15:23:48 +01:00
parent 303bca42e9
commit 3b68e6348f
4 changed files with 10 additions and 8 deletions

View File

@ -19,11 +19,13 @@ export default function CategoryLink({
to={`/category/${id}`} to={`/category/${id}`}
key={id} key={id}
className={classNames( className={classNames(
"min-w-[12rem] flex items-center justify-between gap-4 px-6 py-2 text-xl font-semibold rounded-xl", "text-xl font-semibold rounded-xl",
className className
)}> )}>
{name} <div className="min-w-[12rem] flex items-center justify-between gap-4 px-6 py-2 whitespace-nowrap">
<Icon name={icon} /> {name}
<Icon name={icon} size={20} />
</div>
</Link> </Link>
); );
} }

View File

@ -9,8 +9,8 @@ export function CategoryZaps({ gameId }: { gameId: string }) {
const total = zaps.reduce((acc, v) => (acc += v.amount), 0); const total = zaps.reduce((acc, v) => (acc += v.amount), 0);
return ( return (
<Pill className="flex gap-2"> <Pill className="flex gap-2 items-center">
<Icon name="zap-filled" /> <Icon name="zap-filled" size={14} />
{formatSatsCompact(total)} {formatSatsCompact(total)}
</Pill> </Pill>
); );

View File

@ -145,9 +145,9 @@ function PopularCategories({ items }: { items: Array<TaggedNostrEvent> }) {
</div> </div>
<div className="flex flex-wrap gap-4"> <div className="flex flex-wrap gap-4">
{categories.map(a => ( {categories.map(a => (
<Link to={`/category/${a.gameId}`} className="xl:w-[180px] lg:w-[170px] max-lg:w-[calc(30dvw-1rem)]"> <Link to={`/category/${a.gameId}`} className="xl:w-[180px] lg:w-[170px] max-lg:w-[calc(33.3%-0.75rem)]">
<CategoryTile gameId={a.gameId} showFooterTitle={true}> <CategoryTile gameId={a.gameId} showFooterTitle={true}>
<div className="flex gap-2"> <div className="flex gap-2 flex-wrap">
<CategoryZaps gameId={a.gameId} /> <CategoryZaps gameId={a.gameId} />
{a.viewers > 0 && ( {a.viewers > 0 && (
<Pill> <Pill>

View File

@ -84,7 +84,7 @@ export default function Category() {
const results = useRequestBuilder(sub); const results = useRequestBuilder(sub);
return ( return (
<div> <div>
<div className="flex flex-wrap gap-4"> <div className="flex gap-4 overflow-x-scroll scrollbar-hidden">
{AllCategories.map(a => ( {AllCategories.map(a => (
<CategoryLink key={a.id} {...a} /> <CategoryLink key={a.id} {...a} />
))} ))}