dmitry.galkin/chatbot-template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use core messages spec (#337)

Browse source
This commit is contained in:
Jeremy 2024-05-15 09:39:16 -04:00 • committed by GitHub
parent 095550d4dc
commit 901e4ccec1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 231 additions and 107 deletions
Download patch file Download diff file Expand all files Collapse all files

28
components/stocks/stock-purchase.tsx
View file

@ -14,7 +14,7 @@ interface Purchase {
}
export function Purchase({
props: { numberOfShares, symbol, price, status = 'requires_action' }
props: { numberOfShares, symbol, price, status = 'expired' }
}: {
props: Purchase
}) {
@ -60,8 +60,8 @@ export function Purchase({
}
return (
<div className="rounded-xl border bg-zinc-950 p-4 text-green-400">
<div className="float-right inline-block rounded-full bg-white/10 px-2 py-1 text-xs">
<div className="p-4 text-green-400 border rounded-xl bg-zinc-950">
<div className="inline-block float-right px-2 py-1 text-xs rounded-full bg-white/10">
+1.23% ↑
</div>
<div className="text-lg text-zinc-300">{symbol}</div>
@ -70,7 +70,7 @@ export function Purchase({
<div className="mt-4 text-zinc-200">{purchasingUI}</div>
) : status === 'requires_action' ? (
<>
<div className="relative mt-6 pb-6">
<div className="relative pb-6 mt-6">
<p>Shares to purchase</p>
<input
id="labels-range-input"
@ -79,18 +79,18 @@ export function Purchase({
onChange={onSliderChange}
min="10"
max="1000"
className="h-1 w-full cursor-pointer appearance-none rounded-lg bg-zinc-600 accent-green-500 dark:bg-zinc-700"
className="w-full h-1 rounded-lg appearance-none cursor-pointer bg-zinc-600 accent-green-500 dark:bg-zinc-700"
/>
<span className="absolute bottom-1 start-0 text-xs text-zinc-400">
<span className="absolute text-xs bottom-1 start-0 text-zinc-400">
10
</span>
<span className="absolute bottom-1 start-1/3 -translate-x-1/2 text-xs text-zinc-400 rtl:translate-x-1/2">
<span className="absolute text-xs -translate-x-1/2 bottom-1 start-1/3 text-zinc-400 rtl:translate-x-1/2">
100
</span>
<span className="absolute bottom-1 start-2/3 -translate-x-1/2 text-xs text-zinc-400 rtl:translate-x-1/2">
<span className="absolute text-xs -translate-x-1/2 bottom-1 start-2/3 text-zinc-400 rtl:translate-x-1/2">
500
</span>
<span className="absolute bottom-1 end-0 text-xs text-zinc-400">
<span className="absolute text-xs bottom-1 end-0 text-zinc-400">
1000
</span>
</div>
@ -98,27 +98,27 @@ export function Purchase({
<div className="mt-6">
<p>Total cost</p>
<div className="flex flex-wrap items-center text-xl font-bold sm:items-end sm:gap-2 sm:text-3xl">
<div className="flex basis-1/3 flex-col tabular-nums sm:basis-auto sm:flex-row sm:items-center sm:gap-2">
<div className="flex flex-col basis-1/3 tabular-nums sm:basis-auto sm:flex-row sm:items-center sm:gap-2">
{value}
<span className="mb-1 text-sm font-normal text-zinc-600 sm:mb-0 dark:text-zinc-400">
shares
</span>
</div>
<div className="basis-1/3 text-center sm:basis-auto">×</div>
<span className="flex basis-1/3 flex-col tabular-nums sm:basis-auto sm:flex-row sm:items-center sm:gap-2">
<div className="text-center basis-1/3 sm:basis-auto">×</div>
<span className="flex flex-col basis-1/3 tabular-nums sm:basis-auto sm:flex-row sm:items-center sm:gap-2">
${price}
<span className="mb-1 ml-1 text-sm font-normal text-zinc-600 sm:mb-0 dark:text-zinc-400">
per share
</span>
</span>
<div className="mt-2 basis-full border-t border-t-zinc-700 pt-2 text-center sm:mt-0 sm:basis-auto sm:border-0 sm:pt-0 sm:text-left">
<div className="pt-2 mt-2 text-center border-t basis-full border-t-zinc-700 sm:mt-0 sm:basis-auto sm:border-0 sm:pt-0 sm:text-left">
= <span>{formatNumber(value * price)}</span>
</div>
</div>
</div>
<button
className="mt-6 w-full rounded-lg bg-green-400 px-4 py-2 font-bold text-zinc-900 hover:bg-green-500"
className="w-full px-4 py-2 mt-6 font-bold bg-green-400 rounded-lg text-zinc-900 hover:bg-green-500"
onClick={async () => {
const response = await confirmPurchase(symbol, price, value)
setPurchasingUI(response.purchasingUI)