jan-henrik/respira
1
0
Fork 0
mirror of https://github.com/jhbruhn/respira.git synced 2026-01-27 10:23:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feature: Update ConnectionPrompt to use shadcn Card component

Browse source 
Migrated ConnectionPrompt to use shadcn/ui Card and CardContent components for consistency with other card-based components (FileUpload, PatternSummaryCard). Maintains the same visual appearance while using the unified Card system.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Jan-Henrik Bruhn 2025-12-20 19:41:17 +01:00
parent ed3950b5d0
commit 2544504933
1 changed files with 32 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
src/components/ConnectionPrompt.tsx
View file

@ -3,6 +3,7 @@ import { useMachineStore } from "../stores/useMachineStore";
import { isBluetoothSupported } from "../utils/bluetoothSupport"; import { isBluetoothSupported } from "../utils/bluetoothSupport";
import { ExclamationTriangleIcon } from "@heroicons/react/24/solid"; import { ExclamationTriangleIcon } from "@heroicons/react/24/solid";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Alert, AlertDescription } from "@/components/ui/alert"; import { Alert, AlertDescription } from "@/components/ui/alert";
export function ConnectionPrompt() { export function ConnectionPrompt() {
@ -14,36 +15,38 @@ export function ConnectionPrompt() {
if (isBluetoothSupported()) { if (isBluetoothSupported()) {
return ( return (
<div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md border-l-4 border-gray-400 dark:border-gray-600"> <Card className="p-0 border-l-4 border-gray-400 dark:border-gray-600">
<div className="flex items-start gap-3 mb-3"> <CardContent className="p-4 rounded-lg">
<div className="w-6 h-6 text-gray-600 dark:text-gray-400 flex-shrink-0 mt-0.5"> <div className="flex items-start gap-3 mb-3">
<svg <div className="w-6 h-6 text-gray-600 dark:text-gray-400 flex-shrink-0 mt-0.5">
className="w-6 h-6" <svg
fill="none" className="w-6 h-6"
stroke="currentColor" fill="none"
viewBox="0 0 24 24" stroke="currentColor"
> viewBox="0 0 24 24"
<path >
strokeLinecap="round" <path
strokeLinejoin="round" strokeLinecap="round"
strokeWidth={2} strokeLinejoin="round"
d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0" strokeWidth={2}
/> d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0"
</svg> />
</svg>
</div>
<div className="flex-1 min-w-0">
<h3 className="text-sm font-semibold text-gray-900 dark:text-white mb-1">
Get Started
</h3>
<p className="text-xs text-gray-600 dark:text-gray-400">
Connect to your embroidery machine
</p>
</div>
</div> </div>
<div className="flex-1 min-w-0"> <Button onClick={connect} className="w-full">
<h3 className="text-sm font-semibold text-gray-900 dark:text-white mb-1"> Connect to Machine
Get Started </Button>
</h3> </CardContent>
<p className="text-xs text-gray-600 dark:text-gray-400"> </Card>
Connect to your embroidery machine
</p>
</div>
</div>
<Button onClick={connect} className="w-full">
Connect to Machine
</Button>
</div>
); );
} }