25 lines
992 B
TypeScript
25 lines
992 B
TypeScript
import React from "react";
|
|
import { wrapFieldsWithMeta } from "tinacms";
|
|
|
|
export const TextInputWithCount = (max: number, isTextArea = false) =>
|
|
wrapFieldsWithMeta(({ input }) => (
|
|
<div className="flex flex-col gap-2">
|
|
{isTextArea ? (
|
|
<textarea
|
|
className="focus:shadow-outline block min-h-40 w-full resize-y rounded-md border border-gray-200 px-3 py-2 text-base text-gray-600 shadow-inner focus:border-blue-500 focus:text-gray-900"
|
|
{...input}
|
|
/>
|
|
) : (
|
|
<input
|
|
className="focus:shadow-outline block w-full rounded-md border border-gray-200 bg-white px-3 py-2 text-base text-gray-600 shadow-inner transition-all duration-150 ease-out placeholder:text-gray-300 focus:border-blue-500 focus:text-gray-900 focus:outline-none"
|
|
{...input}
|
|
/>
|
|
)}
|
|
<p
|
|
className={input.value.length > max ? "text-red-500" : "text-gray-500"}
|
|
>
|
|
{input.value.length}/{max}
|
|
</p>
|
|
</div>
|
|
));
|