niku/twitch-clone
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updated prettier config

Browse Source
This commit is contained in:
strNophix
2022-10-04 17:31:54 +02:00
parent add9cdabcb
commit 837516f0e6
31 changed files with 188 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
client/src/components/BrowseLayout.tsx
View File

@@ -1,10 +1,10 @@
import { ArrowLeftIcon } from "@heroicons/react/24/outline";
import { Outlet, NavLink } from "react-router-dom";
import { ArrowLeftIcon } from '@heroicons/react/24/outline';
import { Outlet, NavLink } from 'react-router-dom';
import Button from "../components/Button";
import NavBar from "../components/NavBar";
import SideNavChannel from "../components/SideNavChannel";
import streamData from "../placeholder/GetStreams";
import Button from '../components/Button';
import NavBar from '../components/NavBar';
import SideNavChannel from '../components/SideNavChannel';
import streamData from '../placeholder/GetStreams';
function BrowseLayout() {
return (

25
client/src/components/Button.tsx
View File

@@ -1,30 +1,25 @@
import clsx from "clsx";
import { FC } from "react";
import clsx from 'clsx';
import { FC } from 'react';
type ButtonVariants = "filled" | "subtle";
type ButtonVariants = 'filled' | 'subtle';
interface ButtonProps extends React.ComponentPropsWithoutRef<"button"> {
interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {
variant?: ButtonVariants;
}
const getStyling = (variant?: ButtonVariants) => {
switch (variant) {
case "filled":
return "bg-neutral-700";
case "subtle":
return "hover:bg-neutral-500";
case 'filled':
return 'bg-neutral-700';
case 'subtle':
return 'hover:bg-neutral-500';
default:
return "bg-neutral-700";
return 'bg-neutral-700';
}
};
const Button: FC<ButtonProps> = ({ className, variant, ...rest }) => {
return (
<button
className={clsx("rounded-md", getStyling(variant), className)}
{...rest}
/>
);
return <button className={clsx('rounded-md', getStyling(variant), className)} {...rest} />;
};
export default Button;

6
client/src/components/ChatBadge.tsx
View File

@@ -1,9 +1,7 @@
import { FC } from "react";
import { FC } from 'react';
const ChatBadge: FC = () => {
return (
<span className="w-5 h-5 rounded-sm bg-pink-300 inline-block align-middle" />
);
return <span className="w-5 h-5 rounded-sm bg-pink-300 inline-block align-middle" />;
};
export default ChatBadge;

4
client/src/components/ChatMessage.tsx
View File

@@ -1,6 +1,6 @@
import { FC } from "react";
import { FC } from 'react';
import ChatBadge from "./ChatBadge";
import ChatBadge from './ChatBadge';
const ChatMessage: FC = () => {
return (

6
client/src/components/FormField.tsx
View File

@@ -1,8 +1,8 @@
import { forwardRef, ReactNode } from "react";
import { forwardRef, ReactNode } from 'react';
import Input from "./Input";
import Input from './Input';
interface FormFieldProps extends React.ComponentPropsWithoutRef<"input"> {
interface FormFieldProps extends React.ComponentPropsWithoutRef<'input'> {
label: string;
bottomElement?: ReactNode;
}

26
client/src/components/InlineLink.tsx
View File

@@ -1,36 +1,24 @@
import clsx from "clsx";
import { FC } from "react";
import { NavLink } from "react-router-dom";
import clsx from 'clsx';
import { FC } from 'react';
import { NavLink } from 'react-router-dom';
export interface InlineLinkProps
extends React.ComponentPropsWithoutRef<"span"> {
export interface InlineLinkProps extends React.ComponentPropsWithoutRef<'span'> {
to: string;
external?: boolean;
}
const InlineLink: FC<InlineLinkProps> = ({
to,
external,
className,
...rest
}) => {
const InlineLink: FC<InlineLinkProps> = ({ to, external, className, ...rest }) => {
if (external === true) {
return (
<a href={to}>
<span
className={clsx("text-violet-400 cursor-pointer text-sm", className)}
{...rest}
/>
<span className={clsx('text-violet-400 cursor-pointer text-sm', className)} {...rest} />
</a>
);
}
return (
<NavLink to={to}>
<span
className={clsx("text-violet-400 cursor-pointer text-sm", className)}
{...rest}
/>
<span className={clsx('text-violet-400 cursor-pointer text-sm', className)} {...rest} />
</NavLink>
);
};

32
client/src/components/Input.tsx
View File

@@ -1,21 +1,19 @@
import clsx from "clsx";
import { forwardRef } from "react";
import clsx from 'clsx';
import { forwardRef } from 'react';
type InputProps = React.ComponentPropsWithoutRef<"input">;
type InputProps = React.ComponentPropsWithoutRef<'input'>;
const Input = forwardRef<HTMLInputElement, InputProps>(
({ className, ...rest }, ref) => {
return (
<input
className={clsx(
"bg-zinc-700 rounded-md box-border focus:outline outline-violet-400 text-sm",
className
)}
{...rest}
ref={ref}
/>
);
}
);
const Input = forwardRef<HTMLInputElement, InputProps>(({ className, ...rest }, ref) => {
return (
<input
className={clsx(
'bg-zinc-700 rounded-md box-border focus:outline outline-violet-400 text-sm',
className
)}
{...rest}
ref={ref}
/>
);
});
export default Input;

14
client/src/components/LoginForm.tsx
View File

@@ -1,9 +1,9 @@
import { FC } from "react";
import { useForm, SubmitHandler } from "react-hook-form";
import { FC } from 'react';
import { useForm, SubmitHandler } from 'react-hook-form';
import FormField from "./FormField";
import InlineLink from "./InlineLink";
import SubmitButton from "./SubmitButton";
import FormField from './FormField';
import InlineLink from './InlineLink';
import SubmitButton from './SubmitButton';
interface LoginFormValues {
username: string;
@@ -19,12 +19,12 @@ const LoginForm: FC = () => {
<FormField
label="Username"
className="py-2 px-2 outline-2 w-full"
{...register("username")}
{...register('username')}
/>
<FormField
label="Password"
type="password"
{...register("password")}
{...register('password')}
className="py-2 px-2 outline-2 w-full"
bottomElement={
<InlineLink to="#" className="block mt-2">

25
client/src/components/LoginModal.tsx
View File

@@ -1,12 +1,12 @@
import { Dialog, Tab } from "@headlessui/react";
import { FC } from "react";
import { createPortal } from "react-dom";
import { Dialog, Tab } from '@headlessui/react';
import { FC } from 'react';
import { createPortal } from 'react-dom';
import logo from "../assets/images/logo.png";
import logo from '../assets/images/logo.png';
import LoginForm from "./LoginForm";
import LoginModalTab from "./LoginModalTab";
import SignupForm from "./SignupForm";
import LoginForm from './LoginForm';
import LoginModalTab from './LoginModalTab';
import SignupForm from './SignupForm';
export interface LoginModelProps {
isOpen: boolean;
@@ -21,21 +21,16 @@ const LoginModal: FC<LoginModelProps> = ({ defaultPage, isOpen, onClose }) => {
<Dialog.Panel className="bg-zinc-900 text-gray-100 w-[420px] rounded-md py-12 px-6">
<div className="flex flex-row items-center justify-center">
<Dialog.Title className="text-xl">
<img src={logo} className="inline w-12 h-12" alt="logo" /> Log in
to twitch-clone
<img src={logo} className="inline w-12 h-12" alt="logo" /> Log in to twitch-clone
</Dialog.Title>
</div>
<Tab.Group defaultIndex={defaultPage}>
<Tab.List className="space-x-4 border-b border-b-neutral-100/40 mt-4">
<Tab>
{({ selected }) => (
<LoginModalTab selected={selected}>Log In</LoginModalTab>
)}
{({ selected }) => <LoginModalTab selected={selected}>Log In</LoginModalTab>}
</Tab>
<Tab>
{({ selected }) => (
<LoginModalTab selected={selected}>Sign Up</LoginModalTab>
)}
{({ selected }) => <LoginModalTab selected={selected}>Sign Up</LoginModalTab>}
</Tab>
</Tab.List>
<Tab.Panels className="mt-4">

10
client/src/components/LoginModalTab.tsx
View File

@@ -1,7 +1,7 @@
import clsx from "clsx";
import { FC } from "react";
import clsx from 'clsx';
import { FC } from 'react';
interface LoginModalTabProps extends React.ComponentPropsWithoutRef<"p"> {
interface LoginModalTabProps extends React.ComponentPropsWithoutRef<'p'> {
selected: boolean;
}
@@ -9,8 +9,8 @@ const LoginModalTab: FC<LoginModalTabProps> = ({ selected, ...rest }) => {
return (
<p
className={clsx(
"font-semibold p-1",
selected && "text-violet-400 border-b-2 border-b-violet-400"
'font-semibold p-1',
selected && 'text-violet-400 border-b-2 border-b-violet-400'
)}
{...rest}
/>

28
client/src/components/NavBar.tsx
View File

@@ -1,11 +1,11 @@
import { UserIcon } from "@heroicons/react/24/outline";
import { FC, useState } from "react";
import { UserIcon } from '@heroicons/react/24/outline';
import { FC, useState } from 'react';
import logo from "../assets/images/logo.png";
import logo from '../assets/images/logo.png';
import Button from "./Button";
import Input from "./Input";
import LoginModal from "./LoginModal";
import Button from './Button';
import Input from './Input';
import LoginModal from './LoginModal';
const NavBar: FC = () => {
const [showLogin, setShowLogin] = useState(false);
@@ -42,18 +42,12 @@ const NavBar: FC = () => {
<div className="basis-1/4">
<ul className="justify-end flex flex-row space-x-3 items-center">
<li>
<Button
className="text-sm px-3 py-2 bg-neutral-700"
onClick={showLoginTab}
>
<Button className="text-sm px-3 py-2 bg-neutral-700" onClick={showLoginTab}>
Log In
</Button>
</li>
<li>
<Button
className="text-sm px-3 py-2 bg-violet-500"
onClick={showSignupTab}
>
<Button className="text-sm px-3 py-2 bg-violet-500" onClick={showSignupTab}>
Sign Up
</Button>
</li>
@@ -65,11 +59,7 @@ const NavBar: FC = () => {
</ul>
</div>
</div>
<LoginModal
isOpen={showLogin}
defaultPage={showTab}
onClose={() => setShowLogin(false)}
/>
<LoginModal isOpen={showLogin} defaultPage={showTab} onClose={() => setShowLogin(false)} />
</nav>
);
};

12
client/src/components/SideNavChannel.tsx
View File

@@ -1,7 +1,7 @@
import { FC } from "react";
import { FC } from 'react';
import { numFormatter } from "../lib/format";
import { Stream } from "../types";
import { numFormatter } from '../lib/format';
import { Stream } from '../types';
interface SideNavChannelProps {
stream: Stream;
@@ -10,11 +10,7 @@ interface SideNavChannelProps {
const SideNavChannel: FC<SideNavChannelProps> = ({ stream }) => {
return (
<div className="flex flex-row px-3 py-2 text-sm leading-4 space-x-2 hover:bg-neutral-700/40 cursor-pointer">
<img
className="rounded-full w-8 h-8"
src={stream.thumbnail_url}
alt="avatar"
/>
<img className="rounded-full w-8 h-8" src={stream.thumbnail_url} alt="avatar" />
<div className="flex flex-col flex-1">
<div className="flex flex-row justify-between">
<div className="font-bold">{stream.user_name}</div>

33
client/src/components/SignupForm.tsx
View File

@@ -1,14 +1,13 @@
import { zodResolver } from "@hookform/resolvers/zod";
import { FC } from "react";
import { SubmitHandler, useForm } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from '@hookform/resolvers/zod';
import { FC } from 'react';
import { SubmitHandler, useForm } from 'react-hook-form';
import { z } from 'zod';
import FormField from "./FormField";
import InlineLink from "./InlineLink";
import SubmitButton from "./SubmitButton";
import FormField from './FormField';
import InlineLink from './InlineLink';
import SubmitButton from './SubmitButton';
const PASSWORD_REGEX =
/^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$ %^&*-]).{8,64}$/;
const PASSWORD_REGEX = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$ %^&*-]).{8,64}$/;
const SignupFormSchema = z
.object({
@@ -19,7 +18,7 @@ const SignupFormSchema = z
})
.refine((data) => data.password === data.passwordRepeat, {
message: "Passwords don't match",
path: ["passwordRepeat"],
path: ['passwordRepeat'],
});
type SignupFormValues = z.infer<typeof SignupFormSchema>;
@@ -36,34 +35,34 @@ const SignupForm: FC = () => {
return (
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
<p className="text-sm">
Creating an account allows you to participate in chat, follow your
favorite channels, and broadcast from your own channel.
Creating an account allows you to participate in chat, follow your favorite channels, and
broadcast from your own channel.
</p>
<FormField
label="Username"
{...register("username")}
{...register('username')}
className="py-2 px-2 outline-2 w-full"
/>
<FormField
label="Password"
{...register("password")}
{...register('password')}
type="password"
className="py-2 px-2 outline-2 w-full"
/>
<FormField
label="Confirm Password"
{...register("passwordRepeat")}
{...register('passwordRepeat')}
type="password"
className="py-2 px-2 outline-2 w-full"
/>
<FormField
label="Email"
{...register("email")}
{...register('email')}
type="email"
className="py-2 px-2 outline-2 w-full"
/>
<p className="text-sm text-center">
By clicking Sign Up, you are agreeing to twitch-clone&apos;s{" "}
By clicking Sign Up, you are agreeing to twitch-clone&apos;s{' '}
<InlineLink to="https://tosdr.org/en/service/200" external>
Terms of Service
</InlineLink>

11
client/src/components/SubmitButton.tsx
View File

@@ -1,16 +1,13 @@
import clsx from "clsx";
import { FC } from "react";
import clsx from 'clsx';
import { FC } from 'react';
type ButtonProps = React.ComponentPropsWithoutRef<"input">;
type ButtonProps = React.ComponentPropsWithoutRef<'input'>;
const SubmitButton: FC<ButtonProps> = ({ className, ...rest }) => {
return (
<input
type="submit"
className={clsx(
"rounded-md bg-violet-500 font-semibold py-2 text-sm",
className
)}
className={clsx('rounded-md bg-violet-500 font-semibold py-2 text-sm', className)}
{...rest}
/>
);