Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-16 01:32:02 +10:00
Code Issues Packages Projects Releases Wiki Activity

implement functionality to hide/show individual items

Browse Source
This commit is contained in:
Amruth Pillai
2020-03-28 22:19:11 +05:30
parent c287d9f289
commit 8a032845cf
16 changed files with 298 additions and 326 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/shared/Checkbox.js
View File

@ -1,16 +1,20 @@
import React from 'react';
const Checkbox = ({ checked, onChange }) => {
const Checkbox = ({ checked, onChange, icon = 'check', size = '2rem' }) => {
return (
<div className="bg-white border-2 rounded border-gray-400 hover:border-gray-500 w-8 h-8 flex flex-shrink-0 justify-center items-center mr-2 focus-within:border-blue-500 cursor-pointer">
<div
className="bg-white border-2 rounded border-gray-400 hover:border-gray-500 flex flex-shrink-0 justify-center items-center mr-2 focus-within:border-blue-500 cursor-pointer"
style={{ width: size, height: size }}
>
<input
type="checkbox"
className="w-8 h-8 opacity-0 absolute cursor-pointer"
style={{ width: size, height: size }}
className="opacity-0 absolute cursor-pointer"
checked={checked}
onChange={e => onChange(e.target.checked)}
/>
<i className="material-icons fill-current hidden text-lg font-bold text-gray-800 cursor-pointer">
check
<i className="material-icons fill-current hidden text-sm font-bold text-gray-800 cursor-pointer">
{icon}
</i>
</div>
);