ChatGPT Widget Frontend

1import { createRoot } from 'react-dom/client';
2import { Card } from '@/components/ui/card';
3import { Skeleton } from '@/components/ui/skeleton';
4import { useWidgetProps } from '@/registry/default/chatgpt-app/use-widget-props';
5 
6function App() {
7  const { a, b, sum } = useWidgetProps({
8    a: null,
9    b: null,
10    sum: null,
11  });
12 
13  const hasData = a !== null && b !== null && sum !== null;
14 
15  return (
16    <div className="flex items-center justify-center w-full min-h-screen">
17      <Card className="w-full max-w-md p-6">
18        <div className="space-y-4">
19          <h2 className="text-xl font-bold">Sum Calculator</h2>
20 
21          <div className="space-y-2">
22            <div className="flex justify-between">
23              <span>A:</span>
24              {hasData ? <span>{a}</span> : <Skeleton className="h-5 w-20" />}
25            </div>
26 
27            <div className="flex justify-between">
28              <span>B:</span>
29              {hasData ? <span>{b}</span> : <Skeleton className="h-5 w-20" />}
30            </div>
31 
32            <div className="flex justify-between font-bold">
33              <span>Sum:</span>
34              {hasData ? <span>{sum}</span> : <Skeleton className="h-5 w-20" />}
35            </div>
36          </div>
37        </div>
38      </Card>
39    </div>
40  );
41}
42 
43createRoot(document.getElementById('add-root')).render(<App />);