diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..c1a6f66 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,4 @@ +{ + "singleQuote": true, + "trailingComma": "es5" +} diff --git a/package-lock.json b/package-lock.json index 4c1f5cf..d402009 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11016,6 +11016,12 @@ "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz", "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=" }, + "prettier": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz", + "integrity": "sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==", + "dev": true + }, "pretty-bytes": { "version": "5.6.0", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz", diff --git a/package.json b/package.json index 6383ce2..3b7581f 100644 --- a/package.json +++ b/package.json @@ -51,6 +51,7 @@ "@craco/craco": "^6.3.0", "autoprefixer": "^9.8.7", "postcss": "^7.0.38", + "prettier": "^2.7.1", "prop-types": "^15.7.2", "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.16" } diff --git a/src/components/clock.js b/src/components/clock.js index 6becdec..53fa325 100644 --- a/src/components/clock.js +++ b/src/components/clock.js @@ -1,19 +1,20 @@ import React, { useEffect, useState } from "react"; import { DateTime } from "luxon"; -function Clock(props) { +function Clock({ timeFormat }) { const [time, setTime] = useState( DateTime.now().toLocaleString(DateTime.DATETIME_MED_WITH_SECONDS) ); useEffect(() => { const timer = setInterval(() => { - setTime(DateTime.now().toFormat("cccc · LLLL dd, yyyy · hh:mm:ss a")); + const hourFormat = timeFormat === "12" ? "hh" : "HH" + setTime(DateTime.now().toFormat(`cccc · LLLL dd, yyyy · ${hourFormat}:mm:ss a`)); }, 1000); return () => { clearInterval(timer); }; - }, []); + }, [timeFormat]); return
{time}
; } diff --git a/src/components/settings.js b/src/components/settings.js new file mode 100644 index 0000000..a02d92e --- /dev/null +++ b/src/components/settings.js @@ -0,0 +1,72 @@ +import React from 'react'; +import { Drawer, TextField, Typography, Stack, Switch } from '@mui/material'; + +function Settings({ + open, + closeModal, + changeName, + changeTimeFormat, + checkedFormat, + username, +}) { + const handleNameChange = (event) => { + changeName(event.target.value); + }; + + const handleTimeFormatChange = (event) => { + const value = event.target.checked; + const format = value ? '24' : '12'; + changeTimeFormat(format); + }; + + return ( + + +
+
+ Enter your name +
+
+ +
+
+ Time Format +
+
+ + 12 Hour + + 24 Hour + +
+
+ + + ); +} + +export default Settings; diff --git a/src/pages/index.js b/src/pages/index.js index 360b49a..e074eaa 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -2,11 +2,15 @@ import React, { useEffect, useState } from "react"; import { Blurhash } from "react-blurhash"; import { FullScreen, useFullScreenHandle } from "react-full-screen"; import { retrieveImage } from "../util/index"; -import InfoIcon from "@mui/icons-material/Info"; -import FullscreenIcon from "@mui/icons-material/Fullscreen"; -import AutorenewIcon from "@mui/icons-material/Autorenew"; -import CameraIcon from "@mui/icons-material/Camera"; -import SearchIcon from "@mui/icons-material/Search"; +import { getStorageItem, setStorageItem } from "../util/localstorage"; +import { + Info as InfoIcon, + Fullscreen as FullscreenIcon, + Autorenew as AutorenewIcon, + Camera as CameraIcon, + Search as SearchIcon, + Settings as SettingsIcon, +} from "@mui/icons-material"; import { ReactComponent as BingLogo } from "../svg/bing.svg"; import { ReactComponent as GoogleLogo } from "../svg/google.svg"; @@ -15,6 +19,7 @@ import { ReactComponent as YahooLogo } from "../svg/yahoo.svg"; import Clock from "../components/clock"; import About from "../components/about"; import Quote from "../components/quotes"; +import Settings from "../components/settings"; import Tooltip from "../components/Tooltip/tooltip"; function Home(props) { @@ -24,6 +29,11 @@ function Home(props) { const [data, setData] = useState({}); const [openAbout, setOpenAbout] = useState(false); const [searchText, setSearchText] = useState(""); + const [openSettings, setOpenSettings] = useState(false); + const [timeFormat, setTimeFormat] = useState( + getStorageItem("timeFormat") || "12" + ); + const [name, setName] = useState(getStorageItem("name") || ""); const handleFullscreen = useFullScreenHandle(); @@ -71,6 +81,21 @@ function Home(props) { setOpenAbout(value); }; + const handleSettingsDrawer = (value) => { + setOpenSettings(value); + }; + + const changeTimeFormat = (value) => { + setStorageItem("timeFormat", value); + setTimeFormat(value); + }; + + const changeName = (value) => { + console.log("asdasd"); + setStorageItem("name", value); + setName(value); + }; + const changeSearchEngine = () => { const engines = ["google", "bing", "yahoo"]; let idx = 0; @@ -134,7 +159,8 @@ function Home(props) { className="pl-4 h-full w-full outline-none text-sm text-white bg-transparent placeholder-gray-100" type="text" id="search" - placeholder="Search something.." + + placeholder={ (name.length > 0 ? "Hello " + name + "! " : "") + "Search something.."} value={searchText} autoComplete="off" onChange={(e) => setSearchText(e.target.value)} @@ -144,7 +170,7 @@ function Home(props) {
- +
@@ -202,10 +228,29 @@ function Home(props) { +   ·   + + +
) : null} + handleSettingsDrawer(false)} + checkedFormat={timeFormat === "24"} + changeTimeFormat={changeTimeFormat} + username={name} + changeName={changeName} + /> ); } diff --git a/src/util/localstorage.js b/src/util/localstorage.js new file mode 100644 index 0000000..99efd85 --- /dev/null +++ b/src/util/localstorage.js @@ -0,0 +1,9 @@ +const getStorageItem = (key) => { + return localStorage.getItem(key); +}; + +const setStorageItem = (key, value) => { + localStorage.setItem(key, value); +}; + +export { getStorageItem, setStorageItem };