From 04fd44bef68711f328f607fd636788cc328737a3 Mon Sep 17 00:00:00 2001 From: Kakabay <2kakabayashyrberdyew@gmail.com> Date: Fri, 4 Oct 2024 17:08:45 +0500 Subject: [PATCH] prizes form layout ready --- app/(main)/test/page.tsx | 64 ----------- .../vote/{ => active}/[vote_id]/page.tsx | 0 app/(prizes)/layout.tsx | 22 ++++ app/(prizes)/prizes/auth/page.tsx | 16 +++ app/globals.css | 4 + components/prizes/SmsForm.tsx | 22 ++++ tailwind.config.js | 101 ++++++++++++++++++ 7 files changed, 165 insertions(+), 64 deletions(-) delete mode 100644 app/(main)/test/page.tsx rename app/(main)/vote/{ => active}/[vote_id]/page.tsx (100%) create mode 100644 app/(prizes)/layout.tsx create mode 100644 app/(prizes)/prizes/auth/page.tsx create mode 100644 components/prizes/SmsForm.tsx diff --git a/app/(main)/test/page.tsx b/app/(main)/test/page.tsx deleted file mode 100644 index b498d71..0000000 --- a/app/(main)/test/page.tsx +++ /dev/null @@ -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(); - - const calendarRef = useRef(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 ( -
-
- 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 }, - )} - /> -
-
- ); -}; - -export default page; diff --git a/app/(main)/vote/[vote_id]/page.tsx b/app/(main)/vote/active/[vote_id]/page.tsx similarity index 100% rename from app/(main)/vote/[vote_id]/page.tsx rename to app/(main)/vote/active/[vote_id]/page.tsx diff --git a/app/(prizes)/layout.tsx b/app/(prizes)/layout.tsx new file mode 100644 index 0000000..b56b388 --- /dev/null +++ b/app/(prizes)/layout.tsx @@ -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 ( + +
+

Turkmen TV

+
+ + ); +}; + +export default layout; diff --git a/app/(prizes)/prizes/auth/page.tsx b/app/(prizes)/prizes/auth/page.tsx new file mode 100644 index 0000000..910125e --- /dev/null +++ b/app/(prizes)/prizes/auth/page.tsx @@ -0,0 +1,16 @@ +import SmsForm from '@/components/prizes/SmsForm'; +import React from 'react'; + +const page = () => { + return ( +
+
+
+ +
+
+
+ ); +}; + +export default page; diff --git a/app/globals.css b/app/globals.css index 64e4faf..71b4a91 100644 --- a/app/globals.css +++ b/app/globals.css @@ -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; } diff --git a/components/prizes/SmsForm.tsx b/components/prizes/SmsForm.tsx new file mode 100644 index 0000000..8781838 --- /dev/null +++ b/components/prizes/SmsForm.tsx @@ -0,0 +1,22 @@ +import React from 'react'; + +const SmsForm = () => { + return ( +
+

Вход в «подарошную»

+
+

Промокод

+ +
+ +
+ ); +}; + +export default SmsForm; diff --git a/tailwind.config.js b/tailwind.config.js index 24533f3..1c9bb7f 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -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%',