Skydust/psychartherapie-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Linted the whole project with eslint

Browse Source
This commit was merged in pull request #3.
This commit is contained in:
Skydust
2023-08-31 19:42:15 +02:00
parent cbc4d839d0
commit 7be98e1793
29 changed files with 2931 additions and 1686 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
tina/fields/color.tsx
View File

@@ -2,51 +2,51 @@ import * as React from "react";
import { wrapFieldsWithMeta } from "tinacms";
export const colorOptions = [
"blue",
"teal",
"green",
"yellow",
"orange",
"red",
"pink",
"purple",
"white",
"blue",
"teal",
"green",
"yellow",
"orange",
"red",
"pink",
"purple",
"white"
];
export const ColorPickerInput = wrapFieldsWithMeta(({ input }) => {
const inputClasses = {
blue: "bg-blue-500 border-blue-600",
teal: "bg-teal-500 border-teal-600",
green: "bg-green-500 border-green-600",
yellow: "bg-yellow-500 border-yellow-600",
orange: "bg-orange-500 border-orange-600",
red: "bg-red-500 border-red-600",
pink: "bg-pink-500 border-pink-600",
purple: "bg-purple-500 border-purple-600",
white: "bg-white border-gray-150",
};
const inputClasses = {
blue: "bg-blue-500 border-blue-600",
teal: "bg-teal-500 border-teal-600",
green: "bg-green-500 border-green-600",
yellow: "bg-yellow-500 border-yellow-600",
orange: "bg-orange-500 border-orange-600",
red: "bg-red-500 border-red-600",
pink: "bg-pink-500 border-pink-600",
purple: "bg-purple-500 border-purple-600",
white: "bg-white border-gray-150"
};
return (
<>
<input type="text" id={input.name} className="hidden" {...input} />
<div className="flex gap-2 flex-wrap">
{colorOptions.map((color) => {
return (
<button
className={`w-9 h-9 rounded-full shadow border ${
inputClasses[color]
} ${
input.value === color
? "ring-[3px] ring-offset-2 ring-blue-400"
: ""
}`}
onClick={() => {
input.onChange(color);
}}
></button>
);
})}
</div>
</>
);
return (
<>
<input type="text" id={ input.name } className="hidden" { ...input } />
<div className="flex gap-2 flex-wrap">
{ colorOptions.map((color) => {
return (
<button
className={ `w-9 h-9 rounded-full shadow border ${
inputClasses[color]
} ${
input.value === color
? "ring-[3px] ring-offset-2 ring-blue-400"
: ""
}` }
onClick={ () => {
input.onChange(color);
} }
/>
);
}) }
</div>
</>
);
});