-
-
Notifications
You must be signed in to change notification settings - Fork 9
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(app): add modal to add question #390
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
||
export const AddQuestionModal = (props: ComponentProps<typeof BaseModal>) => ( | ||
<BaseModal {...props}> | ||
<h3 className="text-center text-xl font-bold uppercase text-primary">Nowe pytanie</h3> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<h3 className="text-center text-xl font-bold uppercase text-primary">Nowe pytanie</h3> | |
<h2 className="text-center text-xl font-bold uppercase text-primary">Nowe pytanie</h2> |
|
||
export const AddQuestionModal = (props: ComponentProps<typeof BaseModal>) => ( | ||
<BaseModal {...props}> | ||
<h3 className="text-center text-xl font-bold uppercase text-primary">Nowe pytanie</h3> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Brakuje jakiegoś elementu form
nad tym
<option>HTML5</option> | ||
<option>JavaScript</option> | ||
</Select> | ||
<Select className="w-full"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Selekty nie mają labeli
<option>Wybierz Poziom</option> | ||
<option>junior</option> | ||
<option>Mid</option> | ||
<option>Senior</option> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
option nie mają value
|
||
export const BaseModal = ({ isOpen, onClose, children }: BaseModalProps) => { | ||
useEffect(() => { | ||
isOpen && lockScroll(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
isOpen && lockScroll(); | |
if (isOpen) { | |
lockScroll(); | |
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nie brakuje tu else
z unlockScroll
?
> | ||
<div | ||
className="relative h-full w-full max-w-3xl animate-show rounded-sm bg-white px-3.5 py-9 sm:h-fit sm:px-11 sm:py-20" | ||
onClick={(event) => event.stopPropagation()} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Div z onClick
? Dlaczego?
|
||
export const Select = ({ className, ...props }: SelectHTMLAttributes<HTMLSelectElement>) => ( | ||
<select | ||
className={twMerge( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
}, []); | ||
|
||
return ( | ||
<ModalContextProvider value={{ openedModal, openModal, closeModal }}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Tutaj tworzy się nowy obiekt przy każdym renderze i powoduje to, że cały kontekst się przerenderowuje. Brakuje useMemo
apps/app/tailwind.config.js
Outdated
backgroundImage: { | ||
"select-purple": 'url("/select-purple.svg")', | ||
}, | ||
backgroundSize: { | ||
"select-purple": "25px", | ||
}, | ||
backgroundPosition: { | ||
"select-purple": "100% 50%", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Można po prostu dopisać klasę do pliku tailwind.css
:)
afterLeave={() => { | ||
unlockScroll(); | ||
}} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
afterLeave={() => { | |
unlockScroll(); | |
}} | |
afterLeave={unlockScroll} |
> | ||
<div | ||
className="relative h-full w-full max-w-3xl animate-show rounded-sm bg-white px-3.5 py-9 sm:h-fit sm:px-11 sm:py-20" | ||
onClick={(event) => event.stopPropagation()} | ||
onClick={(event) => { | ||
// stop triggering click event to higher component |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
// stop triggering click event to higher component | |
// stop propagation to avoid triggering `onClick` on the backdrop behind the modal |
@@ -4,7 +4,7 @@ import type { SelectHTMLAttributes } from "react"; | |||
export const Select = ({ className, ...props }: SelectHTMLAttributes<HTMLSelectElement>) => ( | |||
<select | |||
className={twMerge( | |||
"cursor-pointer appearance-none border-b border-primary bg-select-purple bg-no-repeat py-2 pr-6 pl-1 text-sm capitalize text-primary transition-shadow duration-100 focus:shadow-[0_0_10px] focus:shadow-primary focus:outline-0", | |||
"select-purple cursor-pointer appearance-none rounded-none border-b border-primary py-2 pr-6 pl-1 text-base capitalize text-primary transition-shadow duration-100 focus:shadow-[0_0_10px] focus:shadow-primary focus:outline-0", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Brakuje chyba appearance-none
No description provided.