-
- )
+ )
}
diff --git a/src/renderer/components/settings/setting-container.component.tsx b/src/renderer/components/settings/setting-container.component.tsx
index 6cc41c30..e86ced16 100644
--- a/src/renderer/components/settings/setting-container.component.tsx
+++ b/src/renderer/components/settings/setting-container.component.tsx
@@ -1,14 +1,23 @@
import { ReactNode } from "react";
import { useTranslation } from "renderer/hooks/use-translation.hook";
-export function SettingContainer({className, title, minorTitle, description, children}: {className?: string, title?: string, minorTitle?: string, description?: string, children?: ReactNode}) {
+type Props = {
+ id?: string,
+ className?: string,
+ title?: string,
+ minorTitle?: string,
+ description?: string,
+ children?: ReactNode
+}
+
+export function SettingContainer({id, className, title, minorTitle, description, children}: Props) {
const t = useTranslation();
return (
-
+
{ title &&
{t(title)}
}
- { minorTitle &&
{t(minorTitle)}
}
+ { minorTitle &&
{t(minorTitle)}
}
{ description &&
{t(description)}
}
{ children }
diff --git a/src/renderer/components/shared/UwU/spoiler-click.component.tsx b/src/renderer/components/shared/UwU/spoiler-click.component.tsx
deleted file mode 100644
index a9f6e1a6..00000000
--- a/src/renderer/components/shared/UwU/spoiler-click.component.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import {motion, useCycle} from "framer-motion"
-import { useState } from "react"
-
-type Props = {className?: string, nbClickToShow?: number, children?: JSX.Element}
-
-export function SpoilerClick({className, children, nbClickToShow = 5}: Props) {
-
- const [remainingClicks, setRemainingClicks] = useState(nbClickToShow);
- const [translateY, setTranslateY] = useState("100%");
-
- const handleClicks = () => {
- if(remainingClicks - 1 > 0){ setRemainingClicks(nb => nb - 1); }
- setTranslateY(`${(((remainingClicks - 1) / nbClickToShow) * 100)}%`)
- }
-
- return (
-
- {children}
-
- )
-}
diff --git a/src/renderer/components/shared/bsm-basic-spinner/bsm-basic-spinner.component.css b/src/renderer/components/shared/bsm-basic-spinner/bsm-basic-spinner.component.css
new file mode 100644
index 00000000..62be5b72
--- /dev/null
+++ b/src/renderer/components/shared/bsm-basic-spinner/bsm-basic-spinner.component.css
@@ -0,0 +1,17 @@
+.loader {
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ display: inline-block;
+ box-sizing: border-box;
+ animation: rotation 1s linear infinite;
+}
+
+@keyframes rotation {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
\ No newline at end of file
diff --git a/src/renderer/components/shared/bsm-basic-spinner/bsm-basic-spinner.component.tsx b/src/renderer/components/shared/bsm-basic-spinner/bsm-basic-spinner.component.tsx
new file mode 100644
index 00000000..c5d9d7bd
--- /dev/null
+++ b/src/renderer/components/shared/bsm-basic-spinner/bsm-basic-spinner.component.tsx
@@ -0,0 +1,17 @@
+import { CSSProperties } from "react"
+import "./bsm-basic-spinner.component.css"
+
+type Props = {
+ className?: string,
+ style?: CSSProperties,
+ spinnerClassName?: string,
+ thikness?: string
+}
+
+export function BsmBasicSpinner({className, style, spinnerClassName, thikness = "5px"}: Props) {
+ return (
+
+
+
+ )
+}
diff --git a/src/renderer/components/shared/bsm-button.component.tsx b/src/renderer/components/shared/bsm-button.component.tsx
index 82eb20cb..4671a62f 100644
--- a/src/renderer/components/shared/bsm-button.component.tsx
+++ b/src/renderer/components/shared/bsm-button.component.tsx
@@ -1,16 +1,16 @@
import { BsmIcon, BsmIconType } from "../svgs/bsm-icon.component"
-import OutsideClickHandler from 'react-outside-click-handler';
-import React, { MutableRefObject, Ref } from "react";
+import { useRef, CSSProperties } from "react";
import { BsmImage } from "./bsm-image.component";
import { useTranslation } from "renderer/hooks/use-translation.hook";
+import { useClickOutside } from "renderer/hooks/use-click-outside.hook";
import { useThemeColor } from "renderer/hooks/use-theme-color.hook";
import { getCorrectTextColor } from "renderer/helpers/correct-text-color";
type BsmButtonType = "primary"|"success"|"cancel"|"error";
-type propsType = {
+type Props = {
className?: string,
- style?: React.CSSProperties,
+ style?: CSSProperties,
imgClassName?: string,
iconClassName?: string,
icon?: BsmIconType,
@@ -25,43 +25,44 @@ type propsType = {
typeColor?:BsmButtonType,
color?: string,
title?: string,
+ iconColor?: string,
+ textClassName?: string
}
-export function BsmButton({className, style, imgClassName, iconClassName, icon, image, text, type, active, withBar = true, disabled, onClickOutside, onClick, typeColor, color, title}: propsType) {
+export function BsmButton({className, style, imgClassName, iconClassName, icon, image, text, type, active, withBar = true, disabled, onClickOutside, onClick, typeColor, color, title, iconColor, textClassName}: Props) {
- const t = useTranslation();
- const secondColor = useThemeColor("second-color");
+ const t = useTranslation();
+ const secondColor = useThemeColor("second-color");
+ const ref = useRef(null);
+ useClickOutside(ref, onClickOutside);
- const primaryColor = typeColor === "primary" && useThemeColor("first-color");
+ const primaryColor = typeColor === "primary" && useThemeColor("first-color");
- const textColor = (() => {
- if(primaryColor){ return getCorrectTextColor(primaryColor); }
- return typeColor ? "white" : undefined;
- })();
+ const textColor = (() => {
+ if(primaryColor){ return getCorrectTextColor(primaryColor); }
+ return typeColor ? "white" : undefined;
+ })();
- const renderTypeColor = (() => {
- if(typeColor === "primary"){ return ""; }
- if(!typeColor){ return `bg-light-main-color-2 dark:bg-main-color-2 ${!withBar && "hover:bg-light-main-color-3 dark:hover:bg-main-color-3"}`; }
- if(typeColor === "cancel"){ return "bg-gray-500"; }
- if(typeColor === "error"){ return "bg-red-500"; }
- if(typeColor === "success"){ return "bg-green-500"; }
- return "";
- })()
+ const renderTypeColor = (() => {
+ if(typeColor === "primary"){ return ""; }
+ if(!typeColor){ return `bg-light-main-color-2 dark:bg-main-color-2 ${!withBar && "hover:brightness-125"}`; }
+ if(typeColor === "cancel"){ return "bg-gray-500"; }
+ if(typeColor === "error"){ return "bg-red-500"; }
+ if(typeColor === "success"){ return "bg-green-500"; }
+ return "";
+ })();
- return (
-
onClickOutside && onClickOutside(e)}>
-
- { image &&
}
- { icon && }
- {text && (type === "submit" ? : {t(text)})}
- { withBar && (
-
- )}
-
-
- )
+ return (
+
+ { image &&
}
+ { icon && }
+ {text && (type === "submit" ? : {t(text)})}
+ { withBar && (
+
+ )}
+
+ )
}
diff --git a/src/renderer/components/shared/bsm-dropdown-button.component.tsx b/src/renderer/components/shared/bsm-dropdown-button.component.tsx
index 9f809e51..6c067286 100644
--- a/src/renderer/components/shared/bsm-dropdown-button.component.tsx
+++ b/src/renderer/components/shared/bsm-dropdown-button.component.tsx
@@ -1,31 +1,63 @@
-import { useState } from "react"
-import { BsmIconType } from "../svgs/bsm-icon.component"
+import { useRef, useState } from "react"
+import { BsmIconType, BsmIcon } from "../svgs/bsm-icon.component"
import { BsmButton } from "./bsm-button.component"
-import { BsmIcon } from "../svgs/bsm-icon.component"
import { useTranslation } from "renderer/hooks/use-translation.hook"
+import { AnimatePresence } from "framer-motion"
+import { useClickOutside } from "renderer/hooks/use-click-outside.hook"
export interface DropDownItem {text: string, icon?: BsmIconType, onClick?: () => void}
-type Props = {className?: string, items?: DropDownItem[], align?: "left"|"right", withBar?: boolean, icon?: BsmIconType, buttonClassName?: string, menuTranslationY?: string|number}
+type Props = {
+ className?: string,
+ items?: DropDownItem[],
+ align?: "left"|"right"|"center",
+ withBar?: boolean,
+ icon?: BsmIconType,
+ buttonClassName?: string,
+ menuTranslationY?: string|number
+ children?: JSX.Element,
+ text?: string,
+ textClassName?: string
+}
-export function BsmDropdownButton({className, items, align, withBar = true, icon = "settings", buttonClassName, menuTranslationY}: Props) {
+export function BsmDropdownButton({className, items, align, withBar = true, icon = "settings", buttonClassName, menuTranslationY, children, text, textClassName}: Props) {
const [expanded, setExpanded] = useState(false)
const t = useTranslation();
+ const ref = useRef(null)
+ useClickOutside(ref, () => setExpanded(false));
const defaultButtonClassName = "relative z-[1] p-1 rounded-md text-inherit w-full h-full shadow-md shadow-black"
+ const handleClickOutside = () => {
+ if(children){ return; }
+ setExpanded(false);
+ }
+
+ const alignClass = (() => {
+ if(align === "center"){ return "right-1/2 origin-top-right translate-x-[50%]" }
+ if(align === "left"){ return "left-0 origin-top-left"; }
+ return "right-0 origin-top-right";
+ })()
+
return (
-
-
setExpanded(!expanded)} className={buttonClassName ?? defaultButtonClassName} icon={icon} active={expanded} onClickOutside={() => {setExpanded(false)}} withBar={withBar}/>
-
- { items?.map((i, index) => !!i &&(
-
- {i.icon &&
}
+
+
setExpanded(!expanded)} className={buttonClassName ?? defaultButtonClassName} icon={icon} active={expanded} onClickOutside={handleClickOutside} withBar={withBar} text={text}/>
+
+ { items?.map((i) => i && (
+
i.onClick?.()} className="flex w-full px-3 py-2 hover:backdrop-brightness-150">
+ {i.icon && }
{t(i.text)}
))}
)
}
diff --git a/src/renderer/components/shared/bsm-image.component.tsx b/src/renderer/components/shared/bsm-image.component.tsx
index 1e6aa242..3fc99e5d 100644
--- a/src/renderer/components/shared/bsm-image.component.tsx
+++ b/src/renderer/components/shared/bsm-image.component.tsx
@@ -1,8 +1,42 @@
-import { CSSProperties } from "react";
+import { CSSProperties, forwardRef, SyntheticEvent, useState } from "react";
-export function BsmImage({className, image, errorImage, placeholder, loading, style}: {className?: string, image: string, errorImage?: string, placeholder?: string, loading?: "lazy"|"eager", style?: CSSProperties}) {
-
- return (
-
{ currentTarget.onerror = null; currentTarget.src = errorImage || "" }} style={{...style, backgroundImage: `url(${placeholder})`, backgroundSize: "cover"}} alt=""/>
- )
+type Props = {
+ className?: string,
+ image: string,
+ errorImage?: string,
+ placeholder?: string,
+ loading?: "lazy"|"eager",
+ style?: CSSProperties
+ title?: string,
+ onClick?: (e: MouseEvent) => void
}
+
+export const BsmImage = forwardRef(({className, image, errorImage, placeholder, loading, style, title, onClick}: Props, ref) => {
+
+ const [isLoaded, setIsLoaded] = useState(false);
+
+ image = image || (placeholder||errorImage);
+
+ const styles: CSSProperties = (() => {
+ return {
+ ...style,
+ ...(!isLoaded && {backgroundImage: `url(${placeholder})`}),
+ ...(!isLoaded && {backgroundSize: "cover"}),
+ ...(!isLoaded && {backgroundPosition: "center"}),
+ }
+ })();
+
+ const handleError = (e: SyntheticEvent
) => {
+ e.currentTarget.onerror = null;
+ e.currentTarget.src = errorImage || "";
+ }
+
+ const handleLoaded = () => {
+ setIsLoaded(() => true);
+ }
+
+ return (
+ // @ts-ignore
+ onClick?.(e)} alt=" "/>
+ )
+})
diff --git a/src/renderer/components/shared/bsm-link.component.tsx b/src/renderer/components/shared/bsm-link.component.tsx
new file mode 100644
index 00000000..a3b9930e
--- /dev/null
+++ b/src/renderer/components/shared/bsm-link.component.tsx
@@ -0,0 +1,23 @@
+import { LinkOpenerService } from "renderer/services/link-opener.service"
+
+type Props = {
+ className?: string,
+ href?: string,
+ internal?: boolean
+ children?: React.ReactNode,
+ style?: React.CSSProperties
+}
+
+export function BsmLink({className, href, children, style, internal}: Props) {
+
+ const linkOpener = LinkOpenerService.getInstance();
+
+ const openLink = () => {
+ if(!href){ return; }
+ linkOpener.open(href, internal);
+ }
+
+ return (
+ {e.stopPropagation(); openLink()}} style={style}>{children}
+ )
+}
diff --git a/src/renderer/components/shared/bsm-map-preview.component.tsx b/src/renderer/components/shared/bsm-map-preview.component.tsx
new file mode 100644
index 00000000..815f942c
--- /dev/null
+++ b/src/renderer/components/shared/bsm-map-preview.component.tsx
@@ -0,0 +1,28 @@
+import { AnimatePresence, motion } from "framer-motion";
+import { useRef } from "react";
+import { useClickOutside } from "renderer/hooks/use-click-outside.hook";
+import { useObservable } from "renderer/hooks/use-observable.hook"
+import { LinkOpenerService } from "renderer/services/link-opener.service";
+
+export function BsmIframeView() {
+
+ const linkService = LinkOpenerService.getInstance()
+
+ const iframeUrl = useObservable(linkService.iframeLink$);
+ const ref = useRef(null);
+ useClickOutside(ref, () => linkService.closeIframe());
+
+ return (
+
+ {iframeUrl && (
+ 