From 25b9877f3ab658eb65b8ec00d02d696f26bc9e51 Mon Sep 17 00:00:00 2001 From: NCanggoro Date: Mon, 9 Oct 2023 16:23:08 +0700 Subject: [PATCH] add separator, buttons --- src/components/Button/DefaultButton/index.tsx | 37 +++++++++++++++++++ src/components/Button/DefaultButton/style.css | 4 ++ src/components/Button/WarningButton/index.tsx | 36 ++++++++++++++++++ src/components/Button/WarningButton/style.css | 4 ++ src/components/Header/index.tsx | 26 +++++++------ src/components/Loading/Spinner/index.tsx | 11 +++++- src/components/RefOutsideClick/index.tsx | 37 +++++++++++++++++++ .../Separator/TitleSeparator/index.tsx | 17 +++++++++ src/components/index.ts | 13 +++++++ 9 files changed, 171 insertions(+), 14 deletions(-) create mode 100644 src/components/Button/DefaultButton/index.tsx create mode 100644 src/components/Button/DefaultButton/style.css create mode 100644 src/components/Button/WarningButton/index.tsx create mode 100644 src/components/Button/WarningButton/style.css create mode 100644 src/components/RefOutsideClick/index.tsx create mode 100644 src/components/Separator/TitleSeparator/index.tsx diff --git a/src/components/Button/DefaultButton/index.tsx b/src/components/Button/DefaultButton/index.tsx new file mode 100644 index 0000000..4a3f4e0 --- /dev/null +++ b/src/components/Button/DefaultButton/index.tsx @@ -0,0 +1,37 @@ +import { TargetedEvent, CSSProperties } from "preact/compat"; +import './style.css'; +import { SpinnerLoading } from "../.."; + +interface DefaultButtonProps { + label: string + containerClassName?: string, + containerStyle?: CSSProperties, + className?: string, + style?: CSSProperties + onClick?: (event: TargetedEvent) => any, + href?: string, + isLoading?: boolean +} + +const DefaultButton = (props: DefaultButtonProps) => ( +
+ + { props.isLoading ? + + : + props.label + } + + +
+) + +export default DefaultButton; diff --git a/src/components/Button/DefaultButton/style.css b/src/components/Button/DefaultButton/style.css new file mode 100644 index 0000000..e652e85 --- /dev/null +++ b/src/components/Button/DefaultButton/style.css @@ -0,0 +1,4 @@ +div a.default-button:hover { + color: white; + background-color: #575757; +} \ No newline at end of file diff --git a/src/components/Button/WarningButton/index.tsx b/src/components/Button/WarningButton/index.tsx new file mode 100644 index 0000000..e240b2b --- /dev/null +++ b/src/components/Button/WarningButton/index.tsx @@ -0,0 +1,36 @@ +import { CSSProperties, TargetedEvent } from "preact/compat"; +import './style.css'; +import { SpinnerLoading } from "../.."; + +interface DefaultButtonProps { + label: string + containerClassName?: string, + containerStyle?: CSSProperties, + className?: string, + style?: CSSProperties, + isLoading?: boolean, + onClick?: (event: TargetedEvent) => any, + href?: string, +} + +const WarningButton = (props: DefaultButtonProps) => ( +
+ + {props.isLoading ? + + : + props.label + } + +
+) + +export default WarningButton; diff --git a/src/components/Button/WarningButton/style.css b/src/components/Button/WarningButton/style.css new file mode 100644 index 0000000..0d7b31c --- /dev/null +++ b/src/components/Button/WarningButton/style.css @@ -0,0 +1,4 @@ +div a.warning-button:hover{ + color: white; + background-color: #af3030; +} \ No newline at end of file diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index 2f6ca8a..59b70b0 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -22,7 +22,7 @@ function Header() { setSearchVal(val.value) } - const handleLogout = async (): Promise => { + const handleLogout = async (): Promise => { try { await logoutService() dispatch(logout()) @@ -60,15 +60,16 @@ function Header() { src={'https://cdn.discordapp.com/attachments/743422487882104837/1153985664849805392/421-4212617_person-placeholder-image-transparent-hd-png-download.png'} /> - {user.username && -
-
Profile
-
Feed
-
Add location
-
Logout
- {/*
Halo
*/} - {/*
Halo
*/} -
+ {user.username && +
+
Profile
+
Feed
+
Add location
+
Settings
+
Logout
+ {/*
Halo
*/} + {/*
Halo
*/} +
}
@@ -98,10 +99,11 @@ function Header() {
user.username ? setPageState({ ...pageState, profileMenu: !pageState.profileMenu }) : ''} className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>{user.username ? user.username : 'Sign in'} {user && screen.width > 600 && -
+
+
Add location
Profile
Feed
-
Add location
+
Settings
{user.is_admin &&
Submissions
} diff --git a/src/components/Loading/Spinner/index.tsx b/src/components/Loading/Spinner/index.tsx index d6aad4a..f483ea2 100644 --- a/src/components/Loading/Spinner/index.tsx +++ b/src/components/Loading/Spinner/index.tsx @@ -1,6 +1,13 @@ +import { CSSProperties } from 'preact/compat' import './style.css' -export default function SpinnerLoading() { + +interface SpinnerLoadingProps { + style?: CSSProperties + className?: string +} + +export default function SpinnerLoading(props: SpinnerLoadingProps) { return ( -
+
) } \ No newline at end of file diff --git a/src/components/RefOutsideClick/index.tsx b/src/components/RefOutsideClick/index.tsx new file mode 100644 index 0000000..fa3b4fb --- /dev/null +++ b/src/components/RefOutsideClick/index.tsx @@ -0,0 +1,37 @@ +import { useRef, useEffect } from "preact/compat"; + +interface RefOutsideClickInterface { + onOutsideClick: Function, + children: any +} + +/** + * https://stackoverflow.com/questions/32553158/detect-click-outside-react-component + */ +function useRefOutsideClick(ref: any, onOutsideClick: Function) { + useEffect(() => { + function handleClickOutside(event: MouseEvent) { + if (ref.current && !ref.current.contains(event.target)) { + onOutsideClick() + } + } + // Bind the event listener + document.addEventListener("mousedown", handleClickOutside); + return () => { + // Unbind the event listener on clean up + document.removeEventListener("mousedown", handleClickOutside); + }; + }, [ref]); +} + +/** + * Component that alerts if you click outside of it + */ +function RefOutsideClick(props: RefOutsideClickInterface) { + const wrapperRef = useRef(null); + useRefOutsideClick(wrapperRef, props.onOutsideClick); + + return
{props.children}
; +} + +export default RefOutsideClick; diff --git a/src/components/Separator/TitleSeparator/index.tsx b/src/components/Separator/TitleSeparator/index.tsx new file mode 100644 index 0000000..7ea361b --- /dev/null +++ b/src/components/Separator/TitleSeparator/index.tsx @@ -0,0 +1,17 @@ +type SeparatorProps = { + pageName: string, + titleStyles?: any, + titleClasses?: string +} + +function TitleSeparator(props: SeparatorProps) { + return ( +
+

+ {props.pageName} +

+
+ ) +} + +export default TitleSeparator; \ No newline at end of file diff --git a/src/components/index.ts b/src/components/index.ts index 82ab401..728ad16 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,6 +1,13 @@ import Header from "./Header"; + +import RefOutsideClick from "./RefOutsideClick"; + +import WarningButton from "./Button/WarningButton"; +import DefaultButton from "./Button/DefaultButton"; + import SeparatorWithAnchor from "./Separator/WithAnchor"; import DefaultSeparator from "./Separator/Default"; +import TitleSeparator from "./Separator/TitleSeparator"; import Footer from './Footer/'; import CustomInterweave from "./CustomInterweave"; import DropdownInput from "./DropdownInput"; @@ -9,8 +16,14 @@ import SpinnerLoading from "./Loading/Spinner"; export { Header, + WarningButton, + DefaultButton, + + RefOutsideClick, + SeparatorWithAnchor, DefaultSeparator, + TitleSeparator, Footer, CustomInterweave, DropdownInput,