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

new pages added gifts

This commit is contained in:
Kakabay 2024-10-17 16:03:18 +05:00
parent 54784f0150
commit 0fe1e72e72
6 changed files with 226 additions and 226 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
app/(prizes)/prizes/[user_id]/page.tsx
View File

@ -46,45 +46,45 @@ const PrizesPage = ({ params }: { params: { user_id: string } }) => {
return null; // Return null since the redirect will occur
}
// return (
// <div className="flex flex-col gap-[32px] md:gap-[64px] items-center">
// <header className="flex flex-col gap-[24px]">
// <div className="flex flex-col gap-[8px] max-w-[639px] w-full">
// <h1 className="text-lightOnSurface text-heading1 leading-heading1 md:text-display1 md:leading-display1 tracking-[-1%] text-center font-medium">
// {data.data.title}
// </h1>
// <p className="text-center text-textSmall leading-textSmall md:text-textBase md:leading-textBase tracking-[-1%] text-lightOnSurface">
// Поздравляю с победой в викторине! Вы стали победителем и получаете возможность выбрать
// подарок по своему выбору. Пожалуйста, ознакомьтесь с доступными вариантами подарков и
// сообщите нам ваше предпочтение. С нетерпением ждем вашего выбора, чтобы доставить вам
// заслуженный приз!
// </p>
// </div>
// <p className="text-center text-textXSmall leading-textXSmall md:text-textSmall md:leading-textSmall tracking-[0.4px] md:-tracking-[1%] text-lightOnSurface">
// Есть вопросы? Обратись XYXYXY!
// </p>
// </header>
// <div className="flex flex-col gap-[24px] md:gap-[16px] items-center max-w-[832px] w-full">
// {data.data.gifts &&
// data.data.gifts.map((prize, i) => (
// <PrizeCard
// key={prize.id}
// variant={
// selectedPrize === null
// ? 'default'
// : selectedPrize === prize.id
// ? 'selected'
// : 'disabled'
// }
// setSelectedPrize={setSelectedPrize}
// id={prize.id}
// code={params.user_id}
// {...prize}
// />
// ))}
// </div>
// </div>
// );
return (
<div className="flex flex-col gap-[32px] md:gap-[64px] items-center">
<header className="flex flex-col gap-[24px]">
<div className="flex flex-col gap-[8px] max-w-[639px] w-full">
<h1 className="text-lightOnSurface text-heading1 leading-heading1 md:text-display1 md:leading-display1 tracking-[-1%] text-center font-medium">
{data.data.title}
</h1>
<p className="text-center text-textSmall leading-textSmall md:text-textBase md:leading-textBase tracking-[-1%] text-lightOnSurface">
Поздравляю с победой в викторине! Вы стали победителем и получаете возможность выбрать
подарок по своему выбору. Пожалуйста, ознакомьтесь с доступными вариантами подарков и
сообщите нам ваше предпочтение. С нетерпением ждем вашего выбора, чтобы доставить вам
заслуженный приз!
</p>
</div>
<p className="text-center text-textXSmall leading-textXSmall md:text-textSmall md:leading-textSmall tracking-[0.4px] md:-tracking-[1%] text-lightOnSurface">
Есть вопросы? Обратись XYXYXY!
</p>
</header>
<div className="flex flex-col gap-[24px] md:gap-[16px] items-center max-w-[832px] w-full">
{data.data.gifts &&
data.data.gifts.map((prize, i) => (
<PrizeCard
key={prize.id}
variant={
selectedPrize === null
? 'default'
: selectedPrize === prize.id
? 'selected'
: 'disabled'
}
setSelectedPrize={setSelectedPrize}
id={prize.id}
code={params.user_id}
{...prize}
/>
))}
</div>
</div>
);
};
export default PrizesPage;

14
app/(prizes)/prizes/auth/page.tsx
View File

@ -2,13 +2,13 @@ import SmsForm from '@/components/prizes/SmsForm';
import React from 'react';
const page = () => {
// return (
// <div className="">
// <div className="flex justify-center items-center min-h-[50vh]">
// <SmsForm />
// </div>
// </div>
// );
return (
<div className="">
<div className="flex justify-center items-center min-h-[50vh]">
<SmsForm />
</div>
</div>
);
};
export default page;

4
components/MobileMenu.tsx
View File

@ -167,7 +167,7 @@ const MobileMenu = () => {
}}>
TV market
</Link>
{/* <Link
<Link
href={'/prizes/auth'}
className="block text-2xl text-white transition-all font-roboto font-bold"
style={path.includes('prizes') ? { color: '#FFAB48' } : {}}
@ -176,7 +176,7 @@ const MobileMenu = () => {
onClickCloseBurgerHandler();
}}>
Sowgatlar
</Link> */}
</Link>
</div>
</div>
</li>

4
components/Nav.tsx
View File

@ -140,13 +140,13 @@ const Nav = () => {
onClick={() => setDropDownOpened(false)}>
SMS ulgamy
</Link>
{/* <Link
<Link
href={'/prizes/auth'}
className="block min-w-fit text-lg text-white transition-all font-roboto font-bold"
style={path.includes('/prizes/auth') ? { color: '#FFAB48' } : {}}
onClick={() => setDropDownOpened(false)}>
Sowgatlar
</Link> */}
</Link>
</div>
</div>
</li>

146
components/prizes/PrizeCard.tsx
View File

@ -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;

206
components/ui/dialog.tsx
View File

@ -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,
};