Update migrated js to ts and shadcn

src/components/suggestion-panel.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
+import { Button } from './ui/button';
+
+const SuggestionPanel = ({ suggestion, onApplySuggestion, t }: any) => {
+  if (!suggestion) return null;
+
+  return (
+    <Card className="bg-sky-50/50 border-l-4 border-sky-500">
+      <CardHeader>
+        <CardTitle className="text-lg">{t.whatIf}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        {suggestion.dose ? (
+          <div className="space-y-3">
+            <p className="text-sm text-sky-800">
+              {t.suggestion}: <span className="font-bold">{suggestion.dose}{t.mg}</span> ({t.instead} {suggestion.originalDose}{t.mg}) {t.at} <span className="font-bold">{suggestion.time}</span>.
+            </p>
+            <Button
+              onClick={onApplySuggestion}
+              className="w-full bg-sky-600 hover:bg-sky-700"
+            >
+              {t.applySuggestion}
+            </Button>
+          </div>
+        ) : (
+          <p className="text-sm text-sky-800">{suggestion.text}</p>
+        )}
+      </CardContent>
+    </Card>
+  );
+};
+
+export default SuggestionPanel;