new changes

2024-12-26 20:51:14 +03:30
parent acb5fb4edd
commit 208a913647
1 changed files with 78 additions and 0 deletions
@@ -0,0 +1,78 @@
 <script setup lang="ts"></script>
 <template>
    <DialogRoot modal>
        <DialogTrigger>
            <Button
                end-icon="ci:filter"
                variant="secondary"
                class="rounded-full"
            >
                فیلتر محصولات
            </Button>
        </DialogTrigger>
        <DialogPortal to="#teleports">
            <DialogOverlay
                class="bg-black/60 backdrop-blur-sm data-[state=open]:animate-overlay-show fixed inset-0 z-30"
            />
            <DialogContent
                class="data-[state=open]:animate-content-show absolute top-1/2 left-1/2 max-h-[85vh] w-[90vw] max-w-[450px] -translate-x-1/2 -translate-y-1/2 rounded-[6px] bg-white p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none z-[100]"
            >
                <DialogTitle
                    class="flex items-center typo-h-4 text-black font-semibold"
                >
                    Edit profile
                </DialogTitle>
                <DialogDescription
                    class="text-mauve11 mt-[10px] mb-5 text-sm leading-normal"
                >
                    Make changes to your profile here. Click save when you're
                    done.
                </DialogDescription>
                <fieldset class="mb-[15px] flex items-center gap-5">
                    <label
                        class="text-black w-[90px] text-right text-sm"
                        for="name"
                    >
                        Name
                    </label>
                    <input
                        id="name"
                        class="text-black bg-stone-50 shadow-green7 focus:shadow-gray-100 inline-flex h-[35px] w-full flex-1 items-center justify-center rounded-lg px-[10px] text-sm leading-none shadow-[0_0_0_1px] outline-none focus:shadow-[0_0_0_2px]"
                        defaultValue="Pedro Duarte"
                    />
                </fieldset>
                <fieldset class="mb-[15px] flex items-center gap-5">
                    <label
                        class="text-black w-[90px] text-right text-sm"
                        for="username"
                    >
                        Username
                    </label>
                    <input
                        id="username"
                        class="text-black bg-stone-50 shadow-green7 focus:shadow-gray-100 inline-flex h-[35px] w-full flex-1 items-center justify-center rounded-lg px-[10px] text-sm leading-none shadow-[0_0_0_1px] outline-none focus:shadow-[0_0_0_2px]"
                        defaultValue="@peduarte"
                    />
                </fieldset>
                <div class="mt-[25px] flex justify-end">
                    <DialogClose as-child>
                        <button
                            class="bg-green4 text-green11 text-sm hover:bg-green5 focus:shadow-green7 inline-flex h-[35px] items-center justify-center rounded-lg px-[15px] font-semibold leading-none focus:shadow-[0_0_0_2px] focus:outline-none"
                        >
                            Save changes
                        </button>
                    </DialogClose>
                </div>
                <DialogClose
                    class="text-black hover:bg-green4 focus:shadow-green7 absolute top-[10px] right-[10px] inline-flex h-[25px] w-[25px] appearance-none items-center justify-center rounded-full focus:shadow-[0_0_0_2px] focus:outline-none"
                    aria-label="Close"
                >
                    <Icon name="ci:close" />
                </DialogClose>
            </DialogContent>
        </DialogPortal>
    </DialogRoot>
 </template>
 <style lang="scss" scoped></style>