Websites/interactives
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Increase card size in one-by-one mode

Browse source 
Increase the size of boxes and numbers in the one-by-one mode of the interactive.
This commit is contained in:
gpt-engineer-app[bot] 2025-07-19 15:04:32 +00:00
parent d7232f8470
commit 5861189703
1 changed files with 5 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/components/BinarySearchTrick.tsx
View file

@ -239,12 +239,12 @@ const BinarySearchTrick = ({ showSocialShare = true }: BinarySearchTrickProps) =
selectedCards.includes(card.id) selectedCards.includes(card.id)
? 'ring-2 ring-primary bg-primary/5' ? 'ring-2 ring-primary bg-primary/5'
: 'hover:bg-muted/50' : 'hover:bg-muted/50'
}`} } ${isOneByOne ? 'max-w-md w-full' : ''}`}
onClick={() => handleCardToggle(card.id)} onClick={() => handleCardToggle(card.id)}
> >
<CardHeader className="pb-2"> <CardHeader className={`${isOneByOne ? 'pb-4' : 'pb-2'}`}>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<CardTitle className="text-xl font-bold text-primary"> <CardTitle className={`font-bold text-primary ${isOneByOne ? 'text-3xl' : 'text-xl'}`}>
{card.id} {card.id}
</CardTitle> </CardTitle>
<Checkbox <Checkbox
@ -254,11 +254,11 @@ const BinarySearchTrick = ({ showSocialShare = true }: BinarySearchTrickProps) =
</div> </div>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="grid grid-cols-4 gap-1 text-sm"> <div className={`grid grid-cols-4 gap-1 ${isOneByOne ? 'text-lg gap-2' : 'text-sm'}`}>
{card.numbers.map((num) => ( {card.numbers.map((num) => (
<div <div
key={num} key={num}
className="p-1 text-center bg-muted/30 rounded border" className={`text-center bg-muted/30 rounded border ${isOneByOne ? 'p-3' : 'p-1'}`}
> >
{num} {num}
</div> </div>