commit
This commit is contained in:
Kakabay
parent
db2c990744
commit
c2223e8361
|
|
@ -1,15 +1,15 @@
|
|||
import { cn } from '@/lib/utils';
|
||||
import Image from 'next/image';
|
||||
import {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from '@/components/ui/dialog';
|
||||
// import {
|
||||
// Dialog,
|
||||
// DialogClose,
|
||||
// DialogContent,
|
||||
// DialogDescription,
|
||||
// DialogFooter,
|
||||
// DialogHeader,
|
||||
// DialogTitle,
|
||||
// DialogTrigger,
|
||||
// } from '@/components/ui/dialog';
|
||||
import { Dispatch, SetStateAction, useState } from 'react';
|
||||
import axios from 'axios';
|
||||
import { useMutation } from '@tanstack/react-query';
|
||||
|
|
@ -77,81 +77,81 @@ const PrizeCard = ({
|
|||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'bg-lightSurfaceContainerHigher flex md:flex-row flex-col rounded-[12px] overflow-hidden w-full',
|
||||
className,
|
||||
{
|
||||
'opacity-50': variant === 'disabled',
|
||||
},
|
||||
)}>
|
||||
<div className="flex-1 overflow-hidden md:h-full h-[186px]">
|
||||
<Image
|
||||
width={416}
|
||||
height={248}
|
||||
src={image ? image : '/prize.jpg'}
|
||||
alt="prize"
|
||||
className="h-full w-full"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1 p-[16px] flex flex-col gap-[16px]">
|
||||
<h2 className="text-heading5 leading-heading5 -tracking-[-1%] font-medium text-lightOnSurface">
|
||||
{title}
|
||||
</h2>
|
||||
<p className="text-textSmall leading-textSmall -tracking-[-1%] text-lightOnSurfaceVariant">
|
||||
{description}
|
||||
</p>
|
||||
// return (
|
||||
// <div
|
||||
// className={cn(
|
||||
// 'bg-lightSurfaceContainerHigher flex md:flex-row flex-col rounded-[12px] overflow-hidden w-full',
|
||||
// className,
|
||||
// {
|
||||
// 'opacity-50': variant === 'disabled',
|
||||
// },
|
||||
// )}>
|
||||
// <div className="flex-1 overflow-hidden md:h-full h-[186px]">
|
||||
// <Image
|
||||
// width={416}
|
||||
// height={248}
|
||||
// src={image ? image : '/prize.jpg'}
|
||||
// alt="prize"
|
||||
// className="h-full w-full"
|
||||
// />
|
||||
// </div>
|
||||
// <div className="flex-1 p-[16px] flex flex-col gap-[16px]">
|
||||
// <h2 className="text-heading5 leading-heading5 -tracking-[-1%] font-medium text-lightOnSurface">
|
||||
// {title}
|
||||
// </h2>
|
||||
// <p className="text-textSmall leading-textSmall -tracking-[-1%] text-lightOnSurfaceVariant">
|
||||
// {description}
|
||||
// </p>
|
||||
|
||||
{variant === 'default' ? (
|
||||
<>
|
||||
{/* DialogTrigger to open the dialog */}
|
||||
<div>
|
||||
<Dialog open={dialogOpen} onOpenChange={handleDialogClose}>
|
||||
<DialogTrigger asChild>
|
||||
<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]"
|
||||
onClick={handleDialogOpen}
|
||||
disabled={choosePrizeMutation.isLoading}>
|
||||
{choosePrizeMutation.isLoading ? 'Loading...' : 'Выбрать'}
|
||||
</button>
|
||||
</DialogTrigger>
|
||||
// {variant === 'default' ? (
|
||||
// <>
|
||||
// {/* DialogTrigger to open the dialog */}
|
||||
// <div>
|
||||
// <Dialog open={dialogOpen} onOpenChange={handleDialogClose}>
|
||||
// <DialogTrigger asChild>
|
||||
// <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]"
|
||||
// onClick={handleDialogOpen}
|
||||
// disabled={choosePrizeMutation.isLoading}>
|
||||
// {choosePrizeMutation.isLoading ? 'Loading...' : 'Выбрать'}
|
||||
// </button>
|
||||
// </DialogTrigger>
|
||||
|
||||
{/* DialogContent that shows loading or response */}
|
||||
<DialogContent className="bg-lightSurfaceContainer flex flex-col gap-[8px]">
|
||||
<DialogHeader className="flex flex-col gap-[8px]">
|
||||
<DialogTitle>{dialogTitle}</DialogTitle>
|
||||
<DialogDescription>{dialogDescription}</DialogDescription>
|
||||
</DialogHeader>
|
||||
{dialogTitle !== 'Загрузка...' && (
|
||||
<DialogFooter>
|
||||
<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>
|
||||
</DialogClose>
|
||||
</DialogFooter>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</>
|
||||
) : variant === 'disabled' ? (
|
||||
<button
|
||||
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]">
|
||||
Недоступно
|
||||
</button>
|
||||
) : variant === 'selected' ? (
|
||||
<button
|
||||
disabled
|
||||
className="px-[24px] py-[10px] w-fit text-textSmall leading-textSmall -tracking-[-1%] font-medium bg-lightOnSurfaceDisabled text-lightOnSurface rounded-[40px]">
|
||||
Выбрано
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
// {/* DialogContent that shows loading or response */}
|
||||
// <DialogContent className="bg-lightSurfaceContainer flex flex-col gap-[8px]">
|
||||
// <DialogHeader className="flex flex-col gap-[8px]">
|
||||
// <DialogTitle>{dialogTitle}</DialogTitle>
|
||||
// <DialogDescription>{dialogDescription}</DialogDescription>
|
||||
// </DialogHeader>
|
||||
// {dialogTitle !== 'Загрузка...' && (
|
||||
// <DialogFooter>
|
||||
// <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>
|
||||
// </DialogClose>
|
||||
// </DialogFooter>
|
||||
// )}
|
||||
// </DialogContent>
|
||||
// </Dialog>
|
||||
// </div>
|
||||
// </>
|
||||
// ) : variant === 'disabled' ? (
|
||||
// <button
|
||||
// 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]">
|
||||
// Недоступно
|
||||
// </button>
|
||||
// ) : variant === 'selected' ? (
|
||||
// <button
|
||||
// disabled
|
||||
// className="px-[24px] py-[10px] w-fit text-textSmall leading-textSmall -tracking-[-1%] font-medium bg-lightOnSurfaceDisabled text-lightOnSurface rounded-[40px]">
|
||||
// Выбрано
|
||||
// </button>
|
||||
// ) : null}
|
||||
// </div>
|
||||
// </div>
|
||||
// );
|
||||
};
|
||||
|
||||
export default PrizeCard;
|
||||
|
|
|
|||
|
|
@ -1,116 +1,116 @@
|
|||
'use client';
|
||||
// 'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
||||
import { X } from 'lucide-react';
|
||||
// import * as React from 'react';
|
||||
// import * as DialogPrimitive from '@radix-ui/react-dialog';
|
||||
// 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<
|
||||
React.ElementRef<typeof DialogPrimitive.Overlay>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DialogPrimitive.Overlay
|
||||
ref={ref}
|
||||
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',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
|
||||
// const DialogOverlay = React.forwardRef<
|
||||
// React.ElementRef<typeof DialogPrimitive.Overlay>,
|
||||
// React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
|
||||
// >(({ className, ...props }, ref) => (
|
||||
// <DialogPrimitive.Overlay
|
||||
// ref={ref}
|
||||
// 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',
|
||||
// className,
|
||||
// )}
|
||||
// {...props}
|
||||
// />
|
||||
// ));
|
||||
// DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
|
||||
|
||||
const DialogContent = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<DialogPortal>
|
||||
<DialogOverlay />
|
||||
<DialogPrimitive.Content
|
||||
ref={ref}
|
||||
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',
|
||||
className,
|
||||
)}
|
||||
{...props}>
|
||||
{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 ">
|
||||
<svg
|
||||
width="48"
|
||||
height="48"
|
||||
viewBox="0 0 48 48"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<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"
|
||||
fill="#46464F"
|
||||
/>
|
||||
</svg>
|
||||
<span className="sr-only">Close</span>
|
||||
</DialogPrimitive.Close>
|
||||
</DialogPrimitive.Content>
|
||||
</DialogPortal>
|
||||
));
|
||||
DialogContent.displayName = DialogPrimitive.Content.displayName;
|
||||
// const DialogContent = React.forwardRef<
|
||||
// React.ElementRef<typeof DialogPrimitive.Content>,
|
||||
// React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
|
||||
// >(({ className, children, ...props }, ref) => (
|
||||
// <DialogPortal>
|
||||
// <DialogOverlay />
|
||||
// <DialogPrimitive.Content
|
||||
// ref={ref}
|
||||
// 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',
|
||||
// className,
|
||||
// )}
|
||||
// {...props}>
|
||||
// {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 ">
|
||||
// <svg
|
||||
// width="48"
|
||||
// height="48"
|
||||
// viewBox="0 0 48 48"
|
||||
// fill="none"
|
||||
// xmlns="http://www.w3.org/2000/svg">
|
||||
// <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"
|
||||
// fill="#46464F"
|
||||
// />
|
||||
// </svg>
|
||||
// <span className="sr-only">Close</span>
|
||||
// </DialogPrimitive.Close>
|
||||
// </DialogPrimitive.Content>
|
||||
// </DialogPortal>
|
||||
// ));
|
||||
// DialogContent.displayName = DialogPrimitive.Content.displayName;
|
||||
|
||||
const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div className={cn('flex flex-col text-center sm:text-left', className)} {...props} />
|
||||
);
|
||||
DialogHeader.displayName = 'DialogHeader';
|
||||
// const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
// <div className={cn('flex flex-col text-center sm:text-left', className)} {...props} />
|
||||
// );
|
||||
// DialogHeader.displayName = 'DialogHeader';
|
||||
|
||||
const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div
|
||||
className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
DialogFooter.displayName = 'DialogFooter';
|
||||
// const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
// <div
|
||||
// className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
|
||||
// {...props}
|
||||
// />
|
||||
// );
|
||||
// DialogFooter.displayName = 'DialogFooter';
|
||||
|
||||
const DialogTitle = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Title>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DialogPrimitive.Title
|
||||
ref={ref}
|
||||
className={cn('text-lightOnSurface text-heading5 leading-heading5 -tracking-[1%]', className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
DialogTitle.displayName = DialogPrimitive.Title.displayName;
|
||||
// const DialogTitle = React.forwardRef<
|
||||
// React.ElementRef<typeof DialogPrimitive.Title>,
|
||||
// React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
|
||||
// >(({ className, ...props }, ref) => (
|
||||
// <DialogPrimitive.Title
|
||||
// ref={ref}
|
||||
// className={cn('text-lightOnSurface text-heading5 leading-heading5 -tracking-[1%]', className)}
|
||||
// {...props}
|
||||
// />
|
||||
// ));
|
||||
// DialogTitle.displayName = DialogPrimitive.Title.displayName;
|
||||
|
||||
const DialogDescription = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Description>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DialogPrimitive.Description
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'text-lightOnSurfaceVariant text-textSmall leading-textSmall -tracking-[1%]',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
DialogDescription.displayName = DialogPrimitive.Description.displayName;
|
||||
// const DialogDescription = React.forwardRef<
|
||||
// React.ElementRef<typeof DialogPrimitive.Description>,
|
||||
// React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
|
||||
// >(({ className, ...props }, ref) => (
|
||||
// <DialogPrimitive.Description
|
||||
// ref={ref}
|
||||
// className={cn(
|
||||
// 'text-lightOnSurfaceVariant text-textSmall leading-textSmall -tracking-[1%]',
|
||||
// className,
|
||||
// )}
|
||||
// {...props}
|
||||
// />
|
||||
// ));
|
||||
// DialogDescription.displayName = DialogPrimitive.Description.displayName;
|
||||
|
||||
export {
|
||||
Dialog,
|
||||
DialogPortal,
|
||||
DialogOverlay,
|
||||
DialogClose,
|
||||
DialogTrigger,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogFooter,
|
||||
DialogTitle,
|
||||
DialogDescription,
|
||||
};
|
||||
// export {
|
||||
// Dialog,
|
||||
// DialogPortal,
|
||||
// DialogOverlay,
|
||||
// DialogClose,
|
||||
// DialogTrigger,
|
||||
// DialogContent,
|
||||
// DialogHeader,
|
||||
// DialogFooter,
|
||||
// DialogTitle,
|
||||
// DialogDescription,
|
||||
// };
|
||||
|
|
|
|||
Loading…
Reference in New Issue