import tw, { styled } from 'twin.macro'; import Checkbox from '@/components/elements/Checkbox'; import React from 'react'; import { useStoreState } from 'easy-peasy'; import Label from '@/components/elements/Label'; const Container = styled.label` ${tw`flex items-center border border-transparent rounded md:p-2 transition-colors duration-75`}; text-transform: none; &:not(.disabled) { ${tw`cursor-pointer`}; &:hover { ${tw`border-neutral-500 bg-neutral-800`}; } } &:not(:first-of-type) { ${tw`mt-4 sm:mt-2`}; } &.disabled { ${tw`opacity-50`}; & input[type="checkbox"]:not(:checked) { ${tw`border-0`}; } } `; interface Props { permission: string; disabled: boolean; } const PermissionRow = ({ permission, disabled }: Props) => { const [ key, pkey ] = permission.split('.', 2); const permissions = useStoreState(state => state.permissions.data); return (
{permissions[key].keys[pkey].length > 0 &&

{permissions[key].keys[pkey]}

}
); }; export default PermissionRow;