Info tip

import { InfoTip } from "@oration/canon/components/info-tip";import { Input } from "@oration/canon/components/input";import { SettingsGroup, SettingsRow, SettingsSection } from "@oration/canon/components/settings-section";import { Switch } from "@oration/canon/components/switch";import { toast } from "@oration/canon/components/toast";import * as React from "react";export function Hero() {    const [positivePay, setPositivePay] = React.useState(true);    const [threshold, setThreshold] = React.useState("1,000,000");    return (        <div className="w-full max-w-2xl text-left">            <SettingsSection                title="Payment approvals"                description="Who signs off on a payment run before money leaves Cedarline's accounts."                info={                    <InfoTip                        title="Payment approvals"                        description="Runs above the threshold wait for an approver before they're sent to the bank. Smaller runs go out on schedule."                        video={{                            youtubeId: "aircAruvnKk",                            title: "Set up payment approvals",                            duration: "3:12",                        }}                        learnMoreHref="/design/patterns/education"                    />                }            >                <SettingsGroup>                    <SettingsRow                        label="Approval threshold"                        description="Runs above this amount need Maya Okafor or another approver."                        htmlFor="approval-threshold"                    >                        <div className="relative w-40">                            <span className="pointer-events-none absolute top-1/2 left-2.5 -translate-y-1/2 text-13 text-muted-foreground">                                $                            </span>                            <Input                                id="approval-threshold"                                inputMode="numeric"                                value={threshold}                                onChange={(event) =>                                    setThreshold(event.target.value)                                }                                aria-describedby="approval-threshold-description"                                className="pl-6 text-right tabular-nums"                            />                        </div>                    </SettingsRow>                    <SettingsRow                        label="Positive pay"                        description="Send the bank a list of every check before it's mailed."                        htmlFor="positive-pay"                        inline                        info={                            <InfoTip                                title="Positive pay"                                description="Your bank only clears checks that match the file Cedarline sends it, by number and amount. Altered or forged checks are rejected."                            />                        }                    >                        <Switch                            id="positive-pay"                            checked={positivePay}                            onCheckedChange={(checked) => {                                setPositivePay(checked);                                toast.add({                                    title: checked                                        ? "Positive pay is on"                                        : "Positive pay is off",                                    description: checked                                        ? "The next check file goes to the bank on Friday."                                        : "Checks clear without a match file.",                                });                            }}                        />                    </SettingsRow>                </SettingsGroup>            </SettingsSection>        </div>    );}