wip: Working on tailwind prefix
This commit is contained in:
joostdecock
parent
54d8550683
commit
6b8eea2724
16 changed files with 465 additions and 304 deletions
|
|
@ -30,7 +30,7 @@ export const _Tab = ({
|
|||
setActiveTab, // Method to set the active tab
|
||||
}) => (
|
||||
<button
|
||||
className={`text-lg font-bold capitalize daisy-tab daisy-tab-bordered grow
|
||||
className={`tw-text-lg tw-font-bold tw-capitalize tw-daisy-tab tw-daisy-tab-bordered tw-grow
|
||||
${activeTab === id ? 'daisy-tab-active' : ''}`}
|
||||
onClick={() => setActiveTab(id)}
|
||||
>
|
||||
|
|
@ -51,34 +51,34 @@ export const FormControl = ({
|
|||
if (labelBR && !labelBL) labelBL = <span></span>
|
||||
|
||||
const topLabelChildren = (
|
||||
<span className="daisy-label-text text-sm lg:text-base font-bold mb-1 text-inherit">
|
||||
<span className="tw-daisy-label-text tw-text-sm lg:tw-text-base tw-font-bold tw-mb-1 tw-text-inherit">
|
||||
{label}
|
||||
</span>
|
||||
)
|
||||
const bottomLabelChildren = (
|
||||
<>
|
||||
{labelBL ? <span className="daisy-label-text-alt">{labelBL}</span> : null}
|
||||
{labelBR ? <span className="daisy-label-text-alt">{labelBR}</span> : null}
|
||||
{labelBL ? <span className="tw-daisy-label-text-alt">{labelBL}</span> : null}
|
||||
{labelBR ? <span className="tw-daisy-label-text-alt">{labelBR}</span> : null}
|
||||
</>
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="daisy-form-control w-full mt-2">
|
||||
<div className="tw-daisy-form-control tw-w-full tw-mt-2">
|
||||
{forId ? (
|
||||
<label className="daisy-label pb-0" htmlFor={forId}>
|
||||
<label className="tw-daisy-label tw-pb-0" htmlFor={forId}>
|
||||
{topLabelChildren}
|
||||
</label>
|
||||
) : (
|
||||
<div className="daisy-label pb-0">{topLabelChildren}</div>
|
||||
<div className="tw-daisy-label tw-pb-0">{topLabelChildren}</div>
|
||||
)}
|
||||
{children}
|
||||
{labelBL || labelBR ? (
|
||||
forId ? (
|
||||
<label className="daisy-label" htmlFor={forId}>
|
||||
<label className="tw-daisy-label" htmlFor={forId}>
|
||||
{bottomLabelChildren}
|
||||
</label>
|
||||
) : (
|
||||
<div className="daisy-label">{bottomLabelChildren}</div>
|
||||
<div className="tw-daisy-label">{bottomLabelChildren}</div>
|
||||
)
|
||||
) : null}
|
||||
</div>
|
||||
|
|
@ -97,13 +97,13 @@ export const ButtonFrame = ({
|
|||
}) => (
|
||||
<button
|
||||
className={`
|
||||
daisy-btn daisy-btn-ghost daisy-btn-secondary
|
||||
w-full ${dense ? 'mt-1 py-0 daisy-btn-sm' : 'mt-2 py-4 h-auto content-start'}
|
||||
border-2 border-secondary text-left bg-opacity-20
|
||||
${accordion ? 'hover:bg-transparent' : 'hover:bg-secondary hover:bg-opacity-10'}
|
||||
hover:border-secondary hover:border-solid hover:border-2
|
||||
${active ? 'border-solid' : 'border-dotted'}
|
||||
${active && !accordion ? 'bg-secondary' : 'bg-transparent'}
|
||||
tw-daisy-btn tw-daisy-btn-ghost tw-daisy-btn-secondary
|
||||
tw-w-full ${dense ? 'tw-mt-1 tw-py-0 tw-daisy-btn-sm' : 'tw-mt-2 tw-py-4 tw-h-auto tw-content-start'}
|
||||
tw-border-2 tw-border-secondary tw-text-left tw-bg-opacity-20
|
||||
${accordion ? 'hover:tw-bg-transparent' : 'hover:tw-bg-secondary hover:tw-bg-opacity-10'}
|
||||
hover:tw-border-secondary hover:tw-border-solid hover:tw-border-2
|
||||
${active ? 'tw-border-solid' : 'tw-border-dotted'}
|
||||
${active && !accordion ? 'tw-bg-secondary' : 'tw-bg-transparent'}
|
||||
`}
|
||||
onClick={onClick}
|
||||
>
|
||||
|
|
@ -136,7 +136,7 @@ export const NumberInput = ({
|
|||
placeholder={placeholder}
|
||||
value={current}
|
||||
onChange={(evt) => update(evt.target.value)}
|
||||
className={`daisy-input w-full daisy-input-bordered ${
|
||||
className={`tw-daisy-input tw-w-full tw-daisy-input-bordered ${
|
||||
current === original ? 'input-secondary' : valid(current) ? 'input-success' : 'input-error'
|
||||
}`}
|
||||
{...{ max, min, step }}
|
||||
|
|
@ -165,7 +165,7 @@ export const StringInput = ({
|
|||
placeholder={placeholder}
|
||||
value={current}
|
||||
onChange={(evt) => update(evt.target.value)}
|
||||
className={`daisy-input w-full daisy-input-bordered ${
|
||||
className={`tw-daisy-input tw-w-full tw-daisy-input-bordered ${
|
||||
current === original
|
||||
? 'daisy-input-secondary'
|
||||
: valid(current)
|
||||
|
|
@ -216,7 +216,7 @@ export const PasswordInput = ({
|
|||
forId={id}
|
||||
labelBR={
|
||||
<button
|
||||
className="btn btn-primary btn-ghost btn-xs -mt-2"
|
||||
className="tw-btn tw-btn-primary tw-btn-ghost tw-btn-xs tw--mt-2"
|
||||
onClick={() => setReveal(!reveal)}
|
||||
>
|
||||
{reveal ? 'Hide Password' : 'Reveal Password'}
|
||||
|
|
@ -229,7 +229,7 @@ export const PasswordInput = ({
|
|||
placeholder={placeholder}
|
||||
value={current}
|
||||
onChange={(evt) => update(evt.target.value)}
|
||||
className={`daisy-input w-full daisy-input-bordered ${
|
||||
className={`tw-daisy-input tw-w-full tw-daisy-input-bordered ${
|
||||
valid(current) ? 'input-success' : 'input-error'
|
||||
}`}
|
||||
{...extraProps}
|
||||
|
|
@ -259,12 +259,12 @@ export const EmailInput = ({
|
|||
placeholder={placeholder}
|
||||
value={current}
|
||||
onChange={(evt) => update(evt.target.value)}
|
||||
className={`daisy-input w-full daisy-input-bordered ${
|
||||
className={`tw-daisy-input tw-w-full tw-daisy-input-bordered ${
|
||||
current === original
|
||||
? 'daisy-input-secondary'
|
||||
? 'tw-daisy-input-secondary'
|
||||
: valid(current)
|
||||
? 'daisy-input-success'
|
||||
: 'daisy-input-error'
|
||||
? 'tw-daisy-input-success'
|
||||
: 'tw-daisy-input-error'
|
||||
}`}
|
||||
/>
|
||||
</FormControl>
|
||||
|
|
@ -284,7 +284,7 @@ export const DesignInput = ({
|
|||
<FormControl label={label} forId={id}>
|
||||
<select
|
||||
id={id}
|
||||
className="daisy-select daisy-select-bordered w-full"
|
||||
className="tw-daisy-select tw-daisy-select-bordered tw-w-full"
|
||||
onChange={(evt) => update(evt.target.value)}
|
||||
value={current}
|
||||
>
|
||||
|
|
@ -353,7 +353,7 @@ export const ImageInput = ({
|
|||
return (
|
||||
<FormControl label={label}>
|
||||
<div
|
||||
className="bg-base-100 w-full h-36 mb-2 mx-auto flex flex-col items-center text-center justify-center"
|
||||
className="tw-bg-base-100 tw-w-full tw-h-36 tw-mb-2 tw-mx-auto tw-flex tw-flex-col tw-items-center tw-text-center tw-justify-center"
|
||||
style={{
|
||||
backgroundImage: `url(${
|
||||
uploadedId ? cloudflareImageUrl({ type: 'public', id: uploadedId }) : current
|
||||
|
|
@ -364,7 +364,7 @@ export const ImageInput = ({
|
|||
}}
|
||||
>
|
||||
<button
|
||||
className="daisy-btn daisy-btn-neutral daisy-btn-circle opacity-50 hover:opacity-100"
|
||||
className="tw-daisy-btn tw-daisy-btn-neutral tw-daisy-btn-circle tw-opacity-50 hover:tw-opacity-100"
|
||||
onClick={() => update(original)}
|
||||
>
|
||||
<ResetIcon />
|
||||
|
|
@ -378,30 +378,32 @@ export const ImageInput = ({
|
|||
<div
|
||||
{...getRootProps()}
|
||||
className={`
|
||||
flex rounded-lg w-full flex-col items-center justify-center
|
||||
lg:p-6 lg:border-4 lg:border-secondary lg:border-dashed
|
||||
tw-flex tw-rounded-lg tw-w-full tw-flex-col tw-items-center tw-justify-center
|
||||
lg:tw-p-6 lg:tw-border-4 lg:tw-border-secondary lg:tw-border-dashed
|
||||
`}
|
||||
>
|
||||
<input {...getInputProps()} />
|
||||
<p className="hidden lg:block p-0 m-0">Drag and drop and image here</p>
|
||||
<p className="hidden lg:block p-0 my-2">or</p>
|
||||
<button className={`daisy-btn daisy-btn-secondary daisy-btn-outline mt-4 px-8`}>
|
||||
<p className="tw-hidden lg:tw-block tw-p-0 tw-m-0">Drag and drop and image here</p>
|
||||
<p className="tw-hidden lg:tw-block tw-p-0 tw-my-2">or</p>
|
||||
<button
|
||||
className={`tw-daisy-btn tw-daisy-btn-secondary tw-daisy-btn-outline tw-mt-4 tw-px-8`}
|
||||
>
|
||||
Select an image to use
|
||||
</button>
|
||||
</div>
|
||||
<p className="p-0 my-2 text-center">or</p>
|
||||
<div className="flex flex-row items-center">
|
||||
<p className="tw-p-0 tw-my-2 tw-text-center">or</p>
|
||||
<div className="tw-flex tw-flex-row tw-items-center">
|
||||
<input
|
||||
id={id}
|
||||
type="url"
|
||||
className="daisy-input daisy-input-secondary w-full daisy-input-bordered"
|
||||
className="tw-daisy-input tw-daisy-input-secondary tw-w-full tw-daisy-input-bordered"
|
||||
placeholder="Paste an image URL here"
|
||||
value={current}
|
||||
onChange={active ? (evt) => setUrl(evt.target.value) : (evt) => update(evt.target.value)}
|
||||
/>
|
||||
{active && (
|
||||
<button
|
||||
className="daisy-btn daisy-btn-secondary ml-2 capitalize"
|
||||
className="tw-daisy-btn tw-daisy-btn-secondary tw-ml-2 tw-capitalize"
|
||||
disabled={!url || url.length < 1}
|
||||
onClick={() => upload(url, true)}
|
||||
>
|
||||
|
|
@ -435,10 +437,10 @@ export const ListInput = ({
|
|||
<FormControl label={label}>
|
||||
{list.map((item, i) => (
|
||||
<ButtonFrame key={i} active={item.val === current} onClick={() => update(item.val)}>
|
||||
<div className="w-full flex flex-col gap-2">
|
||||
<div className="w-full text-lg leading-5">{item.label}</div>
|
||||
<div className="tw-w-full tw-flex tw-flex-col tw-gap-2">
|
||||
<div className="tw-w-full tw-text-lg tw-leading-5">{item.label}</div>
|
||||
{item.desc ? (
|
||||
<div className="w-full text-normal font-normal normal-case pt-1 leading-5">
|
||||
<div className="tw-w-full tw-text-normal tw-font-normal tw-normal-case tw-pt-1 tw-leading-5">
|
||||
{item.desc}
|
||||
</div>
|
||||
) : null}
|
||||
|
|
@ -467,11 +469,11 @@ export const MarkdownInput = ({
|
|||
>
|
||||
<Tabs tabs={['edit', 'preview']}>
|
||||
<Tab key="edit">
|
||||
<div className="flex flex-row items-center mt-2">
|
||||
<div className="tw-flex tw-flex-row tw-items-center tw-mt-2">
|
||||
<textarea
|
||||
id={id}
|
||||
rows="5"
|
||||
className="daisy-textarea daisy-textarea-bordered daisy-textarea-lg w-full"
|
||||
className="tw-daisy-textarea tw-daisy-textarea-bordered tw-daisy-textarea-lg tw-w-full"
|
||||
value={current}
|
||||
placeholder={placeholder}
|
||||
onChange={(evt) => update(evt.target.value)}
|
||||
|
|
@ -527,11 +529,15 @@ export const MeasieInput = ({
|
|||
if (valid === true) {
|
||||
inputClasses = 'daisy-input-success'
|
||||
const val = `${validatedVal}${isDegree ? '°' : imperial ? '"' : 'cm'}`
|
||||
bottomLeftLabel = <span className="font-medium text-base text-success -mt-2 block">{val}</span>
|
||||
bottomLeftLabel = (
|
||||
<span className="tw-font-medium tw-text-base tw-text-success tw--mt-2 tw-block">{val}</span>
|
||||
)
|
||||
} else if (valid === false) {
|
||||
inputClasses = 'daisy-input-error'
|
||||
bottomLeftLabel = (
|
||||
<span className="font-medium text-error text-base -mt-2 block">¯\_(ツ)_/¯</span>
|
||||
<span className="tw-font-medium tw-text-error tw-text-base tw--mt-2 tw-block">
|
||||
¯\_(ツ)_/¯
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
@ -552,7 +558,7 @@ export const MeasieInput = ({
|
|||
placeholder={placeholder}
|
||||
value={localVal}
|
||||
onChange={(evt) => localUpdate(evt.target.value)}
|
||||
className={`daisy-input w-full daisy-input-bordered ${inputClasses}`}
|
||||
className={`tw-daisy-input tw-w-full tw-daisy-input-bordered ${inputClasses}`}
|
||||
/>
|
||||
</FormControl>
|
||||
)
|
||||
|
|
@ -590,9 +596,9 @@ export const FileInput = ({
|
|||
if (current)
|
||||
return (
|
||||
<FormControl label={label} isValid={valid(current)}>
|
||||
<div className="bg-base-100 w-full h-36 mb-2 mx-auto flex flex-col items-center text-center justify-center">
|
||||
<div className="tw-bg-base-100 tw-w-full tw-h-36 tw-mb-2 tw-mx-auto tw-flex tw-flex-col tw-items-center tw-text-center tw-justify-center">
|
||||
<button
|
||||
className="daisy-btn daisy-btn-neutral daisy-btn-circle opacity-50 hover:opacity-100"
|
||||
className="tw-daisy-btn tw-daisy-btn-neutral tw-daisy-btn-circle tw-opacity-50 hover:tw-opacity-100"
|
||||
onClick={() => update(original)}
|
||||
>
|
||||
<ResetIcon />
|
||||
|
|
@ -609,13 +615,15 @@ export const FileInput = ({
|
|||
<div
|
||||
{...getRootProps()}
|
||||
className={`
|
||||
flex rounded-lg w-full flex-col items-center justify-center
|
||||
sm:p-6 sm:border-4 sm:border-secondary sm:border-dashed
|
||||
tw-flex tw-rounded-lg tw-w-full tw-flex-col tw-items-center tw-justify-center
|
||||
sm:tw-p-6 sm:tw-border-4 sm:tw-border-secondary sm:tw-border-dashed
|
||||
`}
|
||||
>
|
||||
<input {...getInputProps()} />
|
||||
<p className="hidden lg:block p-0 m-0">Drag and drop your file here</p>
|
||||
<button className={`daisy-btn daisy-btn-secondary daisy-btn-outline mt-4 px-8`}>
|
||||
<p className="tw-hidden lg:tw-block tw-p-0 tw-m-0">Drag and drop your file here</p>
|
||||
<button
|
||||
className={`tw-daisy-btn tw-daisy-btn-secondary tw-daisy-btn-outline tw-mt-4 tw-px-8`}
|
||||
>
|
||||
Browse...
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -654,7 +662,7 @@ export const ToggleInput = ({
|
|||
type="checkbox"
|
||||
value={current}
|
||||
onChange={() => update(list.indexOf(current) === 0 ? list[1] : list[0])}
|
||||
className="daisy-toggle my-3 daisy-toggle-primary"
|
||||
className="tw-daisy-toggle tw-my-3 tw-daisy-toggle-primary"
|
||||
checked={list.indexOf(current) === 0 ? true : false}
|
||||
/>
|
||||
</FormControl>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue