eero/WretchedMachines
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Frontend: add twMerge to components

Browse Source
This commit is contained in:
Eero Holmala 2024-06-01 11:21:04 +03:00
parent dbf6bc25bb
commit aa9b7be7d4
5 changed files with 17 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
wretched-machines-frontend/src/components/ui/content-box.tsx
View File

@ -1,3 +1,5 @@
import { cn } from "@/lib/utils"
interface ContentBoxProps {
title: string,
children: React.ReactNode
@ -5,9 +7,9 @@ interface ContentBoxProps {
const ContentBox = (props: ContentBoxProps)=>{
return(
<div className="shadow-lg m-10">
<div className="content-box-header bg-black text-white p-8 pt-4 pb-4 text-xl text-left">{props.title}</div>
<div className="content-box-content border-solid border-1 border-black p-8">
<div className={cn("shadow-lg m-10")}>
<div className={cn("content-box-header bg-black text-white p-8 pt-4 pb-4 text-xl text-left")}>{props.title}</div>
<div className={cn("content-box-content border-solid border-1 border-black p-8")}>
{props.children}
</div>
</div>

8
wretched-machines-frontend/src/components/ui/form-input.tsx
View File

@ -1,3 +1,5 @@
import { cn } from "@/lib/utils"
interface FormTextInputProps {
value: string,
name: string,
@ -23,18 +25,18 @@ interface FormLabelProps {
const FormLabel = (props: FormLabelProps) => {
const label = props.name.charAt(0).toUpperCase() + props.name.slice(1);
return(<label className={props.className} htmlFor={props.name}>{label}</label>);
return(<label className={cn(props.className)} htmlFor={props.name}>{label}</label>);
}
const FormTextInput = (props: FormTextInputProps) => {
return(
<input className={props.className} type={props.type} name={props.name} value={props.value} placeholder={props.placeholder} onChange={props.onChangeHandler}></input>
<input className={cn(props.className)} type={props.type} name={props.name} value={props.value} placeholder={props.placeholder} onChange={props.onChangeHandler}></input>
);
}
const FormSubmitInput = (props: FormSubmitInputProps) => {
return(
<input className={props.className} type="submit" name={props.name} value={props.value} onSubmit={props.onSubmitHandler}>{props.children}</input>
<input className={cn(props.className)} type="submit" name={props.name} value={props.value} onSubmit={props.onSubmitHandler}>{props.children}</input>
);
}

3
wretched-machines-frontend/src/components/ui/form.tsx
View File

@ -1,4 +1,5 @@
import React from "react"
import { cn } from "@/lib/utils"
interface FormProps {
children: React.ReactNode,
@ -8,7 +9,7 @@ interface FormProps {
const Form = (props: FormProps) => {
return(
<form className={props.className} action={props.formAction}>
<form className={cn(props.className)} action={props.formAction}>
{props.children}
</form>
);

4
wretched-machines-frontend/src/components/ui/navbar.tsx
View File

@ -1,9 +1,9 @@
import Link from "next/link";
import { cn } from "@/lib/utils"
const Navbar = () => {
return (
<div className="flex h-20 bg-gray-800 text-white justify-around w-screen opacity-100 items-center">
<div className={cn("flex h-20 bg-gray-800 text-white justify-around w-screen opacity-100 items-center")}>
<Link href="/">
<div>Home</div>
</Link>

4
wretched-machines-frontend/src/components/ui/page-title.tsx
View File

@ -1,3 +1,5 @@
import { cn } from "@/lib/utils"
interface PageTitleProps {
title: string
}
@ -14,7 +16,7 @@ const AddSpacing = (text: string) : string => {
const PageTitle = (props: PageTitleProps)=>{
const title = AddSpacing(props.title);
return(
<h1 className="text-4xl drop-shadow-xl text-shadow tracking-widest">{title}</h1>
<h1 className={cn("text-4xl drop-shadow-xl text-shadow tracking-widest")}>{title}</h1>
);
}