OTP Verify Code

<BbCard class="w-full max-w-sm">
    <BbCardHeader class="text-center">
        <div class="flex justify-center mb-2">
            <!-- mail icon SVG -->
        </div>
        <BbCardTitle class="text-2xl">Check your email</BbCardTitle>
        <BbCardDescription>We've sent a 6-digit code to [email protected]</BbCardDescription>
    </BbCardHeader>
    <BbCardContent>
        <div class="space-y-4">
            <div class="flex justify-center">
                <BbInputOTP Length="6" @bind-Value="otpValue" GroupSize="3" ShowSeparator="true" />
            </div>
            <p class="text-center text-sm text-muted-foreground">
                Didn't receive a code?
                <a href="#" class="text-primary underline-offset-4 hover:underline">Resend</a>
            </p>
        </div>
    </BbCardContent>
    <BbCardFooter>
        <div class="w-full space-y-4">
            <BbButton Class="w-full">Verify</BbButton>
            <div class="text-center text-sm text-muted-foreground">
                <a href="#" class="text-primary underline-offset-4 hover:underline">Back to login</a>
            </div>
        </div>
    </BbCardFooter>
</BbCard>

@code {
    private string otpValue = "";
}