From 7255e223157cb8644f15316396f4f9a9e807ecaa Mon Sep 17 00:00:00 2001 From: strNophix Date: Thu, 29 Sep 2022 21:18:26 +0200 Subject: [PATCH] Added logo and frontend part of login and signup modals --- client/package.json | 1 + client/pnpm-lock.yaml | 13 +++ client/src/assets/images/logo.png | Bin 0 -> 2028 bytes client/src/components/FormField.tsx | 22 +++++ client/src/components/InlineLink.tsx | 38 ++++++++ client/src/components/LoginModal.tsx | 129 +++++++++++++++++++++++++++ client/src/components/NavBar.tsx | 36 ++++++-- 7 files changed, 234 insertions(+), 5 deletions(-) create mode 100644 client/src/assets/images/logo.png create mode 100644 client/src/components/FormField.tsx create mode 100644 client/src/components/InlineLink.tsx create mode 100644 client/src/components/LoginModal.tsx diff --git a/client/package.json b/client/package.json index 2af36d5..0732496 100644 --- a/client/package.json +++ b/client/package.json @@ -9,6 +9,7 @@ "preview": "vite preview" }, "dependencies": { + "@headlessui/react": "^1.7.2", "@heroicons/react": "^2.0.11", "clsx": "^1.2.1", "react": "^18.2.0", diff --git a/client/pnpm-lock.yaml b/client/pnpm-lock.yaml index afa2c81..237de88 100644 --- a/client/pnpm-lock.yaml +++ b/client/pnpm-lock.yaml @@ -1,6 +1,7 @@ lockfileVersion: 5.4 specifiers: + '@headlessui/react': ^1.7.2 '@heroicons/react': ^2.0.11 '@types/react': ^18.0.17 '@types/react-dom': ^18.0.6 @@ -18,6 +19,7 @@ specifiers: vite: ^3.1.0 dependencies: + '@headlessui/react': 1.7.2_biqbaboplfbrettd7655fr4n2y '@heroicons/react': 2.0.11_react@18.2.0 clsx: 1.2.1 react: 18.2.0 @@ -323,6 +325,17 @@ packages: dev: true optional: true + /@headlessui/react/1.7.2_biqbaboplfbrettd7655fr4n2y: + resolution: {integrity: sha512-snLv2lxwsf2HNTOBNgHYdvoYZ3ChJE8QszPi1d/hl9js8KrFrUulTaQBfSyPbJP5BybVreWh9DxCgz9S0Z6hKQ==} + engines: {node: '>=10'} + peerDependencies: + react: ^16 || ^17 || ^18 + react-dom: ^16 || ^17 || ^18 + dependencies: + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + dev: false + /@heroicons/react/2.0.11_react@18.2.0: resolution: {integrity: sha512-bASjOgSSaYj8HqXWsOqaBiB6ZLalE/g90WYGgZ5lPm4KCCG7wPXntY4kzHf5NrLh6UBAcnPwvbiw1Ne9GYfJtw==} peerDependencies: diff --git a/client/src/assets/images/logo.png b/client/src/assets/images/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..9332bcb2bee36057a1c9ce221d770b4540c6bb7a GIT binary patch literal 2028 zcma)6dr;De7REI}AQ2bSEb)O|)Lq5rR*R1mG^Nx^yJjZl8}0h`Cu%+lgAgf|Y|MOQ zXj{4Njf}Je(X}*et?tjMd?ltV)vvT9Gf7Rm^ymHWo|*4_GvApxGw1te4sU-*fB|X? z3I>B2&;tEJwY>5j`fzP8n~U^olospE1nh1m035o??f%kpP2abmQ z_R}Ukk21T2>mlKO{^lJh|LfReoN#;)X|0rKKr83BOh;y_s$Wu#i!Ckd zw)s(w`r~KPJ#l2yY7Wq5#@F!{bH(_8SUSL6L+^7?K9&3Gx%DO^{e*33i#r12l0y6GWwKRapJ{UcZAV> zLXDL#yVMnBcW*a4ywMnqoT%(n8{RG9MWMP-F{%h3JpJLm zu)!pj#%<-QJD7(C{#_t@uE|<~ZEJ1&Vvw1se@10jC>xM^)D^C3f@Hmx<7cu#2HqoH z8w)&cZ-AecwY5x@p3o99Gw^T@3`Vl~4xRkpb}_Xg0-y!^BVHr%SQo^bj*2v`WCr+0 z0Mv}Mw8V4(M$Jx)1rigi@=}0gs{mT?{zEK`DGa99PxJFVm_PAeu{Rs%V(fFkE+!dS`)u4 zDe*?(e|%6V8XiXDb>P3aGKDtp;O%I9-}W*(RMzP`M=>=sh}+dwq`cBo9eBB?rAoNI zw6-njX0EBLK7A4-0$J2lLjpp`Hz#vR*>)C^LF)@GgVtQfrrZ;m%YTmGArncOhf4M0 zV5~YPr=Mj9MEWN;pSsM!G(Rq+hum3@$EdJ>@G1teWThWOU~Lx8e{LWp**On$9vz9^ z>M+7*0Ob$XM&<*`z28Ygds;bwfWg}fMLWPny0db>Yx%0@@s=Nx3BaEBP|y-f=<#vG zkvwM(2lGpYxgaBADxm2rrSOq2WN|qvdk+eNjnT(r$yNZC%>T6@0GdAS2>3wvm))%>hUFyqXrP|VxH6WJodYZ~D>z0#U$W=qO zL*$NJ1P+h;LHKQ^-}u4B;c8y`@A1uUD^F&DF@wWUaQ@2+&$}xv9F~SsX6AHpcux$< zYZa}ly*tEvd@A(O(r1)n36IlS;69o1c%t(^lV&LV7B$Q4ba00wE@kK&g9{$Mn<)Fb zCNs3dS4~L7(_M>iKQ5rO)w}>l=F=!B<-_0sli9M?ZdazDaCgQoPR7|7 z)yQhi`~#^bCPYQKGvGaUB4WE6Q-CghyHwn7+|3xC%84-Xsu&VwEWRjEY?SVI3yBc- zR2{i7P(CPH)+Al3WnkR@zNW+=xLHDzg?EDtM6fx<@W)jP0bk)petgO0khgfXAb)n0 z1)^oOsv_?@xs12X{Kdn$f_f+dtc9ju+XBgV@3-f2;g!zBM_aXqrOr9}7tp!%kNmQ>OIjZy8S+y(UD-L(&3#^q$-CnK4a->W9h#uOOhBt{M<= zdFi*%-M%V{Y2n3z)N*v={hn|1^Y$cw8CkYz-N`L13NnspAXv&0A6r0PCq$wvgYTWc8|->IUsC3NG^2qp^pNIt$QI&<=Ly z@|#=TWdzfLS?~^Ay`Wh$CrdW06TTX9=e{WGpb-|x?*$2_%NyVCQylsx*OWy;M0-M| zELUXw*ClkHLBMn@Rn)Wd5D6>fdnP~%lh<>4Hh?x#jYH+&ys|!Wdw;qSvU^}e0c`EP z9u>x_hmf70OzQ4((vLWi*rfaeuG}yU=f&|rGYKuLc&=1FBAWs7s{2P2H5PH4bk~7O zMKH%2N1r2X>vY`}`+6bC#$rc2@pKRQR;7t(n)Boe$Y6IS3d-qF5Jn-s3G!z8CNx>y(s7{;(1&j9Evo-L*?G9tRiS7I0yeODAspoV>4at* zJ9fobd#>%*@Ts#1^krW)MLt4Lt%VYr)alN(5YdxJ9=Da&BemI8@Isazet?&Pe1uar tJKB>euvt|0@y&&%XQL { + label: string; + bottomElement?: ReactNode; +} + +const FormField = ({ label, bottomElement, ...inputProps }: FormFieldProps) => { + return ( +
+ +
+ + {bottomElement} +
+ ); +}; + +export default FormField; diff --git a/client/src/components/InlineLink.tsx b/client/src/components/InlineLink.tsx new file mode 100644 index 0000000..6982714 --- /dev/null +++ b/client/src/components/InlineLink.tsx @@ -0,0 +1,38 @@ +import { FC } from "react"; +import clsx from "clsx"; +import { NavLink } from "react-router-dom"; + +export interface InlineLinkProps + extends React.ComponentPropsWithoutRef<"span"> { + to: string; + external?: boolean; +} + +const InlineLink: FC = ({ + to, + external, + className, + ...rest +}) => { + if (external === true) { + return ( + + + + ); + } + + return ( + + + + ); +}; + +export default InlineLink; diff --git a/client/src/components/LoginModal.tsx b/client/src/components/LoginModal.tsx new file mode 100644 index 0000000..f67b840 --- /dev/null +++ b/client/src/components/LoginModal.tsx @@ -0,0 +1,129 @@ +import React, { FC } from "react"; +import { Dialog } from "@headlessui/react"; +import { createPortal } from "react-dom"; +import { Tab } from "@headlessui/react"; +import clsx from "clsx"; +import FormField from "./FormField"; +import Button from "./Button"; +import InlineLink from "./InlineLink"; +import logo from "../assets/images/logo.png"; + +export interface LoginModelProps { + isOpen: boolean; + onClose: () => any; + defaultPage?: number; +} + +const LoginModal: FC = ({ defaultPage, isOpen, onClose }) => { + return createPortal( + +
+ +
+ + Log in to + twitch-clone + +
+ + + + {({ selected }) => ( + Log In + )} + + + {({ selected }) => ( + Sign Up + )} + + + + + + + Trouble logging in? + + } + /> + + + +

+ Creating an account allows you to participate in chat, follow + your favorite channels, and broadcast from your own channel. +

+ + + + +

+ By clicking Sign Up, you are agreeing to twitch-clone's{" "} + + Terms of Service + + . +

+ + + + + +
+ , + document.body + ); +}; + +interface LoginModalTabProps extends React.ComponentPropsWithoutRef<"p"> { + selected: boolean; +} + +const LoginModalTab: FC = ({ selected, ...rest }) => { + return ( +

+ ); +}; + +export default LoginModal; diff --git a/client/src/components/NavBar.tsx b/client/src/components/NavBar.tsx index 0cff89b..92ac784 100644 --- a/client/src/components/NavBar.tsx +++ b/client/src/components/NavBar.tsx @@ -1,16 +1,31 @@ import { TvIcon, UserIcon } from "@heroicons/react/24/outline"; -import { FC } from "react"; +import { FC, useState } from "react"; import Button from "./Button"; import Input from "./Input"; +import LoginModal from "./LoginModal"; +import logo from "../assets/images/logo.png"; const NavBar: FC = () => { + const [showLogin, setShowLogin] = useState(false); + const [showTab, setShowTab] = useState(0); + + const showLoginTab = () => { + setShowTab(0); + setShowLogin(true); + }; + + const showSignupTab = () => { + setShowTab(1); + setShowLogin(true); + }; + return (

); };