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"
break;
default:
color = ""
break;
}
return (

33
Parts/Input.js
View File

@ -1,10 +1,10 @@
import React from 'react'
function Input(props) {
export default function Input(props) {
return (
<div className={props.title != null ? "mb-3": ""}>
<div className={props.title != null ? "my-1": ""}>
{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}
</label>
) : null}
@ -13,19 +13,28 @@ function Input(props) {
</div>
)
}
function TextArea(props) {
export function TextArea({label, title, name, id, children, ...props}) {
return (
<div className="mb-3">
<label {...props.label} className={"block text-secondary text-sm font-bold mb-2 "+props.label?.className} htmlFor={props.id || props.name || props.title}>
{props.title}
<div className="my-1">
<label {...label} className={"block text-secondary text-sm font-bold mb-2 "+ label?.className} htmlFor={id ?? name ?? title}>
{title}
</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}/>
{props.children}
<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}/>
{children}
</div>
)
}
export default Input
export {
TextArea
export function CheckBox({label, title, name, id, children, ...props}){
return(
<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() {
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