Ilgeldi
/
turkmentv_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

commit

This commit is contained in:
Kakabay 2024-10-14 19:17:35 +05:00
parent db2c990744
commit c2223e8361
2 changed files with 186 additions and 186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

166
components/prizes/PrizeCard.tsx
View File

@ -1,15 +1,15 @@
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
import Image from 'next/image'; import Image from 'next/image';
import { // import {
Dialog, // Dialog,
DialogClose, // DialogClose,
DialogContent, // DialogContent,
DialogDescription, // DialogDescription,
DialogFooter, // DialogFooter,
DialogHeader, // DialogHeader,
DialogTitle, // DialogTitle,
DialogTrigger, // DialogTrigger,
} from '@/components/ui/dialog'; // } from '@/components/ui/dialog';
import { Dispatch, SetStateAction, useState } from 'react'; import { Dispatch, SetStateAction, useState } from 'react';
import axios from 'axios'; import axios from 'axios';
import { useMutation } from '@tanstack/react-query'; import { useMutation } from '@tanstack/react-query';
@ -77,81 +77,81 @@ const PrizeCard = ({
} }
}; };
return ( // return (
<div // <div
className={cn( // className={cn(
'bg-lightSurfaceContainerHigher flex md:flex-row flex-col rounded-[12px] overflow-hidden w-full', // 'bg-lightSurfaceContainerHigher flex md:flex-row flex-col rounded-[12px] overflow-hidden w-full',
className, // className,
{ // {
'opacity-50': variant === 'disabled', // 'opacity-50': variant === 'disabled',
}, // },
)}> // )}>
<div className="flex-1 overflow-hidden md:h-full h-[186px]"> // <div className="flex-1 overflow-hidden md:h-full h-[186px]">
<Image // <Image
width={416} // width={416}
height={248} // height={248}
src={image ? image : '/prize.jpg'} // src={image ? image : '/prize.jpg'}
alt="prize" // alt="prize"
className="h-full w-full" // className="h-full w-full"
/> // />
</div> // </div>
<div className="flex-1 p-[16px] flex flex-col gap-[16px]"> // <div className="flex-1 p-[16px] flex flex-col gap-[16px]">
<h2 className="text-heading5 leading-heading5 -tracking-[-1%] font-medium text-lightOnSurface"> // <h2 className="text-heading5 leading-heading5 -tracking-[-1%] font-medium text-lightOnSurface">
{title} // {title}
</h2> // </h2>
<p className="text-textSmall leading-textSmall -tracking-[-1%] text-lightOnSurfaceVariant"> // <p className="text-textSmall leading-textSmall -tracking-[-1%] text-lightOnSurfaceVariant">
{description} // {description}
</p> // </p>
{variant === 'default' ? ( // {variant === 'default' ? (
<> // <>
{/* DialogTrigger to open the dialog */} // {/* DialogTrigger to open the dialog */}
<div> // <div>
<Dialog open={dialogOpen} onOpenChange={handleDialogClose}> // <Dialog open={dialogOpen} onOpenChange={handleDialogClose}>
<DialogTrigger asChild> // <DialogTrigger asChild>
<button // <button
className="px-[24px] py-[10px] w-full md:w-fit text-textSmall leading-textSmall -tracking-[-1%] font-medium bg-lightPrimary text-lightOnPrimary rounded-[40px]" // className="px-[24px] py-[10px] w-full md:w-fit text-textSmall leading-textSmall -tracking-[-1%] font-medium bg-lightPrimary text-lightOnPrimary rounded-[40px]"
onClick={handleDialogOpen} // onClick={handleDialogOpen}
disabled={choosePrizeMutation.isLoading}> // disabled={choosePrizeMutation.isLoading}>
{choosePrizeMutation.isLoading ? 'Loading...' : 'Выбрать'} // {choosePrizeMutation.isLoading ? 'Loading...' : 'Выбрать'}
</button> // </button>
</DialogTrigger> // </DialogTrigger>
{/* DialogContent that shows loading or response */} // {/* DialogContent that shows loading or response */}
<DialogContent className="bg-lightSurfaceContainer flex flex-col gap-[8px]"> // <DialogContent className="bg-lightSurfaceContainer flex flex-col gap-[8px]">
<DialogHeader className="flex flex-col gap-[8px]"> // <DialogHeader className="flex flex-col gap-[8px]">
<DialogTitle>{dialogTitle}</DialogTitle> // <DialogTitle>{dialogTitle}</DialogTitle>
<DialogDescription>{dialogDescription}</DialogDescription> // <DialogDescription>{dialogDescription}</DialogDescription>
</DialogHeader> // </DialogHeader>
{dialogTitle !== 'Загрузка...' && ( // {dialogTitle !== 'Загрузка...' && (
<DialogFooter> // <DialogFooter>
<DialogClose asChild> // <DialogClose asChild>
<button className="px-[24px] py-[10px] w-full text-textSmall leading-textSmall -tracking-[-1%] font-medium bg-lightPrimary text-lightOnPrimary rounded-[40px]"> // <button className="px-[24px] py-[10px] w-full text-textSmall leading-textSmall -tracking-[-1%] font-medium bg-lightPrimary text-lightOnPrimary rounded-[40px]">
Закрыть // Закрыть
</button> // </button>
</DialogClose> // </DialogClose>
</DialogFooter> // </DialogFooter>
)} // )}
</DialogContent> // </DialogContent>
</Dialog> // </Dialog>
</div> // </div>
</> // </>
) : variant === 'disabled' ? ( // ) : variant === 'disabled' ? (
<button // <button
disabled // disabled
className="px-[24px] py-[10px] w-fit text-textSmall leading-textSmall opacity-[0.12] -tracking-[-1%] font-medium bg-lightOnSurfaceDisabled text-lightOnSurface rounded-[40px]"> // className="px-[24px] py-[10px] w-fit text-textSmall leading-textSmall opacity-[0.12] -tracking-[-1%] font-medium bg-lightOnSurfaceDisabled text-lightOnSurface rounded-[40px]">
Недоступно // Недоступно
</button> // </button>
) : variant === 'selected' ? ( // ) : variant === 'selected' ? (
<button // <button
disabled // disabled
className="px-[24px] py-[10px] w-fit text-textSmall leading-textSmall -tracking-[-1%] font-medium bg-lightOnSurfaceDisabled text-lightOnSurface rounded-[40px]"> // className="px-[24px] py-[10px] w-fit text-textSmall leading-textSmall -tracking-[-1%] font-medium bg-lightOnSurfaceDisabled text-lightOnSurface rounded-[40px]">
Выбрано // Выбрано
</button> // </button>
) : null} // ) : null}
</div> // </div>
</div> // </div>
); // );
}; };
export default PrizeCard; export default PrizeCard;

206
components/ui/dialog.tsx
View File

@ -1,116 +1,116 @@
'use client'; // 'use client';
import * as React from 'react'; // import * as React from 'react';
import * as DialogPrimitive from '@radix-ui/react-dialog'; // import * as DialogPrimitive from '@radix-ui/react-dialog';
import { X } from 'lucide-react'; // import { X } from 'lucide-react';
import { cn } from '@/lib/utils'; // import { cn } from '@/lib/utils';
const Dialog = DialogPrimitive.Root; // const Dialog = DialogPrimitive.Root;
const DialogTrigger = DialogPrimitive.Trigger; // const DialogTrigger = DialogPrimitive.Trigger;
const DialogPortal = DialogPrimitive.Portal; // const DialogPortal = DialogPrimitive.Portal;
const DialogClose = DialogPrimitive.Close; // const DialogClose = DialogPrimitive.Close;
const DialogOverlay = React.forwardRef< // const DialogOverlay = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Overlay>, // React.ElementRef<typeof DialogPrimitive.Overlay>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> // React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
>(({ className, ...props }, ref) => ( // >(({ className, ...props }, ref) => (
<DialogPrimitive.Overlay // <DialogPrimitive.Overlay
ref={ref} // ref={ref}
className={cn( // className={cn(
'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0', // 'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
className, // className,
)} // )}
{...props} // {...props}
/> // />
)); // ));
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName; // DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
const DialogContent = React.forwardRef< // const DialogContent = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Content>, // React.ElementRef<typeof DialogPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> // React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => ( // >(({ className, children, ...props }, ref) => (
<DialogPortal> // <DialogPortal>
<DialogOverlay /> // <DialogOverlay />
<DialogPrimitive.Content // <DialogPrimitive.Content
ref={ref} // ref={ref}
className={cn( // className={cn(
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg', // 'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
className, // className,
)} // )}
{...props}> // {...props}>
{children} // {children}
<DialogPrimitive.Close className="absolute right-0 top-0 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none "> // <DialogPrimitive.Close className="absolute right-0 top-0 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none ">
<svg // <svg
width="48" // width="48"
height="48" // height="48"
viewBox="0 0 48 48" // viewBox="0 0 48 48"
fill="none" // fill="none"
xmlns="http://www.w3.org/2000/svg"> // xmlns="http://www.w3.org/2000/svg">
<path // <path
d="M25.46 24L31 29.54V31H29.54L24 25.46L18.46 31H17V29.54L22.54 24L17 18.46V17H18.46L24 22.54L29.54 17H31V18.46L25.46 24Z" // d="M25.46 24L31 29.54V31H29.54L24 25.46L18.46 31H17V29.54L22.54 24L17 18.46V17H18.46L24 22.54L29.54 17H31V18.46L25.46 24Z"
fill="#46464F" // fill="#46464F"
/> // />
</svg> // </svg>
<span className="sr-only">Close</span> // <span className="sr-only">Close</span>
</DialogPrimitive.Close> // </DialogPrimitive.Close>
</DialogPrimitive.Content> // </DialogPrimitive.Content>
</DialogPortal> // </DialogPortal>
)); // ));
DialogContent.displayName = DialogPrimitive.Content.displayName; // DialogContent.displayName = DialogPrimitive.Content.displayName;
const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => ( // const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
<div className={cn('flex flex-col text-center sm:text-left', className)} {...props} /> // <div className={cn('flex flex-col text-center sm:text-left', className)} {...props} />
); // );
DialogHeader.displayName = 'DialogHeader'; // DialogHeader.displayName = 'DialogHeader';
const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => ( // const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
<div // <div
className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} // className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
{...props} // {...props}
/> // />
); // );
DialogFooter.displayName = 'DialogFooter'; // DialogFooter.displayName = 'DialogFooter';
const DialogTitle = React.forwardRef< // const DialogTitle = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Title>, // React.ElementRef<typeof DialogPrimitive.Title>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> // React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
>(({ className, ...props }, ref) => ( // >(({ className, ...props }, ref) => (
<DialogPrimitive.Title // <DialogPrimitive.Title
ref={ref} // ref={ref}
className={cn('text-lightOnSurface text-heading5 leading-heading5 -tracking-[1%]', className)} // className={cn('text-lightOnSurface text-heading5 leading-heading5 -tracking-[1%]', className)}
{...props} // {...props}
/> // />
)); // ));
DialogTitle.displayName = DialogPrimitive.Title.displayName; // DialogTitle.displayName = DialogPrimitive.Title.displayName;
const DialogDescription = React.forwardRef< // const DialogDescription = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Description>, // React.ElementRef<typeof DialogPrimitive.Description>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> // React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
>(({ className, ...props }, ref) => ( // >(({ className, ...props }, ref) => (
<DialogPrimitive.Description // <DialogPrimitive.Description
ref={ref} // ref={ref}
className={cn( // className={cn(
'text-lightOnSurfaceVariant text-textSmall leading-textSmall -tracking-[1%]', // 'text-lightOnSurfaceVariant text-textSmall leading-textSmall -tracking-[1%]',
className, // className,
)} // )}
{...props} // {...props}
/> // />
)); // ));
DialogDescription.displayName = DialogPrimitive.Description.displayName; // DialogDescription.displayName = DialogPrimitive.Description.displayName;
export { // export {
Dialog, // Dialog,
DialogPortal, // DialogPortal,
DialogOverlay, // DialogOverlay,
DialogClose, // DialogClose,
DialogTrigger, // DialogTrigger,
DialogContent, // DialogContent,
DialogHeader, // DialogHeader,
DialogFooter, // DialogFooter,
DialogTitle, // DialogTitle,
DialogDescription, // DialogDescription,
}; // };