From c2223e8361400f207163ec149e6b0a2116e898b6 Mon Sep 17 00:00:00 2001
From: Kakabay <2kakabayashyrberdyew@gmail.com>
Date: Mon, 14 Oct 2024 19:17:35 +0500
Subject: [PATCH] commit

---
 components/prizes/PrizeCard.tsx | 166 ++++++++++++-------------
 components/ui/dialog.tsx        | 206 ++++++++++++++++----------------
 2 files changed, 186 insertions(+), 186 deletions(-)

diff --git a/components/prizes/PrizeCard.tsx b/components/prizes/PrizeCard.tsx
index 0f093ad..05e8c41 100644
--- a/components/prizes/PrizeCard.tsx
+++ b/components/prizes/PrizeCard.tsx
@@ -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;
diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
index bd4d5aa..a7192a8 100644
--- a/components/ui/dialog.tsx
+++ b/components/ui/dialog.tsx
@@ -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,
+// };