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

no message

Browse Source
This commit is contained in:
Regi 2022-03-04 13:57:28 +01:00
parent f591e46b67
commit be59cd8df2
13 changed files with 206 additions and 203 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
Parts/Button.js
View File

@ -1,13 +1,13 @@
import React from 'react' import React from "react"
import tw, {styled} from "twin.macro" import tw, {styled} from "twin.macro"
import 'styled-components/macro' import "styled-components/macro"
import { colors, colorsDisabled, colorsHover } from './Colors' import { colors, colorsDisabled, colorsHover } from "./Colors"
const BtnBase = styled.button(({ type }) => [ const BtnBase = styled.button(({ type }) => [
tw`bg-secondary hover:bg-trinary disabled:bg-trinary m-2 outline-none focus:outline-none text-primary font-bold ease-linear transition-all duration-150`, tw`bg-secondary hover:bg-trinary disabled:bg-trinary m-2 outline-none focus:outline-none text-primary font-bold ease-linear transition-all duration-150`,
colors[type], colorsHover[type], colorsDisabled[type] colors[type], colorsHover[type], colorsDisabled[type]
]) ])
/* /*

27
Parts/Card.js
View File

@ -1,19 +1,18 @@
import React from "react"; import React from "react";
import tw, {styled} from "twin.macro" import tw, {styled} from "twin.macro"
import 'styled-components/macro' import "styled-components/macro"
export default function Card(props) { let Card = styled.div(tw`relative flex flex-col min-w-0 break-words bg-primary w-full shadow-xl rounded-2xl`)
return <div {...props} css={[tw`relative flex flex-col min-w-0 break-words bg-primary w-full shadow-xl rounded-2xl`, props.css]}>
{props.children} export default Card;
export function CardHeader(props) {
return <div tw="rounded-t px-6 py-4 pb-2 bg-transparent">
<div tw="flex flex-wrap items-center">
<div tw="relative w-full max-w-full flex-grow flex-1">
{ props.desc != null ? <h2 tw="text-primary text-xl font-semibold">{props.desc}</h2> : ""}
</div>
{props.children}
</div>
</div>; </div>;
} }
export function CardHeader(props) {
return <div tw="rounded-t px-6 py-4 pb-2 bg-transparent">
<div tw="flex flex-wrap items-center">
<div tw="relative w-full max-w-full flex-grow flex-1">
{ props.desc != null ? <h2 tw="text-primary text-xl font-semibold">{props.desc}</h2> : ""}
</div>
{props.children}
</div>
</div>;
}

18
Parts/Charts.js
View File

@ -1,5 +1,5 @@
import React, { useRef, useState } from "react"; import React, { useRef, useState } from "react";
import Chart from 'chart.js/auto'; import Chart from "chart.js/auto";
import Card, { CardHeader } from "./Card"; import Card, { CardHeader } from "./Card";
import { createPopper } from "@popperjs/core"; import { createPopper } from "@popperjs/core";
@ -25,16 +25,16 @@ function generateGetBoundingClientRect(x = 0, y = 0) { return () => ({ width: 0,
function GetPlacement(tooltipModel) { function GetPlacement(tooltipModel) {
switch (tooltipModel.xAlign) { switch (tooltipModel.xAlign) {
case "right": case "right":
return "left"; return "left";
case "left": case "left":
return "right"; return "right";
} }
switch (tooltipModel.yAlign) { switch (tooltipModel.yAlign) {
case "top": case "top":
return "bottom"; return "bottom";
case "bottom": case "bottom":
return "top"; return "top";
} }
} }

62
Parts/Colors.js
View File

@ -1,47 +1,47 @@
import tw, {styled} from "twin.macro" import tw, {styled} from "twin.macro"
import 'styled-components/macro' import "styled-components/macro"
export let colors = { export let colors = {
error: tw`bg-red-600`, error: tw`bg-red-600`,
accent: tw`bg-accent`, accent: tw`bg-accent`,
accent2: tw`bg-accent2`, accent2: tw`bg-accent2`,
accent3: tw`bg-accent3`, accent3: tw`bg-accent3`,
accent4: tw`bg-accent4`, accent4: tw`bg-accent4`,
accent5: tw`bg-accent5`, accent5: tw`bg-accent5`,
} }
export let colorsHover = { export let colorsHover = {
error: tw`hover:bg-red-700`, error: tw`hover:bg-red-700`,
accent: tw`hover:bg-accent-dark`, accent: tw`hover:bg-accent-dark`,
accent2: tw`hover:bg-accent2-dark`, accent2: tw`hover:bg-accent2-dark`,
accent3: tw`hover:bg-accent3-dark`, accent3: tw`hover:bg-accent3-dark`,
accent4: tw`hover:bg-accent4-dark`, accent4: tw`hover:bg-accent4-dark`,
accent5: tw`hover:bg-accent5-dark`, accent5: tw`hover:bg-accent5-dark`,
} }
export let colorsDisabled = { export let colorsDisabled = {
error: tw`disabled:bg-red-700`, error: tw`disabled:bg-red-700`,
accent: tw`disabled:bg-accent-dark`, accent: tw`disabled:bg-accent-dark`,
accent2: tw`disabled:bg-accent2-dark`, accent2: tw`disabled:bg-accent2-dark`,
accent3: tw`disabled:bg-accent3-dark`, accent3: tw`disabled:bg-accent3-dark`,
accent4: tw`disabled:bg-accent4-dark`, accent4: tw`disabled:bg-accent4-dark`,
accent5: tw`disabled:bg-accent5-dark`, accent5: tw`disabled:bg-accent5-dark`,
} }
export let textColors = { export let textColors = {
error: tw`text-red-600`, error: tw`text-red-600`,
accent: tw`text-accent`, accent: tw`text-accent`,
accent2: tw`text-accent2`, accent2: tw`text-accent2`,
accent3: tw`text-accent3`, accent3: tw`text-accent3`,
accent4: tw`text-accent4`, accent4: tw`text-accent4`,
accent5: tw`text-accent5`, accent5: tw`text-accent5`,
} }
export let textColorsHover = { export let textColorsHover = {
error: tw`hover:text-red-700`, error: tw`hover:text-red-700`,
accent: tw`hover:text-accent-dark`, accent: tw`hover:text-accent-dark`,
accent2: tw`hover:text-accent2-dark`, accent2: tw`hover:text-accent2-dark`,
accent3: tw`hover:text-accent3-dark`, accent3: tw`hover:text-accent3-dark`,
accent4: tw`hover:text-accent4-dark`, accent4: tw`hover:text-accent4-dark`,
accent5: tw`hover:text-accent5-dark`, accent5: tw`hover:text-accent5-dark`,
} }

16
Parts/DropDown.js
View File

@ -2,7 +2,7 @@ import React, { cloneElement, isValidElement, useEffect, useImperativeHandle, us
import { createPopper } from "@popperjs/core"; import { createPopper } from "@popperjs/core";
import tw, { styled } from "twin.macro" import tw, { styled } from "twin.macro"
import 'styled-components/macro' import "styled-components/macro"
import { colors, colorsDisabled, colorsHover, textColors, textColorsHover } from "./Colors"; import { colors, colorsDisabled, colorsHover, textColors, textColorsHover } from "./Colors";
const DropDownItem = styled.button(({ type }) => [ const DropDownItem = styled.button(({ type }) => [
@ -14,7 +14,7 @@ const DropDownItem = styled.button(({ type }) => [
]) ])
export { DropDownItem } export { DropDownItem }
let Dropdown = React.forwardRef(({ children, dropdownCss, onValueChanged, button, popper, placement, hover, ...props }, ref) => { let Dropdown = React.forwardRef(({ children, dropdownCss, onValueChanged, button, buttonProps, popper, placement, hover, ...props }, ref) => {
// dropdown props // dropdown props
const [overButton, setOverButton] = React.useState(false); const [overButton, setOverButton] = React.useState(false);
const [overDropDown, setOverDropDown] = React.useState(false); const [overDropDown, setOverDropDown] = React.useState(false);
@ -45,17 +45,16 @@ let Dropdown = React.forwardRef(({ children, dropdownCss, onValueChanged, button
} }
} }
useEffect(() => { useEffect(() => {
if ('ontouchend' in window) { if ("ontouchend" in window) {
document.addEventListener('touchend', handleOutsideClick) document.addEventListener("touchend", handleOutsideClick)
} else { } else {
document.addEventListener('click', handleOutsideClick) document.addEventListener("click", handleOutsideClick)
} }
// Specify how to clean up after this effect: // Specify how to clean up after this effect:
return function cleanup() { return function cleanup() {
document.removeEventListener('touchend', handleOutsideClick) document.removeEventListener("touchend", handleOutsideClick)
document.removeEventListener('click', handleOutsideClick) document.removeEventListener("click", handleOutsideClick)
}; };
}); });
@ -82,6 +81,7 @@ let Dropdown = React.forwardRef(({ children, dropdownCss, onValueChanged, button
}} }}
onMouseEnter={() => { setOverButton(true); hover && openDropdownPopover() }} onMouseEnter={() => { setOverButton(true); hover && openDropdownPopover() }}
onMouseLeave={() => { setOverButton(false); (!overDropDown && hover) && closeDropdownPopover() }} onMouseLeave={() => { setOverButton(false); (!overDropDown && hover) && closeDropdownPopover() }}
{...buttonProps}
> >
{button} {button}
</button> </button>

81
Parts/Input.js
View File

@ -1,46 +1,47 @@
import React from 'react' import React from "react"
import tw from 'twin.macro'
import 'styled-components/macro'
export default function Input({ label, title, name, id, children, ...props }) { import tw, { styled } from "twin.macro"
return ( import "styled-components/macro"
<div css={title != null && tw`my-1`}>
{title && ( export default function Input({ label, title, className, name, id, children, ...props }) {
<label {...label} css={[tw`block text-secondary text-sm font-bold mb-2`, label?.css]} htmlFor={id ?? name ?? title}> return (
{title} <div css={[title && tw`my-1`]} className={className}>
</label> {title && (
)} <label {...label} css={[tw`block text-secondary text-sm font-bold mb-2`, label?.css]} htmlFor={id ?? name ?? title}>
<input {...props} name={name || title} id={id || name || title} tw="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 " /> {title}
{children} </label>
</div> )}
) <input {...props} name={name || title} id={id || name || title} tw="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 " />
{children}
</div>
)
} }
export function TextArea({ label, title, name, id, children, ...props }) { export function TextArea({ label, title, className, name, id, children, ...props }) {
return ( return (
<div tw="my-1"> <div css={[title && tw`my-1`]} className={className}>
{title && ( {title && (
<label {...label} css={[tw`block text-secondary text-sm font-bold mb-2`, label?.css]} htmlFor={id ?? name ?? title}> <label {...label} css={[tw`block text-secondary text-sm font-bold mb-2`, label?.css]} htmlFor={id ?? name ?? title}>
{title} {title}
</label> </label>
)} )}
<textarea {...props} name={name ?? title} id={id ?? name ?? title} tw="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 " /> <textarea {...props} name={name ?? title} id={id ?? name ?? title} tw="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 " />
{children} {children}
</div> </div>
) )
} }
export function CheckBox({ label, title, name, id, children, ...props }) { export function CheckBox({ label, title, className, name, id, children, ...props }) {
return ( return (
<div tw="my-1 flex text-secondary"> <div tw="my-1 flex text-secondary" className={className}>
<input {...props} type="checkbox" name={name ?? title} id={id ?? name ?? title} tw="checked:bg-accent w-6 h-6 rounded-full bg-secondary border-secondary border-4 appearance-none cursor-pointer " /> <input {...props} type="checkbox" name={name ?? title} id={id ?? name ?? title} tw="checked:bg-accent w-6 h-6 rounded-full bg-secondary border-secondary border-4 appearance-none cursor-pointer " />
{title != null ? ( {title != null ? (
<label {...label} htmlFor={id ?? name ?? title} css={[tw`block font-bold px-2`, label?.css]}> <label {...label} htmlFor={id ?? name ?? title} css={[tw`block font-bold px-2`, label?.css]}>
{title} {title}
</label> </label>
) : null ) : null
} }
{children} {children}
</div > </div >
) )
} }

7
Parts/Layout.js
View File

@ -1,6 +1,6 @@
import React from 'react' import React from "react"
import tw, {styled} from "twin.macro" import tw, {styled} from "twin.macro"
import 'styled-components/macro' import "styled-components/macro"
const Full = styled.div(tw`w-full lg:px-2 py-2`) const Full = styled.div(tw`w-full lg:px-2 py-2`)
export {Full} export {Full}
@ -11,6 +11,9 @@ export {Half}
const Quarter = styled.div(tw`w-full lg:w-6/12 xl:w-3/12 lg:px-2 py-2 `) const Quarter = styled.div(tw`w-full lg:w-6/12 xl:w-3/12 lg:px-2 py-2 `)
export {Quarter} export {Quarter}
const Sixth = styled.div(tw`w-full lg:w-1/5 xl:w-1/6 lg:px-2 py-2 `)
export {Sixth}
const Third = styled.div(tw`w-full lg:w-4/12 lg:px-2 py-2 `) const Third = styled.div(tw`w-full lg:w-4/12 lg:px-2 py-2 `)
export {Third} export {Third}

22
Parts/Modal.js
View File

@ -1,17 +1,17 @@
import React from 'react' import React from "react"
import { Third } from './Layout' import { Third } from "./Layout"
import tw, { styled } from "twin.macro" import tw, { styled } from "twin.macro"
import 'styled-components/macro' import "styled-components/macro"
function Modal({ isOpen, onBackdropClick, ...props }) { function Modal({ isOpen, onBackdropClick, ...props }) {
if (isOpen) { if (isOpen) {
return <div onClick={onBackdropClick} tw="fixed flex flex-col justify-center items-center inset-0 bg-gray-800 bg-opacity-75"> return <div onClick={onBackdropClick} tw="fixed flex flex-col justify-center items-center inset-0 bg-gray-800 bg-opacity-75 z-50">
<Third {...props} onClick={e=>e.stopPropagation()}> <Third {...props} onClick={e=>e.stopPropagation()}>
{props.children} {props.children}
</Third> </Third>
</div> </div>
} }
return null; return null;
} }
export default Modal export default Modal

102
Parts/Pagination.js
View File

@ -1,62 +1,62 @@
import Button from "./Button"; import Button from "./Button";
import tw, { styled } from "twin.macro" import tw, { styled } from "twin.macro"
import 'styled-components/macro' import "styled-components/macro"
function CustomBtn({children, setPage, currentPage, page, css, ...props}){ function CustomBtn({children, setPage, currentPage, page, css, ...props}){
console.log(css) console.log(css)
return <Button onClick={()=>{setPage(page??children); console.log(page??children)}} css={[tw`rounded-none mx-0`, currentPage==children && tw`bg-accent`, css]} {...props}>{children}</Button> return <Button onClick={()=>setPage(Number(page??children))} css={[tw`rounded-none mx-0`, currentPage==children && tw`bg-accent`, css]} {...props}>{children}</Button>
} }
export default function Pagination({ currentPage, maxPages, setPage, ...props }) { export default function Pagination({ currentPage, maxPages, setPage, ...props }) {
function RenderButtons() { function RenderButtons() {
switch (maxPages) { switch (maxPages) {
case 1: case 1:
return <CustomBtn tw="rounded-xl" setPage={setPage} currentPage={currentPage}>1</CustomBtn>; return <CustomBtn tw="rounded-xl" setPage={setPage} currentPage={currentPage}>1</CustomBtn>;
case 2: case 2:
return <> return <>
<CustomBtn tw="rounded-l-xl" setPage={setPage} currentPage={currentPage}>1</CustomBtn> <CustomBtn tw="rounded-l-xl" setPage={setPage} currentPage={currentPage}>1</CustomBtn>
<CustomBtn tw="rounded-r-xl" setPage={setPage} currentPage={currentPage}>2</CustomBtn> <CustomBtn tw="rounded-r-xl" setPage={setPage} currentPage={currentPage}>2</CustomBtn>
</> </>
case 3: case 3:
return <> return <>
<CustomBtn tw="rounded-l-xl" setPage={setPage} currentPage={currentPage}>1</CustomBtn> <CustomBtn tw="rounded-l-xl" setPage={setPage} currentPage={currentPage}>1</CustomBtn>
<CustomBtn setPage={setPage} currentPage={currentPage}>2</CustomBtn> <CustomBtn setPage={setPage} currentPage={currentPage}>2</CustomBtn>
<CustomBtn tw="rounded-r-xl" setPage={setPage} currentPage={currentPage}>3</CustomBtn> <CustomBtn tw="rounded-r-xl" setPage={setPage} currentPage={currentPage}>3</CustomBtn>
</> </>
case 4: case 4:
return <> return <>
<CustomBtn tw="rounded-l-xl" setPage={setPage} currentPage={currentPage}>1</CustomBtn> <CustomBtn tw="rounded-l-xl" setPage={setPage} currentPage={currentPage}>1</CustomBtn>
<CustomBtn setPage={setPage} currentPage={currentPage}>2</CustomBtn> <CustomBtn setPage={setPage} currentPage={currentPage}>2</CustomBtn>
<CustomBtn setPage={setPage} currentPage={currentPage}>3</CustomBtn> <CustomBtn setPage={setPage} currentPage={currentPage}>3</CustomBtn>
<CustomBtn tw="rounded-r-xl" setPage={setPage} currentPage={currentPage}>4</CustomBtn> <CustomBtn tw="rounded-r-xl" setPage={setPage} currentPage={currentPage}>4</CustomBtn>
</> </>
case 5: case 5:
return <> return <>
<CustomBtn tw="rounded-l-xl" setPage={setPage} currentPage={currentPage}>1</CustomBtn> <CustomBtn tw="rounded-l-xl" setPage={setPage} currentPage={currentPage}>1</CustomBtn>
<CustomBtn setPage={setPage} currentPage={currentPage}>2</CustomBtn> <CustomBtn setPage={setPage} currentPage={currentPage}>2</CustomBtn>
<CustomBtn setPage={setPage} currentPage={currentPage}>3</CustomBtn> <CustomBtn setPage={setPage} currentPage={currentPage}>3</CustomBtn>
<CustomBtn setPage={setPage} currentPage={currentPage}>4</CustomBtn> <CustomBtn setPage={setPage} currentPage={currentPage}>4</CustomBtn>
<CustomBtn tw="rounded-r-xl" setPage={setPage} currentPage={currentPage}>5</CustomBtn> <CustomBtn tw="rounded-r-xl" setPage={setPage} currentPage={currentPage}>5</CustomBtn>
</> </>
default: { default: {
return <> return <>
{currentPage > 3 && <CustomBtn css={[tw`rounded-l-xl`]} page={1} setPage={setPage} currentPage={currentPage}>&lt;</CustomBtn>} {currentPage > 3 && <CustomBtn css={[tw`rounded-l-xl`]} page={1} setPage={setPage} currentPage={currentPage}>&lt;</CustomBtn>}
<CustomBtn css={[currentPage <= 3 &&tw`rounded-l-xl`]} setPage={setPage} currentPage={currentPage}>{Math.max(currentPage-2,1)}</CustomBtn> <CustomBtn css={[currentPage <= 3 &&tw`rounded-l-xl`]} setPage={setPage} currentPage={currentPage}>{Math.max(currentPage-2,1)}</CustomBtn>
<CustomBtn setPage={setPage} currentPage={currentPage}>{Math.max(currentPage-2,1)+1}</CustomBtn> <CustomBtn setPage={setPage} currentPage={currentPage}>{Math.max(currentPage-2,1)+1}</CustomBtn>
<CustomBtn setPage={setPage} currentPage={currentPage}>{Math.max(currentPage-2,1)+2}</CustomBtn> <CustomBtn setPage={setPage} currentPage={currentPage}>{Math.max(currentPage-2,1)+2}</CustomBtn>
{(maxPages - currentPage) >= 1 && <CustomBtn css={[(Math.max(currentPage-2,1)+3)==maxPages && tw`rounded-r-xl`]} setPage={setPage} currentPage={currentPage}>{Math.max(currentPage-2,1)+3}</CustomBtn>} {(maxPages - currentPage) >= 1 && <CustomBtn css={[(Math.max(currentPage-2,1)+3)==maxPages && tw`rounded-r-xl`]} setPage={setPage} currentPage={currentPage}>{Math.max(currentPage-2,1)+3}</CustomBtn>}
{(maxPages - currentPage) >= 2 && <CustomBtn css={[(Math.max(currentPage-2,1)+4)==maxPages && tw`rounded-r-xl`]} tw="rounded-r-xl" setPage={setPage} currentPage={currentPage}>{Math.max(currentPage-2,1)+4}</CustomBtn>} {(maxPages - currentPage) >= 2 && <CustomBtn css={[(Math.max(currentPage-2,1)+4)==maxPages && tw`rounded-r-xl`]} tw="rounded-r-xl" setPage={setPage} currentPage={currentPage}>{Math.max(currentPage-2,1)+4}</CustomBtn>}
{(maxPages - currentPage) >= 3 && <CustomBtn css={[tw`rounded-r-xl`]} page={maxPages} setPage={setPage} currentPage={currentPage}>&gt;</CustomBtn>} {(maxPages - currentPage) >= 3 && <CustomBtn css={[tw`rounded-r-xl`]} page={maxPages} setPage={setPage} currentPage={currentPage}>&gt;</CustomBtn>}
</> </>
}
}
} }
return ( }
<div {...props}> }
<RenderButtons />
</div> return (
) <div {...props}>
<RenderButtons />
</div>
)
} }

32
Parts/RangeSlider.js
View File

@ -2,25 +2,25 @@ import React, { useState, useEffect, useRef } from "react";
import styles from "./RangeSlider.scss" import styles from "./RangeSlider.scss"
import tw from 'twin.macro' import tw from "twin.macro"
import 'styled-components/macro' import "styled-components/macro"
export function RangeSlider({ value=0, rangeType="", onChange, min=0, max=10, right = true, ...props }) { export function RangeSlider({ value=0, rangeType="", onChange, min=0, max=10, right = true, ...props }) {
let ref = useRef(null) let ref = useRef(null)
useEffect(() => { useEffect(() => {
if (ref.current) { if (ref.current) {
ref.current.style.left = (((Math.max(Math.min(value-min, max-min), 0)) * 100) / ((max-min)+2)) + `%`; ref.current.style.left = (((Math.max(Math.min(value-min, max-min), 0)) * 100) / ((max-min)+2)) + "%";
} }
}) })
return ( return (
<div tw="flex flex-col py-2" {...props}> <div tw="flex flex-col py-2" {...props}>
<div className="rs-label w-full" ref={ref}> <div className="rs-label w-full" ref={ref}>
{!right ? (rangeType + "" + value) : (value + "" + rangeType)} {!right ? (rangeType + "" + value) : (value + "" + rangeType)}
</div> </div>
<input type="range" className="rs-range relative range" min={min} max={max} value={value} onChange={({target: {value: radius}})=>onChange(radius)} /> <input type="range" className="rs-range relative range" min={min} max={max} value={value} onChange={({target: {value: radius}})=>onChange(radius)} />
</div> </div>
); );
} }

2
Parts/Table.js
View File

@ -1,6 +1,6 @@
import React from "react"; import React from "react";
import tw, {styled} from "twin.macro" import tw, {styled} from "twin.macro"
import 'styled-components/macro' import "styled-components/macro"
export function Table(props) { export function Table(props) {
return <div tw="block w-full overflow-x-auto text-secondary"> return <div tw="block w-full overflow-x-auto text-secondary">

24
Parts/Text.js
View File

@ -1,15 +1,15 @@
import React from 'react' import React from "react"
import tw, {styled} from "twin.macro" import tw, {styled} from "twin.macro"
import 'styled-components/macro' import "styled-components/macro"
import { textColors, textColorsHover } from './Colors' import { textColors, textColorsHover } from "./Colors"
function Text() { function Text() {
return ( return (
<div> <div>
</div> </div>
) )
} }
const Divider = styled.hr(tw`my-2 md:min-w-full border-secondary`) const Divider = styled.hr(tw`my-2 md:min-w-full border-secondary`)
@ -21,12 +21,12 @@ export {DividerGreen}
const ClickableText = styled.button(({ type }) => [ const ClickableText = styled.button(({ type }) => [
// The common button styles added with the tw import // The common button styles added with the tw import
tw`text-secondary hover:text-primary font-semibold cursor-pointer`, tw`text-secondary hover:text-primary font-semibold cursor-pointer`,
// Use props to conditionally style your components // Use props to conditionally style your components
textColors[type], textColorsHover[type] textColors[type], textColorsHover[type]
]) ])
export {ClickableText} export {ClickableText}
export default Text export default Text

6
globalStyle.js
View File

@ -1,6 +1,6 @@
import React, { useState } from 'react' import React, { useState } from "react"
import { createGlobalStyle } from 'styled-components' import { createGlobalStyle } from "styled-components"
import tw, { theme, GlobalStyles as BaseStyles } from 'twin.macro' import tw, { theme, GlobalStyles as BaseStyles } from "twin.macro"
const CustomStyles = createGlobalStyle` const CustomStyles = createGlobalStyle`
body { body {