From 99a65db91b21245d22e484b3ea1e8f069a98899d Mon Sep 17 00:00:00 2001 From: zerrium Date: Tue, 3 Mar 2026 16:20:59 +0700 Subject: [PATCH] Fixed fullscreen mode --- src/components/Page.tsx | 5 +- .../DateTime Tools/DateTimeCalculator.tsx | 45 ++-- .../DateTime Tools/DateTimeConverter.tsx | 29 ++- src/pages/Debugging Tools/Cron.tsx | 29 ++- src/pages/Home.tsx | 211 ++++++++++-------- src/pages/Security Tools/HashCalculator.tsx | 29 ++- .../Security Tools/PasswordGenerator.tsx | 27 ++- src/pages/Security Tools/UuidGenerator.tsx | 27 ++- src/pages/Security Tools/UuidValidator.tsx | 29 ++- src/pages/Text Tools/CharacterCounter.tsx | 39 +++- src/pages/Text Tools/Regex.tsx | 29 ++- 11 files changed, 351 insertions(+), 148 deletions(-) diff --git a/src/components/Page.tsx b/src/components/Page.tsx index 86e8e55..ad53f75 100644 --- a/src/components/Page.tsx +++ b/src/components/Page.tsx @@ -229,7 +229,7 @@ const SidebarContent = ({ onClose, isFullScreen, ...rest }: SidebarProps) => { {link.child.map((child) => ( ((search.length === 0 || url === child.link || child.name.toLowerCase().includes(search.toLowerCase()) || child?.keyword?.split(',')?.includes(search.toLowerCase())) && ( + background={url === child.link ? activeColor : "none"} onClick={onClose}> {child.name} )) @@ -239,7 +239,8 @@ const SidebarContent = ({ onClose, isFullScreen, ...rest }: SidebarProps) => { ) : ( + background={url === link.link || (index === 0 && url.length === 0) ? activeColor : "none"} + onClick={onClose}> {link.name} )} diff --git a/src/pages/DateTime Tools/DateTimeCalculator.tsx b/src/pages/DateTime Tools/DateTimeCalculator.tsx index d4984e5..293f405 100644 --- a/src/pages/DateTime Tools/DateTimeCalculator.tsx +++ b/src/pages/DateTime Tools/DateTimeCalculator.tsx @@ -1,17 +1,20 @@ import { type ChangeEvent, useEffect, useState } from "react"; import { - Button, - Flex, - FormControl, - Heading, - Input, Select, - Stack, - Switch, - Text, Textarea, - useColorModeValue, - useToast + Button, + Flex, + FormControl, + Heading, IconButton, + Input, Select, + Stack, + Switch, + Text, Textarea, Tooltip, + useColorModeValue, + useToast } from "@chakra-ui/react"; import moment from 'moment/moment.js'; +import type { IOutletContext } from "../../interface/Interfaces.ts" +import { LuShrink } from "react-icons/lu"; +import { useOutletContext } from "react-router-dom"; const DateTimeCalculator = () => { const [textBoxInput1, setTextBoxInput1] = useState("") @@ -23,6 +26,8 @@ const DateTimeCalculator = () => { const [now, setNow] = useState(moment()) const [unit, setUnit] = useState('d') + const { isFullScreen, setIsFullScreen } = useOutletContext() + setInterval(() => { setNow(moment()) }, 1000) @@ -131,9 +136,23 @@ const DateTimeCalculator = () => { p={6} mt={12} mb={2}> - - Date Time Calculator - + + + Date Time Calculator + + {isFullScreen && ( + + } + size="sm" + m={0} + onClick={() => setIsFullScreen(!isFullScreen)} + /> + + )} + Duration between 2 Dates diff --git a/src/pages/DateTime Tools/DateTimeConverter.tsx b/src/pages/DateTime Tools/DateTimeConverter.tsx index dc89db7..4bce864 100644 --- a/src/pages/DateTime Tools/DateTimeConverter.tsx +++ b/src/pages/DateTime Tools/DateTimeConverter.tsx @@ -3,15 +3,18 @@ import { Button, Flex, FormControl, - Heading, + Heading, IconButton, Input, Stack, Switch, - Text, + Text, Tooltip, useColorModeValue, useToast } from "@chakra-ui/react"; import moment from 'moment/moment.js'; +import type { IOutletContext } from "../../interface/Interfaces.ts" +import { LuShrink } from "react-icons/lu"; +import { useOutletContext } from "react-router-dom"; const DateTimeConverter = () => { const [textBoxInput, setTextBoxInput] = useState("") @@ -21,6 +24,8 @@ const DateTimeConverter = () => { const [error, setError] = useState(false) const [now, setNow] = useState(moment()) + const { isFullScreen, setIsFullScreen } = useOutletContext() + setInterval(() => { setNow(moment()) }, 1000) @@ -96,9 +101,23 @@ const DateTimeConverter = () => { p={6} mt={12} mb={2}> - - {decode ? "UNIX Timestamp to Date Time" : "Date Time to UNIX Timestamp"} - + + + {decode ? "UNIX Timestamp to Date Time" : "Date Time to UNIX Timestamp"} + + {isFullScreen && ( + + } + size="sm" + m={0} + onClick={() => setIsFullScreen(!isFullScreen)} + /> + + )} + { const [textBox, setTextBox] = useState("* * * * *") @@ -21,6 +24,8 @@ const Cron = () => { const [nextDate, setNextDate] = useState("") const [desc, setDesc] = useState("") + const { isFullScreen, setIsFullScreen } = useOutletContext() + const toast = useToast({ position: "top", duration: 2000, @@ -70,9 +75,23 @@ const Cron = () => { borderWidth={1} borderColor={useColorModeValue('gray.200', 'gray.700')} p={6}> - - Cron Viewer - + + + Cron Viewer + + {isFullScreen && ( + + } + size="sm" + m={0} + onClick={() => setIsFullScreen(!isFullScreen)} + /> + + )} + Note: There is no definitive standard of cron format. However, this tool supports both Quartz format (Java) and { const textColor = useColorModeValue("gray.500", "gray.400") + const { isFullScreen, setIsFullScreen } = useOutletContext() useEffect(() => { const originalRestoration = window.history.scrollRestoration; @@ -164,91 +168,106 @@ const Home = () => { }, []); return ( - - - - Welcome to
- - Zerrium Tool Kit - - - - A handy website for developers that provides many useful tools to help with your development. - - - - - {features.map((feature) => ( - - - - - - {feature.title} - - {feature?.note ? ( - <> - {feature.text} -
{feature.note} - - ) : feature.text} - - - - ))} - - - - - What's new? - - - {changeLogs.map((log) => ( - - - - - Version {log.version} - - - {log.date} - - - - {log?.note && {log.note}} - {log?.changes && log?.changes?.length > 0 && ( - - {log.changes.map((change, index) => ( - - {change} - - ))} - - )} - - - ))} - - - - - - + <> + + + } + size="md" + marginRight={2} + onClick={() => setIsFullScreen(!isFullScreen)} + /> + + + + + + Welcome to
+ + Zerrium Tool Kit + + + + A handy website for developers that provides many useful tools to help with your development. + + + + + {features.map((feature) => ( + + + + + + {feature.title} + + {feature?.note ? ( + <> + {feature.text} +
{feature.note} + + ) : feature.text} + + + + ))} + + + + + What's new? + + + {changeLogs.map((log) => ( + + + + + Version {log.version} + + + {log.date} + + + + {log?.note && {log.note}} + {log?.changes && log?.changes?.length > 0 && ( + + {log.changes.map((change, index) => ( + + {change} + + ))} + + )} + + + ))} + + + + + + + + ) } diff --git a/src/pages/Security Tools/HashCalculator.tsx b/src/pages/Security Tools/HashCalculator.tsx index 93af4a2..526a671 100644 --- a/src/pages/Security Tools/HashCalculator.tsx +++ b/src/pages/Security Tools/HashCalculator.tsx @@ -3,17 +3,20 @@ import { Button, Flex, FormControl, - Heading, + Heading, IconButton, Input, Select, Stack, Switch, Text, - Textarea, + Textarea, Tooltip, useColorModeValue, useToast } from "@chakra-ui/react"; import { type Hash, keccak224, keccak256, keccak384, keccak512, sha3_224, sha3_256, sha3_384, sha3_512 } from 'js-sha3'; +import type { IOutletContext } from "../../interface/Interfaces.ts" +import { LuShrink } from "react-icons/lu"; +import { useOutletContext } from "react-router-dom"; const hashAlgorithm: { label: string, key: string, lib?: string, function?:Hash | void }[] = [ { label: "SHA3-256", key: "sha3_256", lib: "js-sha3", function: sha3_256 }, @@ -45,6 +48,8 @@ const HashCalculator = () => { const [fileData, setFileData] = useState(new ArrayBuffer()) const [fileLoading, setFileLoading] = useState(false) + const { isFullScreen, setIsFullScreen } = useOutletContext() + let fileUpload: HTMLInputElement | null const data = new FileReader() @@ -138,9 +143,23 @@ const HashCalculator = () => { p={6} mt={12} mb={2}> - - Hash Calculator - + + + Hash Calculator + + {isFullScreen && ( + + } + size="sm" + m={0} + onClick={() => setIsFullScreen(!isFullScreen)} + /> + + )} + diff --git a/src/pages/Security Tools/PasswordGenerator.tsx b/src/pages/Security Tools/PasswordGenerator.tsx index 9119676..5be06a4 100644 --- a/src/pages/Security Tools/PasswordGenerator.tsx +++ b/src/pages/Security Tools/PasswordGenerator.tsx @@ -9,8 +9,11 @@ import { Textarea, Text, useColorModeValue, - useToast, Checkbox + useToast, Checkbox, Tooltip, IconButton } from "@chakra-ui/react"; +import type { IOutletContext } from "../../interface/Interfaces.ts" +import { LuShrink } from "react-icons/lu"; +import { useOutletContext } from "react-router-dom"; const lowerAlphabets = "abcdefghijklmnopqrstuvwxyz" const upperAlphabets = "ABCDEFGHIJKLMNOPQRSTUVWXYZ" @@ -37,6 +40,8 @@ const PasswordGenerator = () => { const [isSpecialURL, setIsSpecialURL] = useState(false) const [avoidAmbiguous, setAvoidAmbiguous] = useState(false) + const { isFullScreen, setIsFullScreen } = useOutletContext() + const toast = useToast({ position: "top", duration: 2000, @@ -244,9 +249,23 @@ const PasswordGenerator = () => { p={6} mt={12} mb={2}> - - Password Generator Options - + + + Password Generator Options + + {isFullScreen && ( + + } + size="sm" + m={0} + onClick={() => setIsFullScreen(!isFullScreen)} + /> + + )} + diff --git a/src/pages/Security Tools/UuidGenerator.tsx b/src/pages/Security Tools/UuidGenerator.tsx index 8e979e6..fac3a5b 100644 --- a/src/pages/Security Tools/UuidGenerator.tsx +++ b/src/pages/Security Tools/UuidGenerator.tsx @@ -11,8 +11,11 @@ import { Textarea, Text, useColorModeValue, - useToast + useToast, Tooltip, IconButton } from "@chakra-ui/react"; +import type { IOutletContext } from "../../interface/Interfaces.ts" +import { LuShrink } from "react-icons/lu"; +import { useOutletContext } from "react-router-dom"; const generateUuid = () => { return uuidv4() @@ -23,6 +26,8 @@ const UuidGenerator = () => { const [numberOfUuid, setNumberOfUuid] = useState(2) const [areaTextBox, setAreaTextBox] = useState("") + const { isFullScreen, setIsFullScreen } = useOutletContext() + const toast = useToast({ position: "top", duration: 2000, @@ -75,9 +80,23 @@ const UuidGenerator = () => { p={6} mt={12} mb={2}> - - Random UUID Generator - + + + Random UUID Generator + + {isFullScreen && ( + + } + size="sm" + m={0} + onClick={() => setIsFullScreen(!isFullScreen)} + /> + + )} + { return validate(uuid) @@ -22,6 +25,8 @@ const UuidValidator = () => { const [textBoxResult, setTextBoxResult] = useState("") const [status, setStatus] = useState<"Invalid" | "Valid">("Invalid") + const { isFullScreen, setIsFullScreen } = useOutletContext() + const toast = useToast({ position: "top", duration: 2000, @@ -79,9 +84,23 @@ const UuidValidator = () => { borderWidth={1} borderColor={useColorModeValue('gray.200', 'gray.700')} p={6}> - - UUID Validator - + + + UUID Validator + + {isFullScreen && ( + + } + size="sm" + m={0} + onClick={() => setIsFullScreen(!isFullScreen)} + /> + + )} + Note: This tool parses any UUID versions according to RFC 9562 Universally Unique IDentifiers standard. diff --git a/src/pages/Text Tools/CharacterCounter.tsx b/src/pages/Text Tools/CharacterCounter.tsx index 6f337a7..930593b 100644 --- a/src/pages/Text Tools/CharacterCounter.tsx +++ b/src/pages/Text Tools/CharacterCounter.tsx @@ -1,8 +1,25 @@ -import { Badge, Flex, FormControl, Heading, Stack, Textarea, useColorModeValue } from "@chakra-ui/react" +import { + Badge, + Flex, + FormControl, + Heading, + IconButton, + Stack, + Textarea, + Tooltip, + useColorModeValue +} from "@chakra-ui/react" import { useState } from "react"; +import type { IOutletContext } from "../../interface/Interfaces.ts" +import { LuShrink } from "react-icons/lu"; +import { useOutletContext } from "react-router-dom"; + const CharacterCounter = () => { const [text, setText] = useState(""); const [count, setCount] = useState(0); + + const { isFullScreen, setIsFullScreen } = useOutletContext() + return ( { borderWidth={1} borderColor={useColorModeValue('gray.200', 'gray.700')} p={6}> - - Character Counter - + + + Character Counter + + {isFullScreen && ( + + } + size="sm" + m={0} + onClick={() => setIsFullScreen(!isFullScreen)} + /> + + )} +