Nejcraft/nej-react-components
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

podstatne updaty

Browse Source
This commit is contained in:
honzapatCZ 2021-03-30 23:43:40 +02:00
parent 79aa7a4eb0
commit 9c0c6fd818
3 changed files with 48 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Parts/Button.js
View File

@ -22,7 +22,6 @@ function ButtonBase(props) {
color = "bg-accent5 hover:bg-accent5-dark" color = "bg-accent5 hover:bg-accent5-dark"
break; break;
default: default:
color = ""
break; break;
} }
return ( return (

33
Parts/Input.js
View File

@ -1,10 +1,10 @@
import React from 'react' import React from 'react'
function Input(props) { export default function Input(props) {
return ( return (
<div className={props.title != null ? "mb-3": ""}> <div className={props.title != null ? "my-1": ""}>
{props.title != null ? ( {props.title != null ? (
<label {...props.label} className={"block text-secondary text-sm font-bold mb-2 "+props.label?.className} htmlFor={props.id || props.name || props.title}> <label {...props.label} className={"block text-secondary text-sm font-bold mb-1 "+props.label?.className} htmlFor={props.id || props.name || props.title}>
{props.title} {props.title}
</label> </label>
) : null} ) : null}
@ -13,19 +13,28 @@ function Input(props) {
</div> </div>
) )
} }
function TextArea(props) { export function TextArea({label, title, name, id, children, ...props}) {
return ( return (
<div className="mb-3"> <div className="my-1">
<label {...props.label} className={"block text-secondary text-sm font-bold mb-2 "+props.label?.className} htmlFor={props.id || props.name || props.title}> <label {...label} className={"block text-secondary text-sm font-bold mb-2 "+ label?.className} htmlFor={id ?? name ?? title}>
{props.title} {title}
</label> </label>
<textarea {...props} name={props.name || props.title} id={props.id || props.name || props.title} className={"bg-primary appearance-none border-2 border-secondary rounded w-full py-2 px-4 text-primary leading-tight focus:outline-none focus:bg-secondary focus:border-accent transition duration-150 "+props.className}/> <textarea {...props} name={name ?? title} id={id ?? name ?? props.title} className={"bg-primary appearance-none border-2 border-secondary rounded w-full py-2 px-4 text-primary leading-tight focus:outline-none focus:bg-secondary focus:border-accent transition duration-150 "+props.className}/>
{props.children} {children}
</div> </div>
) )
} }
export default Input export function CheckBox({label, title, name, id, children, ...props}){
export { return(
TextArea <div class="my-1 flex text-secondary">
<input {...props} type="checkbox" name={name ?? title} id={id ?? name ?? title} className={"checked:bg-accent w-6 h-6 rounded-full bg-secondary border-secondary border-4 appearance-none cursor-pointer "+props.className}/>
{title != null ? (
<label {...props.label} htmlFor={id ?? name ?? title} class="block font-bold px-2">
{title}
</label>
) : null}
{children}
</div>
)
} }

28
Parts/Text.js
View File

@ -8,7 +8,33 @@ function Text() {
) )
} }
export function Divider() { export function Divider() {
return <hr className="my-4 md:min-w-full border-secondary" />; return <hr className="my-2 md:min-w-full border-secondary" />;
}
export function ClickableText({className, ...props}){
let color = "text-secondary hover:text-primary"
switch (props.type) {
case "warning":
color = "text-accent4 hover:text-accent4-dark"
break;
case "danger":
color = "text-red-700 hover:text-red-800"
break;
case "accent":
color = "text-accent hover:text-accent-dark"
break;
case "accent2":
color = "text-accent2 hover:text-accent2-dark"
break;
case "accent3":
color = "text-accent3 hover:text-accent3-dark"
break;
case "accent5":
color = "text-accent5 hover:btextg-accent5-dark"
break;
default:
break;
}
return <a {...props} className={color + " text-secondary hover:text-primary font-semibold cursor-pointer " + (className ?? "")}>{props.children}</a>
} }
export default Text export default Text