forked from markusbink/basisdokument-implementierung
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
1d7c04a
commit 923ed6f
Showing
6 changed files
with
139 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,106 @@ | ||
import cx from "classnames"; | ||
import { Check, Pencil, Trash, X } from "phosphor-react"; | ||
import { useState } from "react"; | ||
|
||
interface LitigiousCheckProps { | ||
isLitigious: boolean | null; | ||
setIsLitigious: (isLitigious: boolean | null) => void; | ||
} | ||
|
||
export const LitigiousCheck: React.FC<LitigiousCheckProps> = ({ | ||
isLitigious, | ||
setIsLitigious, | ||
}) => { | ||
const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false); | ||
return ( | ||
<span | ||
onClick={(e) => { | ||
e.stopPropagation(); | ||
setIsMenuOpen(!isMenuOpen); | ||
}} | ||
className={cx( | ||
"flex items-center justify-center cursor-pointer absolute bottom-0 right-0 translate-x-1 translate-y-1 z-10 rounded-full bg-offWhite text-white h-6 w-6", | ||
{ | ||
"border-2 border-mediumGrey": isLitigious === null, | ||
"bg-vibrantRed": isLitigious, | ||
"bg-vibrantGreen": isLitigious === false, | ||
} | ||
)} | ||
> | ||
{isLitigious && <X size={14} weight="bold" />} | ||
{isLitigious === false && <Check size={14} weight="bold" />} | ||
{isMenuOpen && ( | ||
<ul className="absolute right-0 top-full p-2 bg-white text-darkGrey rounded-xl min-w-[250px] shadow-lg z-50"> | ||
<li | ||
tabIndex={0} | ||
onClick={(e) => { | ||
e.stopPropagation(); | ||
setIsLitigious(null); | ||
setIsMenuOpen(false); | ||
}} | ||
className="flex items-center gap-2 p-2 rounded-lg hover:bg-offWhite focus:bg-offWhite focus:outline-none" | ||
> | ||
<CircleWithIcon isLitigious={null} /> | ||
Zurücksetzen | ||
</li> | ||
|
||
<li | ||
tabIndex={0} | ||
onClick={(e) => { | ||
e.stopPropagation(); | ||
setIsLitigious(false); | ||
setIsMenuOpen(false); | ||
}} | ||
className="flex items-center gap-2 p-2 rounded-lg hover:bg-offWhite focus:bg-offWhite focus:outline-none" | ||
> | ||
<CircleWithIcon | ||
icon={<Check size={12} weight="bold" />} | ||
isLitigious={false} | ||
/> | ||
Als unstreitig markieren | ||
</li> | ||
<li | ||
tabIndex={0} | ||
onClick={(e) => { | ||
e.stopPropagation(); | ||
setIsLitigious(true); | ||
setIsMenuOpen(false); | ||
}} | ||
className="flex items-center gap-2 p-2 rounded-lg hover:bg-offWhite focus:bg-offWhite focus:outline-none" | ||
> | ||
<CircleWithIcon | ||
icon={<X size={12} weight="bold" />} | ||
isLitigious={true} | ||
/> | ||
Als streitig markieren | ||
</li> | ||
</ul> | ||
)} | ||
</span> | ||
); | ||
}; | ||
|
||
interface CircleWithIconProps { | ||
icon?: React.ReactNode; | ||
isLitigious?: boolean | null; | ||
} | ||
|
||
const CircleWithIcon: React.FC<CircleWithIconProps> = ({ | ||
icon, | ||
isLitigious, | ||
}) => { | ||
return ( | ||
<div | ||
className={cx( | ||
"w-4 h-4 flex items-center justify-center rounded-full bg-offWhite text-white", | ||
{ | ||
"border border-mediumGrey": isLitigious === null, | ||
"bg-vibrantRed": isLitigious, | ||
"bg-vibrantGreen": isLitigious === false, | ||
} | ||
)} | ||
> | ||
{icon} | ||
</div> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
export { Action } from "./Action"; | ||
export { Entry } from "./Entry"; | ||
export { EntryForm } from "./EntryForm"; | ||
export { EntryHeader } from "./EntryHeader"; | ||
export { EntryBody } from "./EntryBody"; | ||
export { NewEntry } from "./NewEntry"; |