Fixes, new debug output & more.
This commit is contained in:
Sacha Weatherstone
@@ -40,7 +40,7 @@ export const Button = ({
|
||||
return (
|
||||
<button
|
||||
onClick={handleConfirm}
|
||||
className={`items-center select-none flex dark:text-white active:scale-95 ${
|
||||
className={`items-center select-none flex dark:text-white active:scale-95 transition duration-200 ease-in-out ${
|
||||
active && !disabled ? 'bg-gray-100 dark:bg-gray-700' : ''
|
||||
} ${
|
||||
circle ? 'rounded-full h-10 w-10' : 'rounded-md p-3 space-x-3 text-sm'
|
||||
@@ -48,7 +48,9 @@ export const Button = ({
|
||||
disabled
|
||||
? 'cursor-not-allowed dark:bg-primaryDark bg-white'
|
||||
: 'cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 hover:shadow-md'
|
||||
} ${border ? 'border dark:border-gray-600' : ''} ${className}`}
|
||||
} ${
|
||||
border ? 'border border-gray-400 dark:border-gray-200' : ''
|
||||
} ${className}`}
|
||||
{...props}
|
||||
>
|
||||
{icon && (
|
||||
|
||||
@@ -20,7 +20,7 @@ export const Card = ({
|
||||
}: CardProps): JSX.Element => {
|
||||
return (
|
||||
<div
|
||||
className={`flex flex-col flex-auto dark: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-y md:border shadow-md select-none dark:bg-primaryDark border-gray-300 dark:border-transparent md:rounded-3xl ${className}`}
|
||||
{...props}
|
||||
>
|
||||
<div className="flex items-center justify-between mx-10 mt-10">
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
import React from 'react';
|
||||
|
||||
export interface CoverProps {
|
||||
content: JSX.Element;
|
||||
enabled: boolean;
|
||||
}
|
||||
|
||||
export const Cover = ({ content, enabled }: CoverProps): JSX.Element => {
|
||||
return enabled ? <div className="m-4 ">{content}</div> : <></>;
|
||||
};
|
||||
@@ -26,7 +26,7 @@ export const Drawer = ({
|
||||
)}
|
||||
|
||||
<aside
|
||||
className={`transform top-0 left-0 bg-white dark:bg-secondaryDark shadow-md max-w-xs w-full border-r dark:border-gray-600 h-full overflow-auto ease-in-out transition-all duration-300 z-30 ${
|
||||
className={`transform top-0 left-0 bg-white dark:bg-secondaryDark shadow-md max-w-xs w-full border-r dark:border-gray-600 border-gray-300 h-full overflow-auto ease-in-out transition-all duration-300 z-30 ${
|
||||
permenant ? '' : 'absolute'
|
||||
} ${open ? 'translate-x-0' : '-translate-x-full'} ${className}`}
|
||||
{...props}
|
||||
|
||||
@@ -14,7 +14,7 @@ export const IconButton = ({
|
||||
<div className="my-auto text-gray-500 dark:text-gray-400">
|
||||
<button
|
||||
type="button"
|
||||
className="p-2 rounded-md active:scale-95 hover:bg-gray-200 dark:hover:bg-gray-600"
|
||||
className="p-2 transition duration-200 ease-in-out rounded-md active:scale-95 hover:bg-gray-200 dark:hover:bg-gray-600"
|
||||
{...props}
|
||||
>
|
||||
{icon}
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
import React from 'react';
|
||||
|
||||
export interface StatCardProps {
|
||||
title: string;
|
||||
value: string | JSX.Element;
|
||||
}
|
||||
|
||||
export const StatCard = ({ title, value }: StatCardProps): JSX.Element => {
|
||||
return (
|
||||
<div className="w-full border-gray-300 shadow-md border-y md:border h-28 md:rounded-3xl dark:bg-primaryDark dark:border-transparent ">
|
||||
<div className="m-4">
|
||||
<div className="text-lg font-light">{title}</div>
|
||||
<div className="text-3xl font-bold">{value}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,47 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import { Tab } from '@headlessui/react';
|
||||
|
||||
type DefaultDivProps = JSX.IntrinsicElements['div'];
|
||||
|
||||
interface TabProps extends DefaultDivProps {
|
||||
tabs: {
|
||||
name: string;
|
||||
body: JSX.Element;
|
||||
}[];
|
||||
}
|
||||
|
||||
export const Tabs = ({ tabs, className, ...props }: TabProps): JSX.Element => {
|
||||
return (
|
||||
<Tab.Group as="div" className={className}>
|
||||
<Tab.List className="flex border-l border-r border-t shadow-md rounded-t-3xl dark:border-gray-600">
|
||||
{tabs.map((tab) => (
|
||||
<Tab
|
||||
key={tab.name}
|
||||
className={({ selected }): string =>
|
||||
`w-full text-lg font-medium p-2 border-b-2 ${
|
||||
selected
|
||||
? 'dark:border-gray-200 border-gray-600'
|
||||
: 'border-transparent dark:border-transparent'
|
||||
}`
|
||||
}
|
||||
>
|
||||
{tab.name}
|
||||
</Tab>
|
||||
))}
|
||||
</Tab.List>
|
||||
<Tab.Panels className="h-full">
|
||||
{tabs.map((tab, index) => (
|
||||
<Tab.Panel
|
||||
key={index}
|
||||
className={
|
||||
'border dark:border-gray-600 rounded-b-3xl p-4 h-full shadow-md'
|
||||
}
|
||||
>
|
||||
{tab.body}
|
||||
</Tab.Panel>
|
||||
))}
|
||||
</Tab.Panels>
|
||||
</Tab.Group>
|
||||
);
|
||||
};
|
||||
@@ -12,38 +12,37 @@ interface CheckboxProps extends DefaultInputProps {
|
||||
error?: boolean;
|
||||
}
|
||||
|
||||
export const Checkbox = ({
|
||||
label,
|
||||
valid,
|
||||
validationMessage,
|
||||
id,
|
||||
error,
|
||||
...props
|
||||
}: CheckboxProps): JSX.Element => {
|
||||
return (
|
||||
<div className="flex flex-col w-full">
|
||||
<Label label={label} />
|
||||
<div className="ml-auto">
|
||||
<input
|
||||
type="checkbox"
|
||||
id={id}
|
||||
className={`appearance-none w-8 h-8 border rounded-md focus:outline-none checked:bg-primary checked:border-transparent ${
|
||||
props.disabled
|
||||
? 'bg-gray-200 text-gray-500 dark:bg-gray-800 dark:text-gray-400 border-gray-400'
|
||||
: ''
|
||||
} ${
|
||||
error
|
||||
? 'border-red-500'
|
||||
: props.disabled
|
||||
? 'border-gray-200'
|
||||
: ' focus-within:border-primary hover:border-primary'
|
||||
}`}
|
||||
{...props}
|
||||
/>
|
||||
export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
|
||||
function Input(
|
||||
{ label, valid, validationMessage, id, error, ...props }: CheckboxProps,
|
||||
ref,
|
||||
) {
|
||||
return (
|
||||
<div className="flex flex-col w-full">
|
||||
<Label label={label} />
|
||||
<div className="ml-auto">
|
||||
<input
|
||||
ref={ref}
|
||||
type="checkbox"
|
||||
id={id}
|
||||
className={`appearance-none w-8 h-8 border rounded-md focus:outline-none checked:bg-primary checked:border-transparent transition duration-200 ease-in-out border-gray-400 dark:border-gray-200 ${
|
||||
props.disabled
|
||||
? 'bg-gray-200 text-gray-500 dark:bg-gray-800 dark:text-gray-400 border-gray-400'
|
||||
: ''
|
||||
} ${
|
||||
error
|
||||
? 'border-red-500'
|
||||
: props.disabled
|
||||
? 'border-gray-200'
|
||||
: ' focus-within:border-primary hover:border-primary'
|
||||
}`}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
{!valid && (
|
||||
<div className="text-sm text-gray-600">{validationMessage}</div>
|
||||
)}
|
||||
</div>
|
||||
{!valid && (
|
||||
<div className="text-sm text-gray-600">{validationMessage}</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
@@ -12,7 +12,7 @@ export const InputWrapper = ({
|
||||
children,
|
||||
}: LabelProps): JSX.Element => (
|
||||
<div
|
||||
className={`flex w-full border-y border rounded-md ${
|
||||
className={`flex w-full border-gray-400 dark:border-gray-200 border-y border rounded-md transition duration-200 ease-in-out ${
|
||||
disabled
|
||||
? 'bg-gray-200 text-gray-500 dark:bg-gray-800 dark:text-gray-400 border-gray-400'
|
||||
: ''
|
||||
|
||||
@@ -6,9 +6,9 @@ export interface LabelProps {
|
||||
}
|
||||
|
||||
export const Label = ({ label, error }: LabelProps): JSX.Element => (
|
||||
<label className="flex py-1 text-xs font-semibold text-gray-500">
|
||||
<label className="flex py-1 text-xs font-semibold text-gray-500 dark:text-gray-400">
|
||||
{label}
|
||||
{error && <span className="ml-2 text-red-500">{error}</span>}
|
||||
<div className="flex-grow h-0.5 my-auto ml-2 dark:bg-gray-600 bg-gray-500" />
|
||||
<div className="flex-grow h-0.5 my-auto ml-2 dark:bg-gray-700 bg-gray-300 rounded-full" />
|
||||
</label>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user