Updated channel editor & fixes
This commit is contained in:
Sacha Weatherstone
@@ -14,7 +14,7 @@ export const Blur = ({
|
||||
}: BlurProps): JSX.Element => {
|
||||
return (
|
||||
<div
|
||||
className={`absolute inset-0 z-10 w-full h-full transition-opacity ${
|
||||
className={`absolute inset-0 z-20 w-full h-full transition-opacity ${
|
||||
disableOnMd ? 'md:hidden' : 'test'
|
||||
} ${className}`}
|
||||
{...props}
|
||||
|
||||
@@ -65,3 +65,49 @@ export const Button = ({
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
// import React from 'react';
|
||||
|
||||
// type DefaultButtonProps = JSX.IntrinsicElements['button'];
|
||||
|
||||
// export interface ButtonProps extends DefaultButtonProps {
|
||||
// icon?: JSX.Element;
|
||||
// circle?: boolean;
|
||||
// active?: boolean;
|
||||
// border?: boolean;
|
||||
// confirmAction?: () => void;
|
||||
// rightIcon?: React.ReactNode;
|
||||
// leftIcon?: React.ReactNode;
|
||||
// nested?: boolean;
|
||||
// }
|
||||
|
||||
// export const Button = ({
|
||||
// rightIcon,
|
||||
// leftIcon,
|
||||
// children,
|
||||
// nested,
|
||||
// ...props
|
||||
// }: ButtonProps): JSX.Element => {
|
||||
// return (
|
||||
// <button
|
||||
// className={`select-none flex hover:bg-gray-300 dark:hover:bg-gray-500 rounded-md cursor-pointer active:scale-95 dark:text-white ${
|
||||
// nested
|
||||
// ? 'hover:bg-gray-300 dark:hover:bg-gray-500 dark:bg-gray-600 bg-gray-200'
|
||||
// : 'dark:bg-gray-700 bg-gray-200'
|
||||
// }`}
|
||||
// {...props}
|
||||
// >
|
||||
// {leftIcon && (
|
||||
// <div className="flex py-1 bg-gray-00 rounded-l-md">
|
||||
// <div className="mx-2 my-auto">{leftIcon}</div>
|
||||
// </div>
|
||||
// )}
|
||||
// <div className="flex px-4 py-2 space-x-2 leading-4">{children}</div>
|
||||
// {rightIcon && (
|
||||
// <div className="flex py-2 bg-gray-200 rounded-r-md">
|
||||
// <div className="mx-2 my-auto">{rightIcon}</div>
|
||||
// </div>
|
||||
// )}
|
||||
// </button>
|
||||
// );
|
||||
// };
|
||||
|
||||
@@ -4,7 +4,7 @@ type DefaultDivProps = JSX.IntrinsicElements['div'];
|
||||
|
||||
interface CardProps extends DefaultDivProps {
|
||||
title: string;
|
||||
description: string;
|
||||
description: string | JSX.Element;
|
||||
buttons?: JSX.Element;
|
||||
lgPlaceholder?: JSX.Element;
|
||||
}
|
||||
@@ -20,7 +20,7 @@ export const Card = ({
|
||||
}: CardProps): JSX.Element => {
|
||||
return (
|
||||
<div
|
||||
className={`flex flex-col flex-auto text-white border shadow-md select-none dark:bg-primaryDark dark:border-transparent rounded-3xl ${className}`}
|
||||
className={`flex flex-col flex-auto dark:text-white border shadow-md select-none dark:bg-primaryDark dark:border-transparent rounded-3xl ${className}`}
|
||||
{...props}
|
||||
>
|
||||
<div className="flex items-center justify-between mx-10 mt-10">
|
||||
|
||||
@@ -0,0 +1,49 @@
|
||||
import React from 'react';
|
||||
|
||||
import { FiCheck } from 'react-icons/fi';
|
||||
|
||||
type DefaulButtonProps = JSX.IntrinsicElements['button'];
|
||||
|
||||
export interface IconButtonProps extends DefaulButtonProps {
|
||||
icon: React.ReactNode;
|
||||
confirmAction?: () => void;
|
||||
}
|
||||
|
||||
export const IconButton = ({
|
||||
icon,
|
||||
confirmAction,
|
||||
...props
|
||||
}: IconButtonProps): JSX.Element => {
|
||||
const [hasConfirmed, setHasConfirmed] = React.useState(false);
|
||||
|
||||
const handleConfirm = (): void => {
|
||||
if (confirmAction) {
|
||||
if (hasConfirmed) {
|
||||
void confirmAction();
|
||||
}
|
||||
setHasConfirmed(true);
|
||||
setTimeout(() => {
|
||||
setHasConfirmed(false);
|
||||
}, 3000);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div
|
||||
className="my-auto text-gray-500 dark:text-gray-400"
|
||||
onClick={handleConfirm}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className={`p-2 rounded-md active:scale-95 ${
|
||||
hasConfirmed
|
||||
? 'bg-red-500'
|
||||
: 'hover:bg-gray-200 dark:hover:bg-gray-600'
|
||||
}`}
|
||||
{...props}
|
||||
>
|
||||
{hasConfirmed ? <FiCheck /> : icon}
|
||||
<span className="sr-only">Refresh</span>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,61 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
type DefaultInputProps = JSX.IntrinsicElements['input'];
|
||||
|
||||
interface InputProps extends DefaultInputProps {
|
||||
icon?: JSX.Element;
|
||||
label?: string;
|
||||
valid?: boolean;
|
||||
validationMessage?: string;
|
||||
}
|
||||
|
||||
export const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
||||
function Input(
|
||||
{
|
||||
icon,
|
||||
label,
|
||||
valid,
|
||||
validationMessage,
|
||||
id,
|
||||
disabled,
|
||||
...props
|
||||
}: InputProps,
|
||||
ref,
|
||||
) {
|
||||
return (
|
||||
<div className="w-full">
|
||||
<label
|
||||
htmlFor={id}
|
||||
className="block text-sm font-medium text-black dark:text-white"
|
||||
>
|
||||
{label}
|
||||
</label>
|
||||
<div className="relative">
|
||||
{icon && (
|
||||
<div className="absolute inset-y-0 left-0 flex items-center px-3 pointer-events-none">
|
||||
{React.cloneElement(icon, {
|
||||
className: 'w-5 h-5 text-gray-500 dark:text-gray-600',
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
<input
|
||||
id={id}
|
||||
ref={ref}
|
||||
disabled={disabled}
|
||||
{...props}
|
||||
className={`block w-full h-11 rounded-md border shadow-sm focus:outline-none focus:border-primary dark:focus:border-primary dark:border-gray-600 dark:text-white ${
|
||||
icon ? 'pl-9' : 'pl-2'
|
||||
} ${
|
||||
disabled
|
||||
? 'bg-gray-200 dark:bg-primaryDark cursor-not-allowed'
|
||||
: 'bg-white dark:bg-secondaryDark'
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
{!valid && (
|
||||
<div className="text-sm text-gray-600">{validationMessage}</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
@@ -2,11 +2,13 @@ import React from 'react';
|
||||
|
||||
import { Switch } from '@headlessui/react';
|
||||
|
||||
import { Label } from './form/Label.jsx';
|
||||
|
||||
type DefaultButtonProps = JSX.IntrinsicElements['button'];
|
||||
|
||||
interface ToggleProps extends DefaultButtonProps {
|
||||
action?: (enabled: boolean) => void;
|
||||
label?: string;
|
||||
label: string;
|
||||
valid?: boolean;
|
||||
validationMessage?: string;
|
||||
checked?: boolean;
|
||||
@@ -37,12 +39,13 @@ export const Toggle = ({
|
||||
|
||||
return (
|
||||
<div className="flex flex-col w-full">
|
||||
<label
|
||||
<Label label={label} />
|
||||
{/* <label
|
||||
htmlFor={id}
|
||||
className="block text-sm font-medium text-black dark:text-white"
|
||||
>
|
||||
{label}
|
||||
</label>
|
||||
</label> */}
|
||||
<div className="ml-auto">
|
||||
<Switch
|
||||
id={id}
|
||||
|
||||
@@ -0,0 +1,58 @@
|
||||
import React from 'react';
|
||||
|
||||
import { InputWrapper } from './InputWrapper.jsx';
|
||||
import { Label } from './Label.jsx';
|
||||
|
||||
type DefaultSelectProps = JSX.IntrinsicElements['select'];
|
||||
|
||||
interface SelectProps extends DefaultSelectProps {
|
||||
options?: {
|
||||
name: string;
|
||||
value: number | string;
|
||||
}[];
|
||||
optionsEnum?: { [s: string]: string | number };
|
||||
label?: string;
|
||||
error?: string;
|
||||
small?: boolean;
|
||||
}
|
||||
|
||||
export const EnumSelect = React.forwardRef<HTMLSelectElement, SelectProps>(
|
||||
({ options, optionsEnum, label, error, small, ...props }, ref) => {
|
||||
const optionsEnumValues = optionsEnum
|
||||
? Object.entries(optionsEnum).filter(
|
||||
(value) => typeof value[1] === 'number',
|
||||
)
|
||||
: [];
|
||||
return (
|
||||
<div>
|
||||
{label && <Label label={label} error={error} />}
|
||||
<InputWrapper>
|
||||
<select
|
||||
ref={ref}
|
||||
className={`w-full bg-transparent focus:outline-none focus:border-primary ${
|
||||
small ? 'py-1 mx-1' : 'h-10 mx-2'
|
||||
}`}
|
||||
{...props}
|
||||
>
|
||||
{optionsEnumValues.length &&
|
||||
optionsEnumValues.map(([name, value]) => (
|
||||
<option className="dark:bg-gray-700" key={value} value={value}>
|
||||
{name}
|
||||
</option>
|
||||
))}
|
||||
{options &&
|
||||
options.map((option) => (
|
||||
<option
|
||||
className="dark:bg-gray-700"
|
||||
key={option.value}
|
||||
value={option.value}
|
||||
>
|
||||
{option.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</InputWrapper>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
@@ -0,0 +1,30 @@
|
||||
import React from 'react';
|
||||
|
||||
import { InputWrapper } from './InputWrapper.jsx';
|
||||
import { Label } from './Label.jsx';
|
||||
|
||||
type DefaultInputProps = JSX.IntrinsicElements['input'];
|
||||
|
||||
interface InputProps extends DefaultInputProps {
|
||||
label?: string;
|
||||
error?: string;
|
||||
action?: JSX.Element;
|
||||
}
|
||||
|
||||
export const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
||||
function Input({ label, error, action, ...props }: InputProps, ref) {
|
||||
return (
|
||||
<div className="w-full">
|
||||
{label && <Label label={label} error={error} />}
|
||||
<InputWrapper error={error} disabled={props.disabled}>
|
||||
<input
|
||||
ref={ref}
|
||||
className="w-full h-10 px-3 py-2 bg-transparent focus:outline-none focus:border-primary"
|
||||
{...props}
|
||||
/>
|
||||
{action && <div className="flex mr-1">{action}</div>}
|
||||
</InputWrapper>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
@@ -0,0 +1,29 @@
|
||||
import React from 'react';
|
||||
|
||||
export interface LabelProps {
|
||||
error?: string;
|
||||
disabled?: boolean;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export const InputWrapper = ({
|
||||
error,
|
||||
disabled,
|
||||
children,
|
||||
}: LabelProps): JSX.Element => (
|
||||
<div
|
||||
className={`flex w-full border-y border rounded-md ${
|
||||
disabled
|
||||
? 'bg-gray-200 text-gray-500 dark:bg-gray-800 dark:text-gray-400 border-gray-400'
|
||||
: ''
|
||||
} ${
|
||||
error
|
||||
? 'border-red-500'
|
||||
: disabled
|
||||
? 'border-gray-200'
|
||||
: ' focus-within:border-primary hover:border-primary'
|
||||
}`}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
@@ -0,0 +1,13 @@
|
||||
import React from 'react';
|
||||
|
||||
export interface LabelProps {
|
||||
label: string;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
export const Label = ({ label, error }: LabelProps): JSX.Element => (
|
||||
<label className="text-xs font-semibold text-gray-500">
|
||||
{label}
|
||||
{error && <span className="ml-2 text-red-500">{error}</span>}
|
||||
</label>
|
||||
);
|
||||
Reference in New Issue
Block a user