Application Dialogs
A collection of application dialog components.
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { CheckHexagonSolid, Upload } from "@mynaui/icons-react";
export default function UploadDocumentsDialog() {
return (
<Dialog>
<DialogTrigger asChild>
<Button variant="outline">Add Task</Button>
</DialogTrigger>
<DialogContent className="overflow-hidden p-0">
<DialogHeader className="border-border bg-primary-foreground border-b px-5 py-4">
<DialogTitle className="text-left">Upload Documents</DialogTitle>
<DialogDescription className="flex items-center gap-1.5 text-base font-normal">
Adding in
<Select>
<SelectTrigger
defaultValue="mar-2024"
className="px-1.5 gap-1 py-0.5 data-[size=default]:h-7 bg-background"
>
<SelectValue placeholder="Select a date" />
</SelectTrigger>
<SelectContent>
<SelectItem value="mar-2024">Mar 2024</SelectItem>
<SelectItem value="apr-2024">Apr 2024</SelectItem>
<SelectItem value="may-2024">May 2024</SelectItem>
<SelectItem value="jun-2024">Jun 2024</SelectItem>
</SelectContent>
</Select>
Folder
</DialogDescription>
</DialogHeader>
<div className="flex flex-col gap-4 px-4">
<div className="flex flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed p-4 py-6">
<div className="border-border bg-background rounded-lg border p-2">
<Upload className="h-6 w-6" />
</div>
<div className="flex items-center gap-1">
<p className="text-sm font-medium">Drag and drop files or</p>
<p className="text-primary text-sm font-medium">browse</p>
</div>
<div className="flex items-center">
<p className="text-sm leading-none font-normal tracking-normal">
PDF, XLS, or DOC · Max 5MB
</p>
</div>
</div>
<div className="border-border flex justify-between rounded-lg border px-4 py-3">
<div className="flex items-center gap-4">
<img src="/images/pdf.png" alt="pdf" className="h-10 w-10" />
<div className="flex flex-col items-start justify-start gap-2">
<p className="text-foreground text-sm leading-none font-medium tracking-tight">
Invoice41.pdf
</p>
<span className="text-muted-foreground text-sm leading-none font-normal tracking-tight">
248KB
</span>
</div>
</div>
<div className="flex items-center gap-2">
<p className="text-muted-foreground text-sm leading-none font-normal tracking-normal">
Waiting to upload...
</p>
</div>
</div>
<div className="border-border relative isolate flex justify-between overflow-hidden rounded-lg border px-4 py-3">
<div className="relative z-10 flex items-center gap-4">
<img src="/images/image.png" alt="image" className="h-10 w-10" />
<div className="flex flex-col items-start justify-start gap-2">
<p className="text-foreground text-sm leading-none font-medium tracking-tight">
bill-11.jpeg
</p>
<span className="text-muted-foreground text-sm leading-none font-normal tracking-tight">
1.2MB
</span>
</div>
</div>
<div className="relative z-10 flex items-center gap-2">
<p className="text-muted-foreground text-sm leading-none font-normal tracking-normal">
Uploading...
</p>
</div>
<div className="bg-muted absolute inset-0 z-0 h-full w-[60%]" />
</div>
<div className="border-primary relative isolate flex justify-between overflow-hidden rounded-lg border px-4 py-3">
<div className="relative z-10 flex items-center gap-4">
<img src="/images/ai.png" alt="ai" className="h-10 w-10" />
<div className="flex flex-col items-start justify-start gap-2">
<p className="text-background text-sm leading-none font-medium tracking-tight">
final-logo.ai
</p>
<span className="text-background text-sm leading-none font-normal tracking-tight">
4.2MB
</span>
</div>
</div>
<div className="relative z-10 flex items-center gap-2">
<CheckHexagonSolid className="text-background h-6 w-6" />
</div>
<div className="bg-primary absolute inset-0 z-0 h-full w-[100%]" />
</div>
</div>
<DialogFooter className="flex w-full items-center justify-between p-4 pt-0 sm:justify-between">
<DialogClose asChild>
<Button type="button" variant="outline">
Cancel
</Button>
</DialogClose>
<Button type="submit">Share</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogClose,
DialogContent,
DialogTrigger,
} from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { ArrowLeftRight, BrandGithub, Myna } from "@mynaui/icons-react";
export default function LinkRepoDialog() {
return (
<Dialog>
<DialogTrigger asChild>
<Button variant="outline">Link Repo</Button>
</DialogTrigger>
<DialogContent className="bg-background border-0 flex w-full flex-col items-center gap-6 overflow-hidden rounded-2xl p-0 sm:max-w-md">
<div className="relative isolate w-full">
<div className="bg-background z-20 flex w-full flex-col items-center justify-center gap-6 rounded-2xl border p-6">
<div className="flex w-full items-center justify-center gap-4">
<div className="border-border bg-background w-fit rounded-lg border p-3">
<Myna className="h-6 w-6" />
</div>
<div className="w-fit">
<ArrowLeftRight className="text-muted-foreground h-6 w-6" />
</div>
<div className="border-border bg-background w-fit rounded-lg border p-3">
<BrandGithub className="h-6 w-6" />
</div>
</div>
<div className="flex w-full flex-col items-center justify-center gap-2">
<h1 className="text-foreground text-center text-xl leading-none font-semibold tracking-tight">
Connect MynaUI to GitHub
</h1>
<p className="text-muted-foreground text-center text-base font-normal">
Select a user and repository to connect with MynaUI for
streamlined workflow integration
</p>
</div>
<div className="flex w-full flex-col items-center justify-center gap-6">
<div className="flex w-full flex-col items-start gap-2">
<Label
htmlFor="github-user"
className="text-foreground text-sm leading-none font-normal tracking-tight"
>
GitHub User
</Label>
<Select>
<SelectTrigger className="w-full" defaultValue="praveenjuge">
<SelectValue placeholder="praveenjuge" />
</SelectTrigger>
<SelectContent>
<SelectItem value="praveenjuge">praveenjuge</SelectItem>
<SelectItem value="mynaui">mynaui</SelectItem>
<SelectItem value="shadcn">shadcn</SelectItem>
<SelectItem value="vercel">vercel</SelectItem>
</SelectContent>
</Select>
</div>
<div className="flex w-full flex-col items-start gap-2">
<Label
htmlFor="github-repo"
className="text-foreground text-sm leading-none font-normal tracking-tight"
>
GitHub Repository
</Label>
<Select>
<SelectTrigger
className="w-full"
defaultValue="mynaui/components"
>
<SelectValue placeholder="Select a repository" />
</SelectTrigger>
<SelectContent>
<SelectItem value="repo1">mynaui/components</SelectItem>
<SelectItem value="repo2">mynaui/design-system</SelectItem>
<SelectItem value="repo3">mynaui/documentation</SelectItem>
<SelectItem value="repo4">mynaui/website</SelectItem>
</SelectContent>
</Select>
</div>
<div className="grid w-full grid-cols-2 gap-2">
<DialogClose asChild>
<Button type="button" variant="outline" size="lg">
Cancel
</Button>
</DialogClose>
<Button type="submit" size="lg">
Connect to Repository
</Button>
</div>
</div>
</div>
<div className="z-20 flex w-full items-center justify-center p-4">
<p className="text-muted-foreground text-center text-sm">
By clicking "Connect Repository", you agree to grant
Mosaic access to the selected GitHub repository. This action is
subject to our{" "}
<a href="#" className="text-primary font-medium hover:underline">
Terms of Service
</a>{" "}
and{" "}
<a href="#" className="text-primary font-medium hover:underline">
Privacy Policy
</a>
.
</p>
</div>
<div className="pointer-events-none absolute -top-32 left-[70%] z-0 scale-[2.5] opacity-15 dark:hidden">
<img
src="/images/particles.png"
className="w-full max-w-none rotate-90 mix-blend-luminosity"
alt="background particles"
/>
</div>
<div className="pointer-events-none absolute -top-32 right-[70%] z-0 scale-[2.5] opacity-15 dark:hidden">
<img
src="/images/particles.png"
className="- w-full max-w-none rotate-90 mix-blend-luminosity"
alt="background particles"
/>
</div>
</div>
</DialogContent>
</Dialog>
);
}
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import { Circle, FilePlus } from "@mynaui/icons-react";
export default function ReportBugDialog() {
return (
<Dialog>
<DialogTrigger asChild>
<Button variant="outline">Report a Bug</Button>
</DialogTrigger>
<DialogContent className="bg-primary-foreground flex w-full flex-col items-center gap-6 overflow-hidden p-6">
<div className="flex w-full flex-col gap-1 text-left">
<h3 className="text-base font-semibold">Report a Bug</h3>
<p className="text-muted-foreground text-sm">
Help us improve our application by reporting any issues you
encounter.
</p>
</div>
<div className="grid w-full items-center justify-center gap-6 md:grid-cols-2">
<div className="flex w-full flex-col items-start gap-2">
<Label htmlFor="name">Name</Label>
<Input type="text" id="name" placeholder="Enter your name" />
</div>
<div className="flex w-full flex-col items-start gap-2">
<Label htmlFor="email">Email</Label>
<Input type="email" id="email" placeholder="Enter your email" />
</div>
<div className="col-span-2 flex w-full flex-col items-start gap-2">
<Label htmlFor="description">Brief Description</Label>
<Textarea
id="description"
placeholder="Provide a brief description of the bug"
className="resize-none"
/>
</div>
<div className="col-span-2 flex w-full flex-col items-start gap-2">
<Label htmlFor="steps">Steps to Reproduce</Label>
<Textarea
id="steps"
placeholder="Describe the steps to reproduce the bug"
className="resize-none"
/>
</div>
<div className="col-span-2 grid w-full items-start gap-6 md:grid-cols-2">
<div className="flex w-full flex-col items-start gap-2">
<Label htmlFor="severity">Severity</Label>
<Select>
<SelectTrigger className="w-full" defaultValue="medium">
<SelectValue placeholder="Select a severity" />
</SelectTrigger>
<SelectContent>
<SelectItem value="low">
<Circle
fill="currentColor"
className="text-primary size-2.5"
/>
<span className="truncate">Low</span>
</SelectItem>
<SelectItem value="medium">
<Circle
fill="currentColor"
className="text-yellow-500 size-2.5"
/>
<span className="truncate">Medium</span>
</SelectItem>
<SelectItem value="high">
<Circle
fill="currentColor"
className="text-red-500 size-2.5"
/>
<span className="truncate">High</span>
</SelectItem>
</SelectContent>
</Select>
</div>
<div className="flex w-full flex-col items-start gap-2">
<Label htmlFor="attachment">Attachment</Label>
<div className="flex w-full items-center gap-2">
<Button
variant="outline"
className="flex w-full items-center justify-start gap-2 bg-transparent"
asChild
>
<label htmlFor="attachment" className="cursor-pointer">
<FilePlus className="size-4 stroke-2" />
<span className="sr-only">Choose file</span>
<Input
type="file"
id="attachment"
className="hidden"
accept="image/*,.pdf,.doc,.docx"
/>
<span className="text-muted-foreground text-sm">
No file chosen
</span>
</label>
</Button>
</div>
</div>
</div>
<div className="col-span-2 flex w-full justify-end gap-2">
<Button variant="outline">Cancel</Button>
<Button type="submit">Submit Report</Button>
</div>
</div>
</DialogContent>
</Dialog>
);
}
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogClose,
DialogContent,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import {
InputOTP,
InputOTPGroup,
InputOTPSlot,
} from "@/components/ui/input-otp";
import { Separator } from "@/components/ui/separator";
import { Circle } from "@mynaui/icons-react";
import { Fingerprint } from "lucide-react";
export default function AuthenticatorDialog() {
return (
<Dialog>
<DialogTrigger asChild>
<Button variant="outline">Authenticator</Button>
</DialogTrigger>
<DialogContent className="w-full gap-0 overflow-hidden p-0">
<div className="border-border bg-background flex w-full flex-col items-center justify-center rounded-lg border-b">
<DialogHeader className="border-border w-full border-b px-5 py-4">
<DialogTitle className="text-left font-medium tracking-tight">
Google 2-Step Verification
</DialogTitle>
</DialogHeader>
<div className="flex flex-col gap-1.5 px-5 py-4">
<h3 className="text-sm font-medium">
Step 1: Install Google Authenticator
</h3>
<p className="text-muted-foreground text-sm">
Download the Google Authenticator app on your mobile device from
the{" "}
<Button
variant="link"
className="text-foreground h-auto p-0 text-sm leading-5 font-normal tracking-tight"
>
App Store
</Button>{" "}
or{" "}
<Button
variant="link"
className="text-foreground h-auto p-0 text-sm leading-5 font-normal tracking-tight"
>
Google Play
</Button>
.
</p>
</div>
<Separator className="bg-border my-0" />
<div className="flex flex-col gap-1.5 px-5 py-4">
<h3 className="text-sm font-medium">Step 2: Add Your Account</h3>
<p className="text-muted-foreground text-sm">
Open the Google Authenticator app. Tap the plus button and select
"Scan a QR code".
</p>
</div>
<Separator className="bg-border my-0" />
<div className="flex gap-1.5 px-5 py-4 w-full justify-between">
<div className="flex flex-col gap-1.5">
<h3 className="text-sm font-medium">Step 3: Scan the QR Code</h3>
<p className="text-muted-foreground max-w-prose text-sm leading-5 font-normal tracking-tight">
Use the Google Authenticator app to scan the QR code:
</p>
</div>
<img
src="/images/qr-mynaui-com.svg"
className="h-24 w-24 scale-125"
alt="QR code for Google Authenticator"
width={96}
height={96}
/>
</div>
<Separator className="bg-border my-0" />
<div className="flex flex-col gap-1.5 px-5 py-4">
<h3 className="text-sm font-medium">
Step 4: Enter the 6-Digit Code
</h3>
<p className="text-muted-foreground text-sm">
Enter the 6-digit verification code generated by the Google
Authenticator app:
</p>
<div className="mt-2 flex items-start justify-start gap-1.5">
<InputOTP maxLength={6}>
<InputOTPGroup>
<InputOTPSlot index={0} />
<InputOTPSlot index={1} />
<InputOTPSlot index={2} />
</InputOTPGroup>
<Circle
className="text-muted-foreground h-1 w-1"
fill="currentColor"
/>
<InputOTPGroup>
<InputOTPSlot index={3} />
<InputOTPSlot index={4} />
<InputOTPSlot index={5} />
</InputOTPGroup>
</InputOTP>
</div>
</div>
<Separator className="bg-border my-0" />
<div className="flex w-full flex-col gap-1.5 px-5 py-4">
<h3 className="text-sm font-medium">Step 5: Verify and Enable</h3>
<p className="text-muted-foreground text-sm">
Click "Verify" to complete the setup and secure your
account.
</p>
</div>
<Separator className="bg-border my-0" />
<div className="flex w-full items-center justify-between gap-1.5 px-5 py-4">
<DialogClose asChild>
<Button type="button" variant="outline">
Cancel
</Button>
</DialogClose>
<Button type="submit">Verify</Button>
</div>
</div>
<div className="flex items-start justify-start gap-4 p-6 pt-6">
<Fingerprint className="h-8 w-8" />
<div className="flex flex-col gap-1">
<h3 className="text-sm font-medium">Security Tips</h3>
<ul className="text-muted-foreground text-sm">
<li className="flex list-disc items-start gap-1.5">
<span>Keep your backup codes safe.</span>
</li>
<li className="flex list-disc items-start gap-1.5">
<span>Enable 2FA on other services for enhanced security.</span>
</li>
</ul>
</div>
</div>
</DialogContent>
</Dialog>
);
}
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import {
Dialog,
DialogClose,
DialogContent,
DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { Separator } from "@/components/ui/separator";
import { ShieldCheck } from "@mynaui/icons-react";
export default function PaymentDialog() {
return (
<Dialog>
<DialogTrigger asChild>
<Button variant="outline">Make a Payment</Button>
</DialogTrigger>
<DialogContent className="bg-primary-foreground flex w-full flex-col items-center gap-6 overflow-hidden p-6">
<div className="flex w-full flex-col gap-1">
<h3 className="text-base font-medium">
Add New Payment Method
</h3>
</div>
<div className="flex w-full flex-col items-center justify-center gap-6">
<RadioGroup className="w-full gap-2" defaultValue="credit-card">
<div className="border-input data-[state=checked]:border-ring relative flex w-full items-start gap-2 rounded-md border p-4 shadow-xs outline-none">
<RadioGroupItem
value="credit-card"
id="payment-1"
aria-describedby="payment-1-description"
className="order-1 after:absolute after:inset-0"
/>
<div className="flex grow items-center gap-3">
<svg
width="35"
height="25"
viewBox="0 0 35 25"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0.25 4.5C0.25 2.42893 1.92893 0.75 4 0.75H31C33.0711 0.75 34.75 2.42893 34.75 4.5V20.5C34.75 22.5711 33.0711 24.25 31 24.25H4C1.92893 24.25 0.25 22.5711 0.25 20.5V4.5Z"
fill="white"
stroke="#E2E8F0"
strokeWidth="0.5"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M10.6253 16.7582H8.50494L6.91495 10.6924C6.83949 10.4133 6.67925 10.1667 6.44354 10.0504C5.85531 9.75823 5.20712 9.5257 4.5 9.40843V9.1749H7.91567C8.38708 9.1749 8.74064 9.5257 8.79957 9.93313L9.62454 14.3086L11.7438 9.1749H13.8052L10.6253 16.7582ZM14.9838 16.7582H12.9813L14.6302 9.1749H16.6327L14.9838 16.7582ZM19.2234 11.2757C19.2823 10.8673 19.6359 10.6337 20.0483 10.6337C20.6965 10.5751 21.4026 10.6924 21.9919 10.9835L22.3454 9.35081C21.7562 9.11727 21.108 9 20.5198 9C18.5762 9 17.162 10.0504 17.162 11.5082C17.162 12.6173 18.1637 13.1996 18.8708 13.5504C19.6359 13.9002 19.9305 14.1338 19.8716 14.4835C19.8716 15.0082 19.2823 15.2418 18.6941 15.2418C17.9869 15.2418 17.2798 15.0669 16.6327 14.7747L16.2791 16.4085C16.9862 16.6996 17.7512 16.8169 18.4584 16.8169C20.6376 16.8745 21.9919 15.8251 21.9919 14.25C21.9919 12.2665 19.2234 12.1502 19.2234 11.2757ZM29 16.7582L27.41 9.1749H25.7022C25.3486 9.1749 24.9951 9.40843 24.8772 9.75823L21.9329 16.7582H23.9943L24.4058 15.6502H26.9386L27.1743 16.7582H29ZM25.9968 11.2171L26.585 14.0751H24.9361L25.9968 11.2171Z"
fill="#1E3A8A"
/>
</svg>
<div className="grid grow gap-2">
<Label
htmlFor="payment-1"
>
Credit Card
</Label>
</div>
</div>
</div>
<div className="border-input data-[state=checked]:border-ring relative flex w-full items-start gap-2 rounded-md border p-4 shadow-xs outline-none">
<RadioGroupItem
value="upi"
id="upi"
aria-describedby="upi-description"
className="order-1 after:absolute after:inset-0"
/>
<div className="flex grow items-center gap-3">
<svg
width="35"
height="25"
viewBox="0 0 35 25"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0.25 4.5C0.25 2.42893 1.92893 0.75 4 0.75H31C33.0711 0.75 34.75 2.42893 34.75 4.5V20.5C34.75 22.5711 33.0711 24.25 31 24.25H4C1.92893 24.25 0.25 22.5711 0.25 20.5V4.5Z"
fill="white"
stroke="#E2E8F0"
strokeWidth="0.5"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M26.9189 15.2251L30.4994 11.9588L28.8034 8.57983L26.9189 15.2251Z"
fill="#009966"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M25.7129 15.2251L29.2934 11.9588L27.5974 8.57983L25.7129 15.2251Z"
fill="#F97316"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M8.60222 8.61759L7.09472 13.9863L12.4465 14.0238L13.9165 8.61759H15.2732L13.5107 14.9026C13.4432 15.1426 13.1862 15.3376 12.937 15.3376H6.07722C5.66122 15.3376 5.41472 15.0126 5.52722 14.6126L7.20822 8.61759H8.60222ZM25.1477 8.58009H26.5045L24.62 15.3376H23.225L25.1477 8.58009ZM15.4242 11.3956L22.2082 11.3581L22.6607 9.93134H15.7632L16.1777 8.61734L23.5277 8.54984C23.9852 8.54559 24.2577 8.89984 24.1372 9.34159L23.4447 11.8726C23.324 12.3141 22.8547 12.6718 22.3972 12.6718H16.3287L15.6132 15.4501H14.2932L15.4242 11.3956Z"
fill="#334155"
/>
</svg>
<div className="grid grow gap-2">
<Label
htmlFor="upi"
>
UPI
</Label>
</div>
</div>
</div>
<div className="border-input data-[state=checked]:border-ring relative flex w-full items-start gap-2 rounded-md border p-4 shadow-xs outline-none">
<RadioGroupItem
value="paypal"
id="paypal"
aria-describedby="paypal-description"
className="order-1 after:absolute after:inset-0"
/>
<div className="flex grow items-center gap-3">
<svg
width="35"
height="25"
viewBox="0 0 35 25"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0.25 4.5C0.25 2.42893 1.92893 0.75 4 0.75H31C33.0711 0.75 34.75 2.42893 34.75 4.5V20.5C34.75 22.5711 33.0711 24.25 31 24.25H4C1.92893 24.25 0.25 22.5711 0.25 20.5V4.5Z"
fill="white"
stroke="#E2E8F0"
stroke-width="0.5"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M9.90001 15.741H8.34439C8.23794 15.741 8.1474 15.8183 8.1308 15.9234L7.50163 19.9125C7.48913 19.9912 7.55009 20.0621 7.62993 20.0621H8.37259C8.47905 20.0621 8.56958 19.9848 8.58618 19.8795L8.75588 18.8036C8.77225 18.6982 8.863 18.621 8.96924 18.621H9.46169C10.4864 18.621 11.0778 18.1251 11.2323 17.1424C11.3019 16.7125 11.2353 16.3748 11.0339 16.1381C10.8129 15.8784 10.4206 15.741 9.90001 15.741ZM10.0795 17.1979C9.99443 17.7561 9.56792 17.7561 9.15553 17.7561H8.92078L9.08547 16.7136C9.09525 16.6507 9.14984 16.6042 9.21353 16.6042H9.32112C9.60204 16.6042 9.86706 16.6042 10.004 16.7643C10.0856 16.8599 10.1106 17.0018 10.0795 17.1979ZM14.5501 17.18H13.8052C13.7417 17.18 13.6869 17.2264 13.6771 17.2895L13.6441 17.4978L13.592 17.4223C13.4308 17.1882 13.0712 17.11 12.7122 17.11C11.889 17.11 11.1859 17.7335 11.049 18.6081C10.9778 19.0443 11.079 19.4615 11.3264 19.7524C11.5535 20.0199 11.8783 20.1314 12.2647 20.1314C12.928 20.1314 13.2959 19.7049 13.2959 19.7049L13.2626 19.9119C13.2501 19.9911 13.3111 20.062 13.3904 20.062H14.0615C14.1682 20.062 14.2582 19.9847 14.2751 19.8794L14.6777 17.3297C14.6904 17.2513 14.6297 17.18 14.5501 17.18ZM13.5117 18.6299C13.4398 19.0555 13.102 19.3412 12.6713 19.3412C12.455 19.3412 12.282 19.2718 12.1711 19.1403C12.061 19.0098 12.0191 18.8239 12.0541 18.617C12.1213 18.195 12.4647 17.9 12.889 17.9C13.1004 17.9 13.2724 17.9702 13.3857 18.1029C13.4992 18.2369 13.5442 18.4238 13.5117 18.6299ZM17.769 17.1799H18.5176C18.6224 17.1799 18.6836 17.2975 18.624 17.3835L16.1342 20.9774C16.0939 21.0356 16.0275 21.0702 15.9565 21.0702H15.2089C15.1036 21.0702 15.0421 20.9517 15.1031 20.8655L15.8783 19.7712L15.0538 17.3514C15.0253 17.2673 15.0874 17.1799 15.1769 17.1799H15.9124C16.008 17.1799 16.0923 17.2427 16.1199 17.3341L16.5575 18.7956L17.59 17.2748C17.6304 17.2154 17.6976 17.1799 17.769 17.1799Z"
fill="#172554"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M25.8851 19.9124L26.5236 15.8504C26.5334 15.7874 26.588 15.7409 26.6515 15.7407H27.3702C27.4496 15.7407 27.5105 15.8119 27.498 15.8906L26.8684 19.8795C26.852 19.9847 26.7615 20.0621 26.6548 20.0621H26.0129C25.9336 20.0621 25.8726 19.9912 25.8851 19.9124ZM20.9958 15.7409H19.4399C19.3337 15.7409 19.2431 15.8183 19.2265 15.9234L18.5973 19.9124C18.5848 19.9912 18.6458 20.0621 18.7252 20.0621H19.5236C19.5978 20.0621 19.6612 20.008 19.6728 19.9343L19.8513 18.8036C19.8678 18.6982 19.9585 18.6209 20.0647 18.6209H20.5569C21.5819 18.6209 22.1731 18.125 22.3278 17.1424C22.3976 16.7125 22.3305 16.3747 22.1292 16.1381C21.9083 15.8784 21.5164 15.7409 20.9958 15.7409ZM21.1752 17.1979C21.0904 17.7561 20.6639 17.7561 20.2512 17.7561H20.0167L20.1817 16.7136C20.1914 16.6506 20.2456 16.6042 20.3094 16.6042H20.417C20.6978 16.6042 20.963 16.6042 21.0999 16.7643C21.1816 16.8599 21.2064 17.0018 21.1752 17.1979ZM25.6455 17.18H24.901C24.837 17.18 24.7827 17.2264 24.7731 17.2895L24.7402 17.4978L24.6879 17.4223C24.5266 17.1882 24.1672 17.11 23.8083 17.11C22.985 17.11 22.2822 17.7335 22.1452 18.6081C22.0743 19.0443 22.175 19.4615 22.4225 19.7524C22.65 20.0199 22.9744 20.1314 23.3608 20.1314C24.0241 20.1314 24.3919 19.7048 24.3919 19.7048L24.3587 19.9119C24.3462 19.991 24.4071 20.062 24.487 20.062H25.1578C25.264 20.062 25.3545 19.9846 25.3711 19.8794L25.774 17.3297C25.7863 17.2513 25.7254 17.18 25.6455 17.18ZM24.6071 18.6299C24.5357 19.0555 24.1975 19.3412 23.7666 19.3412C23.5507 19.3412 23.3775 19.2718 23.2664 19.1403C23.1563 19.0098 23.1149 18.8239 23.1496 18.6169C23.217 18.1949 23.5601 17.9 23.9843 17.9C24.1959 17.9 24.3678 17.9702 24.4811 18.1028C24.595 18.2368 24.6401 18.4238 24.6071 18.6299Z"
fill="#3B82F6"
/>
<path
d="M15.6566 14.3138L15.8479 13.0991L15.4219 13.0892H13.3877L14.8014 4.12534C14.8057 4.09828 14.82 4.07305 14.8409 4.05513C14.8617 4.03722 14.8884 4.02734 14.9162 4.02734H18.3462C19.485 4.02734 20.2708 4.2643 20.6811 4.732C20.8734 4.95141 20.9959 5.18068 21.0552 5.433C21.1173 5.69776 21.1184 6.01406 21.0577 6.39985L21.0533 6.42801V6.6752L21.2457 6.78418C21.4077 6.87011 21.5363 6.96848 21.6351 7.08111C21.7997 7.2687 21.9061 7.50712 21.9511 7.78978C21.9975 8.0805 21.9821 8.42643 21.9061 8.81807C21.8183 9.26859 21.6765 9.66096 21.4849 9.98202C21.3086 10.2779 21.084 10.5232 20.8175 10.7134C20.563 10.894 20.2606 11.0312 19.9187 11.119C19.5873 11.2052 19.2096 11.2488 18.7953 11.2488H18.5283C18.3375 11.2488 18.152 11.3175 18.0065 11.4408C17.8607 11.5665 17.764 11.7383 17.7344 11.9263L17.7143 12.0357L17.3764 14.1767L17.3611 14.2553C17.3571 14.2802 17.3501 14.2927 17.3399 14.3011C17.3308 14.3087 17.3176 14.3138 17.3048 14.3138H15.6566Z"
fill="#172554"
/>
<path
d="M21.4279 6.45654C21.4177 6.522 21.406 6.58891 21.3928 6.65766C20.9404 8.98007 19.3929 9.78237 17.4164 9.78237H16.4101C16.1684 9.78237 15.9647 9.95789 15.927 10.1963L15.4118 13.464L15.2659 14.3902C15.2413 14.5468 15.3621 14.6879 15.52 14.6879H17.3049C17.5163 14.6879 17.6958 14.5344 17.729 14.3259L17.7466 14.2352L18.0827 12.1026L18.1043 11.9856C18.1371 11.7764 18.317 11.6229 18.5284 11.6229H18.7954C20.5246 11.6229 21.8784 10.9208 22.2741 8.88902C22.4394 8.04028 22.3538 7.33161 21.9164 6.83319C21.7841 6.68289 21.6199 6.5582 21.4279 6.45654Z"
fill="#3B82F6"
/>
<path
d="M20.9545 6.26807C20.8854 6.24796 20.814 6.22967 20.7409 6.21322C20.6674 6.19713 20.592 6.18287 20.5146 6.17044C20.2432 6.12656 19.9459 6.10571 19.6274 6.10571H16.939C16.8728 6.10571 16.8099 6.1207 16.7536 6.14777C16.6296 6.20737 16.5375 6.32476 16.5152 6.46846L15.9432 10.0909L15.9268 10.1965C15.9644 9.95811 16.1681 9.78258 16.4098 9.78258H17.4161C19.3927 9.78258 20.9402 8.97993 21.3926 6.65788C21.406 6.58914 21.4174 6.52222 21.4276 6.45677C21.3132 6.39606 21.1892 6.34413 21.0557 6.29988C21.0229 6.28891 20.9889 6.27831 20.9545 6.26807Z"
fill="#1E3A8A"
/>
<path
d="M16.5156 6.46842C16.5379 6.3247 16.6301 6.20732 16.754 6.14808C16.8107 6.12102 16.8733 6.10603 16.9394 6.10603H19.6279C19.9464 6.10603 20.2437 6.12687 20.5149 6.17076C20.5925 6.18319 20.6679 6.19745 20.7414 6.21354C20.8145 6.23 20.8858 6.24828 20.9549 6.26839C20.9893 6.27863 21.0233 6.28923 21.0565 6.29984C21.19 6.34408 21.314 6.39638 21.4284 6.45672C21.5631 5.59847 21.4274 5.01412 20.9634 4.48498C20.4518 3.90247 19.5284 3.65308 18.3469 3.65308H14.9168C14.6755 3.65308 14.4697 3.82859 14.4323 4.06738L13.0037 13.1234C12.9755 13.3025 13.1137 13.4642 13.2943 13.4642H15.412L15.9437 10.0908L16.5156 6.46842Z"
fill="#172554"
/>
</svg>
<div className="grid grow gap-2">
<Label
htmlFor="paypal"
>
PayPal
</Label>
</div>
</div>
</div>
</RadioGroup>
<Separator />
<div className="grid w-full items-center gap-2">
<Label htmlFor="cardHolderName">Card Holder Name</Label>
<Input
type="text"
id="cardHolderName"
placeholder="Enter name here"
/>
</div>
<div className="grid w-full items-center gap-2">
<Label htmlFor="cardNumber">Card Number</Label>
<Input
type="text"
id="cardNumber"
placeholder="0000 0000 0000 0000"
/>
</div>
<div className="grid grid-cols-2 gap-4 w-full">
<div className="grid w-full items-center gap-2">
<Label htmlFor="expirationDate">Expiration Date</Label>
<Input type="text" id="expirationDate" placeholder="MM/YY" />
</div>
<div className="grid w-full items-center gap-2">
<Label htmlFor="cvv">CVV</Label>
<div className="relative">
<Input
type="password"
id="cvv"
placeholder="•••"
maxLength={4}
/>
<ShieldCheck
stroke={2}
className="text-muted-foreground absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2"
/>
</div>
</div>
</div>
<div className="flex w-full items-center justify-start gap-2">
<Checkbox id="saveCard" />
<Label htmlFor="saveCard" className="text-sm">
Save card securely for future payments
</Label>
</div>
<Separator className="my-0" />
</div>
<div className="col-span-2 flex w-full justify-end gap-2">
<DialogClose asChild>
<Button variant="outline">Cancel</Button>
</DialogClose>
<Button type="submit">Add Card</Button>
</div>
</DialogContent>
</Dialog>
);
}
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
import {
ArrowRight,
CheckDiamondSolid,
CheckHexagonSolid,
Diamond,
} from "@mynaui/icons-react";
export default function PayNowDialog() {
return (
<Dialog>
<DialogTrigger asChild>
<Button variant="outline">Pay Now</Button>
</DialogTrigger>
<DialogContent className="bg-primary-foreground flex w-full flex-col items-center gap-6 overflow-hidden p-6">
<div className="flex w-full flex-col gap-0.5 text-left">
<p className="text-primary text-sm font-semibold tracking-tight">
MynaUI Pro
</p>
<h3 className="text-lg font-bold">Elevate Your Development</h3>
<p className="text-muted-foreground text-sm">
Everything you need to build exceptional interfaces.
</p>
</div>
<div className="flex w-full flex-col items-center justify-center gap-6">
<div className="border-border grid w-full grid-cols-1 divide-y rounded-lg border">
<div className="flex items-center justify-between p-3">
<div className="flex items-center gap-2">
<CheckDiamondSolid
stroke={2}
fill="currentColor"
className="text-primary h-5 w-5"
/>
<p className="text-center align-middle text-base leading-5 font-semibold tracking-normal">
Yearly
</p>
</div>
<div className="flex items-center gap-1">
<p className="align-middle text-2xl leading-none font-bold">
$89
</p>
<span className="text-muted-foreground align-middle text-sm leading-none font-normal tracking-normal">
/year
</span>
</div>
</div>
<div className="flex items-center justify-between p-3">
<div className="flex items-center gap-2">
<Diamond className="text-border h-5 w-5" />
<p className="text-center align-middle text-base leading-5 font-semibold tracking-normal">
Monthly
</p>
</div>
<div className="flex items-center gap-1">
<p className="align-middle text-2xl leading-none font-bold">
$19
</p>
<span className="text-muted-foreground align-middle text-sm leading-none font-normal tracking-normal">
/month
</span>
</div>
</div>
<div className="flex w-full items-start p-3">
<p className="text-muted-foreground text-sm">
Need a custom solution?{" "}
<a
href="#"
className="text-primary decoration-offset-0 text-sm leading-5 tracking-normal underline decoration-solid decoration-0"
>
Contact us
</a>{" "}
about enterprise
</p>
</div>
</div>
<div className="border-border bg-primary-foreground w-full space-y-4 rounded-lg border p-4">
<h3 className="text-base font-semibold">What's Included</h3>
<ul className="space-y-4">
<li className="flex items-center gap-2">
<CheckHexagonSolid
stroke={2}
fill="currentColor"
className="size-4 text-emerald-500"
/>
<p className="align-middle text-sm leading-none font-normal tracking-normal">
Access to all premium components and templates
</p>
</li>
<li className="flex items-center gap-2">
<CheckHexagonSolid
stroke={2}
fill="currentColor"
className="size-4 text-emerald-500"
/>
<p className="align-middle text-sm leading-none font-normal tracking-normal">
Advanced theming and customization tools
</p>
</li>
<li className="flex items-center gap-2">
<CheckHexagonSolid
stroke={2}
fill="currentColor"
className="size-4 text-emerald-500"
/>
<p className="align-middle text-sm leading-none font-normal tracking-normal">
Priority support and dedicated assistance
</p>
</li>
<li className="flex items-center gap-2">
<CheckHexagonSolid
stroke={2}
fill="currentColor"
className="size-4 text-emerald-500"
/>
<p className="align-middle text-sm leading-none font-normal tracking-normal">
Early access to new features and components
</p>
</li>
<li className="flex items-center gap-2">
<CheckHexagonSolid
stroke={2}
fill="currentColor"
className="size-4 text-emerald-500"
/>
<p className="align-middle text-sm leading-none font-normal tracking-normal">
Unlimited projects and commercial usage
</p>
</li>
</ul>
</div>
</div>
<div className="col-span-2 flex w-full items-center">
<Button type="submit" className="w-full">
Pay Now <ArrowRight stroke={2} />
</Button>
</div>
</DialogContent>
</Dialog>
);
}
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogClose,
DialogContent,
DialogTrigger,
} from "@/components/ui/dialog";
import { CheckCircleSolid, LockPassword } from "@mynaui/icons-react";
import { ArrowRight, Check } from "lucide-react";
export default function WorkspaceDialog() {
return (
<Dialog>
<DialogTrigger asChild>
<Button variant="outline">Choose Workspace</Button>
</DialogTrigger>
<DialogContent className="bg-primary-foreground p-0 sm:max-w-3xl">
<div className="space-y-4 p-6">
<div className="flex flex-col items-start justify-start gap-3">
<div className="bg-background border-border rounded-full border p-2">
<LockPassword className="h-5 w-5" />
</div>
<div>
<h3 className="text-lg font-semibold">Choose your workspace</h3>
<p className="text-muted-foreground text-base font-normal tracking-tight">
Select the plan that works best for your team.
</p>
</div>
</div>
<div className="grid gap-4 md:grid-cols-2">
<div className="grid gap-3">
<div className="bg-background relative flex items-center gap-3 rounded-lg border p-4 px-4 py-3">
<div className="flex h-6 w-6 items-center justify-center rounded-full">
<CheckCircleSolid className="h-5 w-5 text-emerald-500" />
</div>
<div>
<h3 className="font-semibold">Basic</h3>
<p className="text-muted-foreground text-sm">
$7 per user/month
</p>
</div>
</div>
<div className="bg-background relative flex items-center gap-3 rounded-lg border p-4 px-4 py-3">
<div className="flex h-6 w-6 items-center justify-center rounded-full">
<CheckCircleSolid className="text-muted h-5 w-5" />
</div>
<div>
<h3 className="font-semibold">Pro</h3>
<p className="text-muted-foreground text-sm">
$12 per user/month
</p>
</div>
</div>
<div className="bg-background relative flex items-center gap-3 rounded-lg border p-4 px-4 py-3">
<div className="flex h-6 w-6 items-center justify-center rounded-full">
<CheckCircleSolid className="text-muted h-5 w-5" />
</div>
<div>
<h3 className="font-semibold">Business</h3>
<p className="text-muted-foreground text-sm">
$24 per user/month
</p>
</div>
</div>
</div>
<div>
<h3 className="mb-3 text-base font-medium">
What's included:
</h3>
<ul className="space-y-3">
<li className="text-muted-foreground flex items-center gap-3 text-sm leading-none font-normal tracking-normal">
<Check className="h-4 w-4 text-green-500" />
<span>Collaborative workspaces for your entire team</span>
</li>
<li className="text-muted-foreground flex items-center gap-3 text-sm leading-none font-normal tracking-normal">
<Check className="h-4 w-4 text-green-500" />
<span>Real-time document editing and sharing</span>
</li>
<li className="text-muted-foreground flex items-center gap-3 text-sm leading-none font-normal tracking-normal">
<Check className="h-4 w-4 text-green-500" />
<span>Custom branding and workspace themes</span>
</li>
<li className="text-muted-foreground flex items-center gap-3 text-sm leading-none font-normal tracking-normal">
<Check className="h-4 w-4 text-green-500" />
<span>Priority customer support</span>
</li>
<li className="text-muted-foreground flex items-center gap-3 text-sm leading-none font-normal tracking-normal">
<Check className="h-4 w-4 text-green-500" />
<span>14-day free trial with no credit card required</span>
</li>
</ul>
</div>
</div>
</div>
<div className="flex items-center justify-end gap-2 border-t p-4 bg-background">
<DialogClose asChild>
<Button type="button" variant="outline">
Cancel
</Button>
</DialogClose>
<Button type="submit">
Pay Now <ArrowRight className="ml-1 h-4 w-4" />
</Button>
</div>
</DialogContent>
</Dialog>
);
}