From fc5cc47796b4acaae104c7f8d670fb1b0dfa1b54 Mon Sep 17 00:00:00 2001 From: Bochkovskyi Date: Tue, 30 Jan 2024 20:38:18 +0200 Subject: [PATCH 01/24] remove image card component from auth folder --- src/components/pages/auth/image-card.tsx | 21 --------------------- 1 file changed, 21 deletions(-) delete mode 100644 src/components/pages/auth/image-card.tsx diff --git a/src/components/pages/auth/image-card.tsx b/src/components/pages/auth/image-card.tsx deleted file mode 100644 index 05e1269..0000000 --- a/src/components/pages/auth/image-card.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { classnames } from '@/utils' -import { FC, ReactNode } from 'react' - -type ImageCardProps = { - children: ReactNode - className?: string -} - -const ImageCard: FC = ({ children, className }) => { - return ( -
- {children} -
- ) -} -export default ImageCard From 19a1ce8a0c042b791cb0e306a2235ea8bcbbb8c9 Mon Sep 17 00:00:00 2001 From: Bochkovskyi Date: Tue, 30 Jan 2024 20:38:43 +0200 Subject: [PATCH 02/24] move image card component to the ui folder --- src/components/ui/image-card.tsx | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 src/components/ui/image-card.tsx diff --git a/src/components/ui/image-card.tsx b/src/components/ui/image-card.tsx new file mode 100644 index 0000000..a59a9be --- /dev/null +++ b/src/components/ui/image-card.tsx @@ -0,0 +1,21 @@ +import { cn } from '@/lib/utils' +import { FC, ReactNode } from 'react' + +type ImageCardProps = { + children: ReactNode + className?: string +} + +const ImageCard: FC = ({ children, className }) => { + return ( +
+ {children} +
+ ) +} +export default ImageCard From b287e9342661ab8dbbd9a87a3ee9482e2768aa45 Mon Sep 17 00:00:00 2001 From: Bochkovskyi Date: Tue, 30 Jan 2024 20:44:51 +0200 Subject: [PATCH 03/24] replace classnames with cn utility --- src/components/pages/auth/form-auth.tsx | 4 ++-- src/components/pages/profile/form-profile.tsx | 4 ++-- src/components/ui/content.tsx | 8 ++------ 3 files changed, 6 insertions(+), 10 deletions(-) diff --git a/src/components/pages/auth/form-auth.tsx b/src/components/pages/auth/form-auth.tsx index 946df23..23a49a7 100644 --- a/src/components/pages/auth/form-auth.tsx +++ b/src/components/pages/auth/form-auth.tsx @@ -13,7 +13,7 @@ import { } from '@/components/ui/form' import { Input } from '@/components/ui/input' import { LENGTH_OTP } from '@/constants' -import { classnames } from '@/utils' +import { cn } from '@/lib/utils' import { zodResolver } from '@hookform/resolvers/zod' import { FC, useState } from 'react' import { useForm } from 'react-hook-form' @@ -47,7 +47,7 @@ const AuthForm: FC = ({ className }) => { return (
= ({ className }) => { return ( = ({ children, className }) => { - return ( -
- {children} -
- ) + return
{children}
} export default Content From f136df977d6ee20c6b9a41228eb377a12cebed44 Mon Sep 17 00:00:00 2001 From: Bochkovskyi Date: Tue, 30 Jan 2024 20:46:55 +0200 Subject: [PATCH 04/24] update ImageCard component imports --- src/app/auth/page.tsx | 2 +- src/app/profile/page.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/auth/page.tsx b/src/app/auth/page.tsx index ad2fb6a..e0a4dce 100644 --- a/src/app/auth/page.tsx +++ b/src/app/auth/page.tsx @@ -1,7 +1,7 @@ import FormAuth from '@/components/pages/auth/form-auth' -import ImageCard from '@/components/pages/auth/image-card' import Content from '@/components/ui/content' import { Icons } from '@/components/ui/icons' +import ImageCard from '@/components/ui/image-card' import { ThemeToggler } from '@/components/ui/theme-toggler' export default function Auth() { diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx index fdeb527..3235388 100644 --- a/src/app/profile/page.tsx +++ b/src/app/profile/page.tsx @@ -1,7 +1,7 @@ -import ImageCard from '@/components/pages/auth/image-card' import FileInput from '@/components/pages/profile/file-input' import FormProfile from '@/components/pages/profile/form-profile' import Content from '@/components/ui/content' +import ImageCard from '@/components/ui/image-card' import { ThemeToggler } from '@/components/ui/theme-toggler' export default function Profile() { From 53dc3cc0a7eef208ebb703c06a4d3a4f1f8593ea Mon Sep 17 00:00:00 2001 From: Bochkovskyi Date: Tue, 30 Jan 2024 20:51:07 +0200 Subject: [PATCH 05/24] remove OtpInput component --- src/components/pages/auth/form-auth.tsx | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/src/components/pages/auth/form-auth.tsx b/src/components/pages/auth/form-auth.tsx index 23a49a7..57fee4d 100644 --- a/src/components/pages/auth/form-auth.tsx +++ b/src/components/pages/auth/form-auth.tsx @@ -1,6 +1,5 @@ 'use client' -import OtpInput from '@/components/pages/auth/otp-input' import { Button } from '@/components/ui/button' import { Checkbox } from '@/components/ui/checkbox' import { @@ -12,10 +11,9 @@ import { FormMessage, } from '@/components/ui/form' import { Input } from '@/components/ui/input' -import { LENGTH_OTP } from '@/constants' import { cn } from '@/lib/utils' import { zodResolver } from '@hookform/resolvers/zod' -import { FC, useState } from 'react' +import { FC } from 'react' import { useForm } from 'react-hook-form' import * as z from 'zod' @@ -27,8 +25,6 @@ const formSchema = z.object({ }) const AuthForm: FC = ({ className }) => { - const [otp, setOtp] = useState('') - const form = useForm>({ defaultValues: { agreement: false, @@ -37,10 +33,8 @@ const AuthForm: FC = ({ className }) => { resolver: zodResolver(formSchema), }) - const otpChange = (value: string) => setOtp(value.trim()) - function onSubmit(values: z.infer) { - alert(JSON.stringify({ ...values, otp })) + alert(JSON.stringify(values)) console.log(values) } @@ -65,7 +59,6 @@ const AuthForm: FC = ({ className }) => { )} /> - Date: Wed, 31 Jan 2024 15:42:20 +0200 Subject: [PATCH 06/24] update theme_icon size styles --- src/components/ui/button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx index d23c48e..8a6d8cd 100644 --- a/src/components/ui/button.tsx +++ b/src/components/ui/button.tsx @@ -12,7 +12,7 @@ const buttonVariants = cva('overflow-hidden inline-block text-center', { size: { default: 'py-3.5 px-5 rounded-2xl', icon: 'py-1 px-2 rounded-lg text-xs', - theme_icon: 'h-10 w-10', + theme_icon: 'p-[0.1875rem] rounded-lg', }, variant: { default: From 1b20e825e90cefc1dd8b900c4f793ffc43af9a55 Mon Sep 17 00:00:00 2001 From: Bochkovskyi Date: Wed, 31 Jan 2024 15:42:45 +0200 Subject: [PATCH 07/24] add new icons --- src/components/ui/icons.tsx | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/src/components/ui/icons.tsx b/src/components/ui/icons.tsx index 4d546d3..a25f1bc 100644 --- a/src/components/ui/icons.tsx +++ b/src/components/ui/icons.tsx @@ -82,6 +82,24 @@ export const Icons = { /> ), + moon: ({ size, ...props }: IconProps) => { + const dimension = getIconDimension(size) + return ( + + + + ) + }, photo_profile: (props: IconProps) => ( ), + sun: ({ size, ...props }: IconProps) => { + const dimension = getIconDimension(size) + return ( + + + + ) + }, } From c3a92592a0b9976466e382248563ae70466b1eff Mon Sep 17 00:00:00 2001 From: Bochkovskyi Date: Wed, 31 Jan 2024 15:44:00 +0200 Subject: [PATCH 08/24] update theme toggler icons --- src/components/ui/theme-toggler.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/ui/theme-toggler.tsx b/src/components/ui/theme-toggler.tsx index 269ffcd..130e41b 100644 --- a/src/components/ui/theme-toggler.tsx +++ b/src/components/ui/theme-toggler.tsx @@ -7,7 +7,7 @@ import { DropdownMenuItem, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu' -import { Moon, Sun } from 'lucide-react' +import { Icons } from '@/components/ui/icons' import { useTheme } from 'next-themes' import * as React from 'react' @@ -22,8 +22,8 @@ export function ThemeToggler() { From d830276851384dc4bb0ccd1eeb6bcb564cc9d6bc Mon Sep 17 00:00:00 2001 From: Bochkovskyi Date: Wed, 31 Jan 2024 15:44:25 +0200 Subject: [PATCH 09/24] update styles --- src/components/pages/auth/otp-input.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/pages/auth/otp-input.tsx b/src/components/pages/auth/otp-input.tsx index 2190309..ad4f76f 100644 --- a/src/components/pages/auth/otp-input.tsx +++ b/src/components/pages/auth/otp-input.tsx @@ -142,7 +142,7 @@ const OtpInput: FC = ({ Date: Wed, 31 Jan 2024 15:46:08 +0200 Subject: [PATCH 10/24] move otp input component to the verification folder --- src/components/pages/{auth => verification}/otp-input.tsx | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/components/pages/{auth => verification}/otp-input.tsx (100%) diff --git a/src/components/pages/auth/otp-input.tsx b/src/components/pages/verification/otp-input.tsx similarity index 100% rename from src/components/pages/auth/otp-input.tsx rename to src/components/pages/verification/otp-input.tsx From ce06ad8bf406c0155ac34ea3433b491fab0724d5 Mon Sep 17 00:00:00 2001 From: Bochkovskyi Date: Wed, 31 Jan 2024 16:04:16 +0200 Subject: [PATCH 11/24] update outline variant styles --- src/components/ui/button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx index 8a6d8cd..ddbdef0 100644 --- a/src/components/ui/button.tsx +++ b/src/components/ui/button.tsx @@ -21,7 +21,7 @@ const buttonVariants = cva('overflow-hidden inline-block text-center', { 'text-base-gray-4 bg-base-gray-3 dark:text-base-gray-8 dark:bg-base-gray-7', icon: 'text-base-gray-8 bg-base-gray-2', outline: - 'border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50', + 'border border-base-gray-3 text-base-gray-9 dark:border-base-gray-4 dark:text-base-gray-4 hover:bg-base-gray-1 dark:hover:bg-base-gray-9', }, }, }) From a5c90630fabce0d39c335b5cf018788d7674820f Mon Sep 17 00:00:00 2001 From: Bochkovskyi Date: Wed, 31 Jan 2024 16:04:37 +0200 Subject: [PATCH 12/24] update icons styles --- src/components/ui/theme-toggler.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ui/theme-toggler.tsx b/src/components/ui/theme-toggler.tsx index 130e41b..6ca10f8 100644 --- a/src/components/ui/theme-toggler.tsx +++ b/src/components/ui/theme-toggler.tsx @@ -22,8 +22,8 @@ export function ThemeToggler() { From 79c28faf3806dcdaf5279f2386ae95e196bbaff8 Mon Sep 17 00:00:00 2001 From: Bochkovskyi Date: Wed, 31 Jan 2024 16:16:23 +0200 Subject: [PATCH 13/24] add new word --- project-words.txt | 1 + 1 file changed, 1 insertion(+) diff --git a/project-words.txt b/project-words.txt index dcfb3c9..4f6896a 100644 --- a/project-words.txt +++ b/project-words.txt @@ -11,3 +11,4 @@ linejoin mingcute shadcn clsx +didn From d704d7a1acdf0ddbdbe09d5729177ddef903368d Mon Sep 17 00:00:00 2001 From: Bochkovskyi Date: Wed, 31 Jan 2024 16:16:58 +0200 Subject: [PATCH 14/24] add ControlOtp component --- .../pages/verification/control-otp.tsx | 69 +++++++++++++++++++ 1 file changed, 69 insertions(+) create mode 100644 src/components/pages/verification/control-otp.tsx diff --git a/src/components/pages/verification/control-otp.tsx b/src/components/pages/verification/control-otp.tsx new file mode 100644 index 0000000..04fbd53 --- /dev/null +++ b/src/components/pages/verification/control-otp.tsx @@ -0,0 +1,69 @@ +'use client' + +import OtpInput from '@/components/pages/verification/otp-input' +import { Button } from '@/components/ui/button' +import { LENGTH_OTP } from '@/constants' +import { cn } from '@/lib/utils' +import { FC, useState } from 'react' + +type ControlOtpProps = { className?: string } + +const MOCK_OTP = '12345' // TODO: remove + +const ControlOtp: FC = ({ className }) => { + const [otp, setOtp] = useState('') + const [otpIsInvalid, setOtpIsInvalid] = useState(false) + + const otpIncomplete = otp.length < LENGTH_OTP + + const otpChange = (value: string) => { + if (otpIsInvalid) { + setOtpIsInvalid(false) + } + setOtp(value.trim()) + } + + const validateOtp = () => { + if (otp !== MOCK_OTP) { + setOtpIsInvalid(true) + return + } + + // TODO: send otp to server + } + + return ( +
+

+ {otpIsInvalid + ? 'The code is not correct. Try again' + : 'Paste dynamically generated code'} +

+ + + +
+ ) +} + +export default ControlOtp From e0a2aca8b80b8e68f517b5bef6288a6d539227e6 Mon Sep 17 00:00:00 2001 From: Bochkovskyi Date: Wed, 31 Jan 2024 16:17:15 +0200 Subject: [PATCH 15/24] add verification page --- src/app/verification/page.tsx | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 src/app/verification/page.tsx diff --git a/src/app/verification/page.tsx b/src/app/verification/page.tsx new file mode 100644 index 0000000..ab27b2b --- /dev/null +++ b/src/app/verification/page.tsx @@ -0,0 +1,26 @@ +import ControlOtp from '@/components/pages/verification/control-otp' +import Content from '@/components/ui/content' +import { Icons } from '@/components/ui/icons' +import ImageCard from '@/components/ui/image-card' +import { ThemeToggler } from '@/components/ui/theme-toggler' + +export default function Verification() { + return ( +
+ +
+ + + +
+
+

Check your Email

+ +
+ +
+
+
+
+ ) +} From 941b66cf1ae84bfa8ab1ea124c312477962cf719 Mon Sep 17 00:00:00 2001 From: Bochkovskyi Date: Wed, 31 Jan 2024 18:12:45 +0200 Subject: [PATCH 16/24] remove theme_icon size, update icon size --- src/components/ui/button.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx index ddbdef0..fe9b006 100644 --- a/src/components/ui/button.tsx +++ b/src/components/ui/button.tsx @@ -11,8 +11,7 @@ const buttonVariants = cva('overflow-hidden inline-block text-center', { variants: { size: { default: 'py-3.5 px-5 rounded-2xl', - icon: 'py-1 px-2 rounded-lg text-xs', - theme_icon: 'p-[0.1875rem] rounded-lg', + icon: 'p-[0.1875rem] rounded-lg text-xs', }, variant: { default: From 81f48d9e08fee0cc3489a047188792225742e22a Mon Sep 17 00:00:00 2001 From: Bochkovskyi Date: Wed, 31 Jan 2024 18:13:18 +0200 Subject: [PATCH 17/24] update ThemeToggler button size --- src/components/ui/theme-toggler.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ui/theme-toggler.tsx b/src/components/ui/theme-toggler.tsx index 6ca10f8..33d3885 100644 --- a/src/components/ui/theme-toggler.tsx +++ b/src/components/ui/theme-toggler.tsx @@ -21,7 +21,7 @@ export function ThemeToggler() { return ( -