react-feather#ChevronsDown JavaScript Examples
The following examples show how to use
react-feather#ChevronsDown.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: CustomTable.jsx From CRM with Apache License 2.0 | 5 votes |
|
CustomTable = ({ columns, data, title }) => {
const tableIcons = {
Add: forwardRef((props, ref) => <Plus {...props} ref={ref} />),
Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
Clear: forwardRef((props, ref) => <X {...props} ref={ref} />),
Delete: forwardRef((props, ref) => <Trash {...props} ref={ref} />),
DetailPanel: forwardRef((props, ref) => (
<ChevronRight {...props} ref={ref} />
)),
Edit: forwardRef((props, ref) => <Edit2 {...props} ref={ref} />),
Export: forwardRef((props, ref) => <Save {...props} ref={ref} />),
Filter: forwardRef((props, ref) => (
<Filter {...props} ref={ref} strokeWidth={1.5} width={15} />
)),
FirstPage: forwardRef((props, ref) => (
<ChevronsLeft {...props} ref={ref} />
)),
LastPage: forwardRef((props, ref) => (
<ChevronsRight {...props} ref={ref} />
)),
NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
PreviousPage: forwardRef((props, ref) => (
<ChevronLeft {...props} ref={ref} />
)),
ResetSearch: forwardRef((props, ref) => <X {...props} ref={ref} />),
Search: forwardRef((props, ref) => (
<Search {...props} ref={ref} strokeWidth={1.5} width={18} />
)),
SortArrow: forwardRef((props, ref) => (
<ChevronsDown {...props} ref={ref} />
)),
ThirdStateCheck: forwardRef((props, ref) => (
<XCircle {...props} ref={ref} />
)),
ViewColumn: forwardRef((props, ref) => <Eye {...props} ref={ref} />),
};
return (
<React.Fragment>
<MaterialTable
icons={tableIcons}
columns={columns}
data={data}
title={title}
options={{
filtering: true,
sorting: true,
grouping: true,
exportButton: true,
headerStyle: {
backgroundColor: "#3358f4",
background: "linear-gradient(90deg, #3358f4, #1d8cf8)",
color: "#FFF",
backgroundRepeat: "no-repeat",
textTransform: "uppercase",
},
rowStyle: (rowData) => ({
backgroundColor: "rgb(0,0,0,0)",
}),
}}
/>
</React.Fragment>
);
}
Example #2
| Source File: PatientCard.js From dashboard with MIT License | 4 votes |
|
export function PatientCard({ data }) {
const isNullData = Object.keys(PATIENT_TYPES).every(
(type) => !(data[`${type}`]["total"] || data[`${type}`]["today"])
);
const getSubscriptData = (val) => {
if (val == 0) return;
else if (val > 0) {
return (
<div className="flex flex-row text-green-500 text-sm">
<ChevronsUp className="h-5" />
{val}
</div>
);
} else {
return (
<div className="flex flex-row text-red-500 text-sm">
<ChevronsDown className="h-5" />
{val}
</div>
);
}
};
return isNullData ? (
<></>
) : (
<Card className="flex flex-col mb-4 mt-4 p-4 rounded-xl">
<div className="flex flex-col justify-between md:flex-row">
<div className="flex flex-col">
<div>
<a href={`/facility/${data.id}`}>
<p className="dark:text-gray-200 text-xl font-medium">
{data.facility_name}
</p>
</a>
</div>
<div className="flex flex-row justify-between w-full">
<div className="mr-5">
<p className="dark:text-gray-400 text-gray-600 text-sm font-semibold">
{data.facility_type}
</p>
</div>
<div>
<p className="dark:text-gray-400 text-gray-600 text-sm font-semibold">
{data.phone_number}
</p>
</div>
</div>
</div>
<div className="flex flex-col mt-1 pt-2 border-t md:mt-0 md:pt-0 md:border-0">
<p className="dark:text-gray-400 text-gray-600 text-sm font-medium">
Last Updated
</p>
<p className="dark:text-gray-200 text-xl font-medium">
{data.last_updated}
</p>
</div>
</div>
<div className="grid grid-rows-5 mt-2 pt-2 w-full border-t overflow-x-scroll overflow-y-hidden md:mt-4 md:pt-0 md:border-0 md:overflow-hidden">
<div className="grid row-span-1 grid-cols-5 mb-2 pt-3 w-800 md:w-full">
<div className="col-span-1 text-center dark:text-gray-200 text-gray-800 text-sm font-semibold">
ISOLATION
</div>
<div className="col-span-1 text-center dark:text-gray-200 text-gray-800 text-sm font-semibold">
OXYGEN BEDS
</div>
<div className="col-span-2 text-center dark:text-gray-200 text-gray-800 text-sm font-semibold">
ICU
</div>
<div className="col-span-1 text-center dark:text-gray-200 text-gray-800 text-sm font-semibold">
WARDS
</div>
</div>
<div className="grid row-span-2 grid-cols-5 mb-4">
<div className="col-span-1">
<div className="m-auto p-2 w-3/5 text-center bg-gray-200 dark:bg-gray-900 rounded-lg">
<div className="dark:text-gray-200 text-xs font-semibold">
Home Isolation
</div>
<div className="flex flex-row justify-center mt-1 dark:text-gray-200 text-2xl font-semibold">
<div>{data.home_isolation.total}</div>
{getSubscriptData(data.home_isolation.today)}
</div>
</div>
</div>
<div className="col-span-1">
<div className="m-auto p-2 w-3/5 h-full text-center bg-gray-200 dark:bg-gray-900 rounded-lg">
<div className="flex flex-row justify-center mt-5 dark:text-gray-200 text-2xl font-semibold md:mt-3">
<div>{data.bed_with_oxygen_support.total}</div>
{getSubscriptData(data.bed_with_oxygen_support.today)}
</div>
</div>
</div>
<div className="grid col-span-2 grid-cols-2">
<div className="col-span-1">
<div className="float-right mr-2 p-2 w-3/5 h-full text-center bg-gray-200 dark:bg-gray-900 rounded-lg">
<div className="dark:text-gray-200 text-xs font-semibold">
ICU
</div>
<div className="flex flex-row justify-center mt-3 dark:text-gray-200 text-2xl font-semibold md:mt-1">
<div>{data.icu.total}</div>
{getSubscriptData(data.icu.today)}
</div>
</div>
</div>
<div className="col-span-1">
<div className="ml-2 p-2 w-3/5 text-center bg-gray-200 dark:bg-gray-900 rounded-lg">
<div className="dark:text-gray-200 text-xs font-semibold">
Oxygen Support
</div>
<div className="flex flex-row justify-center mt-1 dark:text-gray-200 text-2xl font-semibold">
<div>{data.icu_with_oxygen_support.total}</div>
{getSubscriptData(data.icu_with_oxygen_support.today)}
</div>
</div>
</div>
</div>
<div className="col-span-1">
<div className="m-auto p-2 w-3/5 text-center bg-gray-200 dark:bg-gray-900 rounded-lg">
<div className="dark:text-gray-200 text-xs font-semibold">
Gynaecology Ward
</div>
<div className="flex flex-row justify-center mt-1 dark:text-gray-200 text-2xl font-semibold">
<div>{data.gynaecology_ward.total}</div>
{getSubscriptData(data.gynaecology_ward.today)}
</div>
</div>
</div>
</div>
<div className="grid row-span-2 grid-cols-5">
<div className="col-span-1">
<div className="m-auto p-2 w-3/5 text-center bg-gray-200 dark:bg-gray-900 rounded-lg">
<div className="dark:text-gray-200 text-xs font-semibold">
Isolation Room
</div>
<div className="flex flex-row justify-center mt-1 dark:text-gray-200 text-2xl font-semibold">
<div>{data.isolation_room.total}</div>
{getSubscriptData(data.isolation_room.today)}
</div>
</div>
</div>
<div className="col-span-1"></div>
<div className="grid col-span-2 grid-cols-2">
<div className="col-span-1">
<div className="float-right mr-2 px-1 py-2 w-3/5 text-center bg-gray-200 dark:bg-gray-900 rounded-lg">
<div className="dark:text-gray-200 text-xs font-semibold">
Non Invasive Ventilator
</div>
<div className="flex flex-row justify-center mt-1 dark:text-gray-200 text-2xl font-semibold">
<div>{data.icu_with_non_invasive_ventilator.total}</div>
{getSubscriptData(
data.icu_with_non_invasive_ventilator.today
)}
</div>
</div>
</div>
<div className="col-span-1">
<div className="ml-2 p-2 w-3/5 text-center bg-gray-200 dark:bg-gray-900 rounded-lg">
<div className="dark:text-gray-200 text-xs font-semibold">
Invasive Ventilator
</div>
<div className="flex flex-row justify-center mt-1 dark:text-gray-200 text-2xl font-semibold">
<div>{data.icu_with_invasive_ventilator.total}</div>
{getSubscriptData(data.icu_with_invasive_ventilator.today)}
</div>
</div>
</div>
</div>
<div className="col-span-1">
<div className="m-auto p-2 w-3/5 text-center bg-gray-200 dark:bg-gray-900 rounded-lg">
<div className="dark:text-gray-200 text-xs font-semibold">
Paediatric Ward
</div>
<div className="flex flex-row justify-center mt-1 dark:text-gray-200 text-2xl font-semibold">
<div>{data.paediatric_ward.total}</div>
{getSubscriptData(data.paediatric_ward.today)}
</div>
</div>
</div>
</div>
</div>
</Card>
);
}
Example #3
| Source File: RadialCard.js From dashboard with MIT License | 4 votes |
|
function RadialCard({ label, count, current, previous, col = "" }) {
const current_used = Math.round((current.used / current.total) * 100);
const previous_used = Math.round((previous.used / previous.total) * 100);
const diff = current_used - previous_used;
const _p = Math.round((current.used / current.total) * 100);
const { used, total, progress, innerProgress } = useSpring({
from: { used: 0, total: 0, progress: "0, 100", innerProgress: 0 },
to: {
used: current.used,
total: current.total,
progress: `${Number.isNaN(_p) ? 0 : _p}, 100`,
innerProgress: Number.isNaN(_p) ? 0 : _p,
},
delay: 0,
config: config.slow,
});
const circlePath = `M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831`;
return (
<Card className={`flex items-center justify-between ${col}`}>
<div className="relative flex content-center justify-center m-2 w-4/5">
<svg viewBox="0 0 36 36" className="w-4/5">
<path
className="text-gray-100 dark:text-gray-400 stroke-current stroke-2"
fill="none"
d={circlePath}
/>
<animated.path
className="text-primary-500 stroke-current stroke-2"
fill="none"
strokeDasharray={progress}
d={circlePath}
/>
</svg>
<div className="absolute inline-flex flex-col items-center self-center w-3/5 text-center text-sm xl:text-lg">
<p className="text-center dark:text-gray-400 text-gray-600 text-xxs font-medium xl:text-xs">
{label}
</p>
<div className="space-x-1">
<animated.span className="text-center dark:text-gray-200 text-gray-700 font-semibold">
{innerProgress.interpolate((x) => `${Math.round(x)}%`)}
</animated.span>
{count > 0 &&
!Number.isNaN(diff) &&
diff !== 0 &&
(diff > 0 ? (
<span className="text-red-400">
<ChevronsUp className="inline h-full" />
{Math.abs(diff)}%
</span>
) : (
<span className="text-primary-400">
<ChevronsDown className="inline h-full" />
{Math.abs(diff)}%
</span>
))}
</div>
</div>
</div>
<div
style={{ direction: "rtl" }}
className="grid grid-cols-1 mr-4 w-1/4 text-right space-y-1 xl:space-y-2"
>
<div className="flex-col">
<p className="dark:text-gray-400 text-gray-600 text-xs font-medium xl:text-sm">
Used
</p>
<animated.p className="dark:text-gray-200 text-gray-700 text-xs font-semibold xl:text-lg">
{used.interpolate((x) => Math.round(x))}
</animated.p>
</div>
<div className="flex-col">
<p className="dark:text-gray-400 text-gray-600 text-xs font-medium xl:text-sm">
Total
</p>
<animated.p className="dark:text-gray-200 text-gray-700 text-xs font-semibold xl:text-lg">
{total.interpolate((x) => Math.round(x))}
</animated.p>
</div>
</div>
</Card>
);
}
