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)
? 'ring-2 ring-primary bg-primary/5'
: 'hover:bg-muted/50'
}`}
} ${isOneByOne ? 'max-w-md w-full' : ''}`}
onClick={() => handleCardToggle(card.id)}
>
<CardHeader className="pb-2">
<CardHeader className={`${isOneByOne ? 'pb-4' : 'pb-2'}`}>
<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}
</CardTitle>
<Checkbox
@ -254,11 +254,11 @@ const BinarySearchTrick = ({ showSocialShare = true }: BinarySearchTrickProps) =
</div>
</CardHeader>
<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) => (
<div
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}
</div>