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 {
|
||||
overflow-x: hidden;
|
||||
|
||||
/* min-height: 50vh; */
|
||||
}
|
||||
|
||||
|
|
@ -179,6 +180,9 @@ big {
|
|||
}
|
||||
|
||||
@layer utilities {
|
||||
html {
|
||||
@apply bg-lightBackground;
|
||||
}
|
||||
.input-style {
|
||||
@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',
|
||||
textCaptioninform: '#BCBCD6',
|
||||
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: {
|
||||
aeroport: ['var(--font-aeroport)', ...fontFamily.sans],
|
||||
|
|
@ -57,6 +157,7 @@ export const theme = {
|
|||
form: '0px 4px 8px rgba(0, 0, 0, 0.25)',
|
||||
quizButton: '0px 2px 16px 0px rgba(0, 0, 0, 0.10)',
|
||||
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: {
|
||||
home_custom: '56% 44%',
|
||||
|
|
|
|||
Loading…
Reference in New Issue