From 59fc7f8d7339aa2dc394f0753ddd027e171d2a94 Mon Sep 17 00:00:00 2001 From: Melnyk Mykhailo Date: Sun, 28 Jan 2024 11:35:33 +0200 Subject: [PATCH 01/19] fix theme-toggler arrow functions --- src/components/ui/theme-toggler.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/components/ui/theme-toggler.tsx b/src/components/ui/theme-toggler.tsx index 86340d4..ab6ec81 100644 --- a/src/components/ui/theme-toggler.tsx +++ b/src/components/ui/theme-toggler.tsx @@ -28,11 +28,9 @@ export function ThemeToggler() { - setLightTheme}>Light - setDarkTheme}>Dark - setSystemTheme}> - System - + Light + Dark + System ) From 12b82daf5239d018d4914d73366d5600e5abefd7 Mon Sep 17 00:00:00 2001 From: Melnyk Mykhailo Date: Sun, 28 Jan 2024 15:29:29 +0200 Subject: [PATCH 02/19] fix form-auth card paddings --- src/app/auth/page.tsx | 2 +- src/components/pages/auth/image-card.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/auth/page.tsx b/src/app/auth/page.tsx index 4052d90..8b2c8a2 100644 --- a/src/app/auth/page.tsx +++ b/src/app/auth/page.tsx @@ -9,7 +9,7 @@ export default function Auth() {
- +
diff --git a/src/components/pages/auth/image-card.tsx b/src/components/pages/auth/image-card.tsx index 839a019..05e1269 100644 --- a/src/components/pages/auth/image-card.tsx +++ b/src/components/pages/auth/image-card.tsx @@ -10,7 +10,7 @@ const ImageCard: FC = ({ children, className }) => { return (
From acff2432b02bd7f2e231c778cc2d15cbb5e58732 Mon Sep 17 00:00:00 2001 From: Melnyk Mykhailo Date: Sun, 28 Jan 2024 15:31:34 +0200 Subject: [PATCH 03/19] add photo_profile and mingcute_camera icons --- project-words.txt | 1 + src/components/ui/icons.tsx | 85 +++++++++++++++++++++++++++++++++++++ 2 files changed, 86 insertions(+) diff --git a/project-words.txt b/project-words.txt index 5697b73..bade79d 100644 --- a/project-words.txt +++ b/project-words.txt @@ -8,3 +8,4 @@ Roboto subheadline linecap linejoin +mingcute diff --git a/src/components/ui/icons.tsx b/src/components/ui/icons.tsx index dd51db1..2e76461 100644 --- a/src/components/ui/icons.tsx +++ b/src/components/ui/icons.tsx @@ -44,4 +44,89 @@ export const Icons = { /> ), + mingcute_camera: (props: IconProps) => ( + + + + + + ), + photo_profile: (props: IconProps) => ( + + + + + + + + + + + + + + + + + + + + + + + + ), } From ffbc8e131e7c5f2d58d1059ffa273ac9dd93a734 Mon Sep 17 00:00:00 2001 From: Melnyk Mykhailo Date: Sun, 28 Jan 2024 15:32:36 +0200 Subject: [PATCH 04/19] add base profile login page and its file-input component --- src/app/profile/page.tsx | 23 +++++++ src/components/pages/profile/file-input.tsx | 73 +++++++++++++++++++++ 2 files changed, 96 insertions(+) create mode 100644 src/app/profile/page.tsx create mode 100644 src/components/pages/profile/file-input.tsx diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx new file mode 100644 index 0000000..f81bec5 --- /dev/null +++ b/src/app/profile/page.tsx @@ -0,0 +1,23 @@ +import FormAuth from '@/components/pages/auth/form-auth' +import FileInput from '@/components/pages/profile/file-input' +import Content from '@/components/ui/content' +import { ThemeToggler } from '@/components/ui/theme-toggler' + +export default function Profile() { + return ( +
+ +
+ +
+
+

Authentication

+ +
+ +
+
+ +
+ ) +} diff --git a/src/components/pages/profile/file-input.tsx b/src/components/pages/profile/file-input.tsx new file mode 100644 index 0000000..99d878c --- /dev/null +++ b/src/components/pages/profile/file-input.tsx @@ -0,0 +1,73 @@ +'use client' + +import ImageCard from '@/components/pages/auth/image-card' +import { Icons } from '@/components/ui/icons' +import { classnames } from '@/utils' +import { FC, FormEvent, SyntheticEvent, useRef, useState } from 'react' + +type FileInputProps = { className?: string } + +const FileInput: FC = ({ className }) => { + const fileInputRef = useRef(null) + + const [image, setImage] = useState() + + const [preview, setPreview] = useState(null) + + function handleSelectFile() { + alert('click!') + fileInputRef.current?.click() + } + + function handleImageChange(event: FormEvent) { + const target = event.target as HTMLElement & { + files: FileList + } + console.log(target.files) + setImage(target.files[0]) + + // + + const fileReader = new FileReader() + + fileReader.onprogress = (progress) => { + console.log('progress', progress) + } + + fileReader.onload = () => { + setPreview(fileReader.result) + } + + fileReader.readAsDataURL(target.files[0]) + } + + return ( + + ) +} + +export default FileInput From 12e898c535c3eb33956217f8565f29b2d7f85e24 Mon Sep 17 00:00:00 2001 From: Melnyk Mykhailo Date: Sun, 28 Jan 2024 22:24:33 +0200 Subject: [PATCH 05/19] bug do not work drag and drop --- src/components/pages/profile/file-input.tsx | 142 ++++++++++++++------ 1 file changed, 104 insertions(+), 38 deletions(-) diff --git a/src/components/pages/profile/file-input.tsx b/src/components/pages/profile/file-input.tsx index 99d878c..af08646 100644 --- a/src/components/pages/profile/file-input.tsx +++ b/src/components/pages/profile/file-input.tsx @@ -3,70 +3,136 @@ import ImageCard from '@/components/pages/auth/image-card' import { Icons } from '@/components/ui/icons' import { classnames } from '@/utils' -import { FC, FormEvent, SyntheticEvent, useRef, useState } from 'react' +import { FC, FormEvent, useRef, useState } from 'react' -type FileInputProps = { className?: string } +type FileInputProps = { + className?: string +} const FileInput: FC = ({ className }) => { const fileInputRef = useRef(null) const [image, setImage] = useState() - const [preview, setPreview] = useState(null) + const [preview, setPreview] = useState() + + const [isDragging, setIsDragging] = useState(false) + + function clearSelectFile() { + setImage(undefined) + setPreview(undefined) + } function handleSelectFile() { - alert('click!') fileInputRef.current?.click() } - function handleImageChange(event: FormEvent) { - const target = event.target as HTMLElement & { - files: FileList - } - console.log(target.files) - setImage(target.files[0]) - - // + const handleImageLoad = (file: File) => { + setImage(file) const fileReader = new FileReader() + fileReader.readAsDataURL(file) + fileReader.onprogress = (progress) => { console.log('progress', progress) } fileReader.onload = () => { - setPreview(fileReader.result) + setPreview(fileReader.result as string) + } + } + + function handleImageChange(event: FormEvent) { + const target = event.target as HTMLElement & { + files: FileList + } + + console.log(event.target) + + if (target.files.length > 0) { + handleImageLoad(target.files[0]) + } + } + + const handleDragLeave = (event: React.DragEvent) => { + console.log('handleDragLeave') + event.preventDefault() + + // setTimeout(function () { + setIsDragging(false) + // }, 100); + } + + const handleDropFile = (event: React.DragEvent) => { + console.log('handleDropFile') + event.preventDefault() + setIsDragging(false) + console.log(event) + if (event.dataTransfer.files.length > 0) { + handleImageLoad(event.dataTransfer.files[0]) } + } - fileReader.readAsDataURL(target.files[0]) + const allowDrop = (event: React.DragEvent) => { + console.log('allowDrop') + event.preventDefault() + setIsDragging(true) + event.dataTransfer.dropEffect = 'copy' } return ( -