prizes form layout ready
This commit is contained in:
Kakabay
parent
6ac386dc69
commit
04fd44bef6
|
|
@ -1,64 +0,0 @@
|
||||||
'use client';
|
|
||||||
|
|
||||||
import { Calendar } from '@/components/ui/calendar';
|
|
||||||
import { clsx } from 'clsx';
|
|
||||||
import { useEffect, useRef, useState } from 'react';
|
|
||||||
|
|
||||||
const page = () => {
|
|
||||||
const [date, setDate] = useState<Date>();
|
|
||||||
|
|
||||||
const calendarRef = useRef<HTMLDivElement | null>(null);
|
|
||||||
|
|
||||||
const mount = useRef(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (mount.current) {
|
|
||||||
if (calendarRef.current) {
|
|
||||||
const calendarFooter = document.createElement('div');
|
|
||||||
calendarFooter.classList.add(
|
|
||||||
'calendar-footer',
|
|
||||||
'flex',
|
|
||||||
'justify-between',
|
|
||||||
'items-center',
|
|
||||||
'mt-6',
|
|
||||||
'px-3',
|
|
||||||
);
|
|
||||||
|
|
||||||
const calendar = document.querySelector('.calendar');
|
|
||||||
|
|
||||||
const btn1 = document.createElement('div');
|
|
||||||
btn1.classList.add('btn1', 'text-textLight', 'cursor-pointer', 'text-[14px]');
|
|
||||||
btn1.textContent = 'Отменить';
|
|
||||||
|
|
||||||
const btn2 = document.createElement('button');
|
|
||||||
btn2.classList.add('btn2');
|
|
||||||
btn2.textContent = 'Выбрать';
|
|
||||||
|
|
||||||
calendarFooter.appendChild(btn1);
|
|
||||||
calendarFooter.appendChild(btn2);
|
|
||||||
calendar?.appendChild(calendarFooter);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
mount.current = true;
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<section className="container">
|
|
||||||
<div className="" ref={calendarRef}>
|
|
||||||
<Calendar
|
|
||||||
mode="single"
|
|
||||||
selected={date}
|
|
||||||
onSelect={setDate}
|
|
||||||
initialFocus
|
|
||||||
// onDayClick={() => setActiveDay(true)}
|
|
||||||
className={clsx(
|
|
||||||
'my-20 calendar bg-white w-fit rounded-[8px] shadow-[0_2px_32px_rgba(0,0,0,0.3)] transition-all',
|
|
||||||
// { 'day-styles': activeDay },
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default page;
|
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
'use client';
|
||||||
|
import Footer from '@/components/Footer';
|
||||||
|
import MobileMenu from '@/components/MobileMenu';
|
||||||
|
import Nav from '@/components/Nav';
|
||||||
|
import MainProvider from '@/providers/MainProvider';
|
||||||
|
import React, { PropsWithChildren } from 'react';
|
||||||
|
|
||||||
|
const layout = ({ children }: PropsWithChildren) => {
|
||||||
|
return (
|
||||||
|
<MainProvider>
|
||||||
|
<div className="dark:bg-black transition-all h-full">
|
||||||
|
<h1 className="hidden">Turkmen TV</h1>
|
||||||
|
<Nav />
|
||||||
|
<main>{children}</main>
|
||||||
|
<Footer />
|
||||||
|
<MobileMenu />
|
||||||
|
</div>
|
||||||
|
</MainProvider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default layout;
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
import SmsForm from '@/components/prizes/SmsForm';
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
const page = () => {
|
||||||
|
return (
|
||||||
|
<div className="container">
|
||||||
|
<div className="mt-[64px] mb-[128px] w-full">
|
||||||
|
<div className="flex justify-center items-center min-h-[50vh]">
|
||||||
|
<SmsForm />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default page;
|
||||||
|
|
@ -80,6 +80,7 @@
|
||||||
|
|
||||||
html {
|
html {
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
|
|
||||||
/* min-height: 50vh; */
|
/* min-height: 50vh; */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -179,6 +180,9 @@ big {
|
||||||
}
|
}
|
||||||
|
|
||||||
@layer utilities {
|
@layer utilities {
|
||||||
|
html {
|
||||||
|
@apply bg-lightBackground;
|
||||||
|
}
|
||||||
.input-style {
|
.input-style {
|
||||||
@apply bg-[#E6E6FA] rounded-xl py-3 px-4 placeholder:text-[#BCBCD6] outline-none;
|
@apply bg-[#E6E6FA] rounded-xl py-3 px-4 placeholder:text-[#BCBCD6] outline-none;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
const SmsForm = () => {
|
||||||
|
return (
|
||||||
|
<form className="bg-lightSurface rounded-[24px] p-[40px] w-fit flex flex-col gap-[24px] shadow-lightBoxShadow1">
|
||||||
|
<h1 className="text-display3 font-[500] leading-display3 ">Вход в «подарошную»</h1>
|
||||||
|
<div className="flex flex-col gap-[8px]">
|
||||||
|
<h2 className="text-textBasebase font-medium leading-textBase">Промокод</h2>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="px-[16px] py-[12px] bg-lightPrimaryContainer rounded-[12px] outline-none text-lightOnSurfaceVariant text-textSmall leading-textSmall"
|
||||||
|
placeholder="Введите свой промокод"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<button className="cursor-pointer text-textLarge leading-textLarge py-[12px] w-full flex justify-center items-center rounded-[12px] bg-lightPrimary font-medium text-lightOnPrimary">
|
||||||
|
Войти
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SmsForm;
|
||||||
|
|
@ -42,6 +42,106 @@ export const theme = {
|
||||||
fillFormRest: '#E6E6FA',
|
fillFormRest: '#E6E6FA',
|
||||||
textCaptioninform: '#BCBCD6',
|
textCaptioninform: '#BCBCD6',
|
||||||
fillLinkRest: '#878799',
|
fillLinkRest: '#878799',
|
||||||
|
|
||||||
|
// UPDATED UI KIT =====================================================================================================
|
||||||
|
////////////////////////////////// Light theme
|
||||||
|
|
||||||
|
// Background
|
||||||
|
lightBackground: '#FCF8FF',
|
||||||
|
// Primary
|
||||||
|
lightPrimary: '#575992',
|
||||||
|
lightOnPrimary: '#FFFFFF',
|
||||||
|
lightPrimaryContainer: '#E1E0FF',
|
||||||
|
lightOnPrimaryContainer: '#12144B',
|
||||||
|
// Secondary
|
||||||
|
lightSecondary: '#5D5D72',
|
||||||
|
lightOnSecondary: '#FFFFFF',
|
||||||
|
lightSecondaryContainer: '#E2E0F9',
|
||||||
|
lightOnSecondaryContainer: '#191A2C',
|
||||||
|
// Tertiary
|
||||||
|
lightTertiary: '#79536A',
|
||||||
|
lightOnTertiary: '#FFFFFF',
|
||||||
|
lightTertiaryContainer: '#FFD8EC',
|
||||||
|
lightOnTertiaryContainer: '#2E1125',
|
||||||
|
// Error
|
||||||
|
lightError: '#BA1A1A',
|
||||||
|
lightOnError: '#FFFFFF',
|
||||||
|
lightErrorContainer: '#FFDAD6',
|
||||||
|
lightOnErrorContainer: '#410002',
|
||||||
|
// Surface
|
||||||
|
lightSurface: '#FCF8FF',
|
||||||
|
lightOnSurface: '#1B1B21',
|
||||||
|
lightSurfaceVariant: '#E4E1EC',
|
||||||
|
lightOnSurfaceVariant: '#46464F',
|
||||||
|
lightSurfaceContainerLowest: '#FFFFFF',
|
||||||
|
lightSurfaceContainerLow: '#F6F2FA',
|
||||||
|
lightSurfaceContainer: '#F0ECF4',
|
||||||
|
lightSurfaceContainerHigh: '#EAE7EF',
|
||||||
|
lightSurfaceContainerHigher: '#E4E1E9',
|
||||||
|
// Outline
|
||||||
|
lightOutline: '#777680',
|
||||||
|
lightOutlineVariant: '#C7C5D0',
|
||||||
|
},
|
||||||
|
fontSize: {
|
||||||
|
// Display
|
||||||
|
display1: '56px',
|
||||||
|
display2: '48px',
|
||||||
|
display3: '44px',
|
||||||
|
|
||||||
|
// Heading
|
||||||
|
heading1: '36px',
|
||||||
|
heading2: '32px',
|
||||||
|
heading3: '28px',
|
||||||
|
|
||||||
|
// Text
|
||||||
|
textLarge: '18px',
|
||||||
|
textBase: '16px',
|
||||||
|
textSmall: '14px',
|
||||||
|
textXSmall: '12px',
|
||||||
|
},
|
||||||
|
lineHeight: {
|
||||||
|
// Display 1
|
||||||
|
display1: '56px',
|
||||||
|
|
||||||
|
// Display 2
|
||||||
|
display2: '56px',
|
||||||
|
|
||||||
|
// Display 3
|
||||||
|
display3: '56px',
|
||||||
|
|
||||||
|
// Heading 1
|
||||||
|
heading1: '56px',
|
||||||
|
|
||||||
|
// Heading 2
|
||||||
|
heading2: '56px',
|
||||||
|
|
||||||
|
// Heading 3
|
||||||
|
heading3: '56px',
|
||||||
|
|
||||||
|
// Heading 4
|
||||||
|
heading4: '56px',
|
||||||
|
|
||||||
|
// Heading 5
|
||||||
|
heading5: '56px',
|
||||||
|
|
||||||
|
// Heading 6
|
||||||
|
heading6: '56px',
|
||||||
|
|
||||||
|
// Text large
|
||||||
|
textLarge: '27px',
|
||||||
|
|
||||||
|
// Text base
|
||||||
|
textBase: '24px',
|
||||||
|
|
||||||
|
// Text small
|
||||||
|
textSmall: '20px',
|
||||||
|
|
||||||
|
// Text xSmall
|
||||||
|
textXSmall: '56px',
|
||||||
|
},
|
||||||
|
dropShadow: {
|
||||||
|
lightDropShadow1: ['0 1px 3px rgba(0, 0, 0, 0.15)', '0 1px 3px rgba(0, 0, 0, 0.15)'],
|
||||||
|
'4xl': ['0 35px 35px rgba(0, 0, 0, 0.25)', '0 45px 65px rgba(0, 0, 0, 0.15)'],
|
||||||
},
|
},
|
||||||
fontFamily: {
|
fontFamily: {
|
||||||
aeroport: ['var(--font-aeroport)', ...fontFamily.sans],
|
aeroport: ['var(--font-aeroport)', ...fontFamily.sans],
|
||||||
|
|
@ -57,6 +157,7 @@ export const theme = {
|
||||||
form: '0px 4px 8px rgba(0, 0, 0, 0.25)',
|
form: '0px 4px 8px rgba(0, 0, 0, 0.25)',
|
||||||
quizButton: '0px 2px 16px 0px rgba(0, 0, 0, 0.10)',
|
quizButton: '0px 2px 16px 0px rgba(0, 0, 0, 0.10)',
|
||||||
tableShadow: '0px 2px 16px rgba(0, 0, 0, 0.1)',
|
tableShadow: '0px 2px 16px rgba(0, 0, 0, 0.1)',
|
||||||
|
lightBoxShadow1: ['0 1px 3px 1px rgba(0, 0, 0, 0.3)', '0 1px 3px 1px rgba(0, 0, 0, 0.15)'],
|
||||||
},
|
},
|
||||||
gridTemplateColumns: {
|
gridTemplateColumns: {
|
||||||
home_custom: '56% 44%',
|
home_custom: '56% 44%',
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue