xwx.moe/el.xwx.moe
xwx.moe/ el.xwx.moe
1
0
Disbranĉigi 0
Fontkodo Issues Tirpetoj Actions Packages Projects Eldonoj Wiki Activity

update navbar icons

This commit is contained in:
Yee Jia Wei 2023-12-16 22:46:29 +08:00
parent d52afd66f3
commit 9119402dac
4 changed files with 17 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
components/Navbar.tsx
View File

@ -1,6 +1,4 @@
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { signOut } from "next-auth/react"; import { signOut } from "next-auth/react";
import { faPlus, faBars, faCaretDown } from "@fortawesome/free-solid-svg-icons";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import ClickAwayHandler from "@/components/ClickAwayHandler"; import ClickAwayHandler from "@/components/ClickAwayHandler";
import Sidebar from "@/components/Sidebar"; import Sidebar from "@/components/Sidebar";
@ -52,16 +50,16 @@ export default function Navbar() {
const [uploadFileModal, setUploadFileModal] = useState(false); const [uploadFileModal, setUploadFileModal] = useState(false);
return ( return (
<div className="flex justify-between gap-2 items-center px-4 py-2 border-solid border-b-neutral-content border-b"> <div className="flex justify-between gap-2 items-center pl-3 pr-4 py-2 border-solid border-b-neutral-content border-b">
<div <div
onClick={toggleSidebar} onClick={toggleSidebar}
className="text-neutral btn btn-square btn-sm btn-ghost lg:hidden" className="text-neutral btn btn-square btn-sm btn-ghost lg:hidden"
> >
<FontAwesomeIcon icon={faBars} className="w-5 h-5" /> <i className="bi-list text-xl"></i>
</div> </div>
<SearchBar /> <SearchBar />
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<ToggleDarkMode className="sm:inline-grid hidden" /> <ToggleDarkMode className="hidden sm:inline-grid" />
<div className="dropdown dropdown-end"> <div className="dropdown dropdown-end">
<div className="tooltip tooltip-bottom" data-tip="Create New..."> <div className="tooltip tooltip-bottom" data-tip="Create New...">
@ -70,11 +68,12 @@ export default function Navbar() {
role="button" role="button"
className="flex min-w-[3.4rem] items-center group btn btn-accent dark:border-violet-400 text-white btn-sm px-2" className="flex min-w-[3.4rem] items-center group btn btn-accent dark:border-violet-400 text-white btn-sm px-2"
> >
<FontAwesomeIcon icon={faPlus} className="w-5 h-5" /> <span>
<FontAwesomeIcon <i className="bi-plus text-xl"></i>
icon={faCaretDown} </span>
className="w-2 h-2 sm:w-3 sm:h-3" <span>
/> <i className="bi-caret-down-fill text-xs"></i>
</span>
</div> </div>
</div> </div>
<ul className="dropdown-content z-[1] menu shadow bg-base-200 border border-neutral-content rounded-box w-40 mt-1"> <ul className="dropdown-content z-[1] menu shadow bg-base-200 border border-neutral-content rounded-box w-40 mt-1">

7
components/ProfilePhoto.tsx
View File

@ -1,6 +1,4 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faUser } from "@fortawesome/free-solid-svg-icons";
import Image from "next/image"; import Image from "next/image";
type Props = { type Props = {
@ -39,10 +37,7 @@ export default function ProfilePhoto({
{name ? ( {name ? (
<span className="text-2xl capitalize">{name.slice(0, 1)}</span> <span className="text-2xl capitalize">{name.slice(0, 1)}</span>
) : ( ) : (
<FontAwesomeIcon <i className="bi-person text-xl"></i>
icon={faUser}
className="w-1/2 h-1/2 aspect-square"
/>
)} )}
</div> </div>
</div> </div>

10
components/SearchBar.tsx
View File

@ -1,5 +1,3 @@
import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { toast } from "react-hot-toast"; import { toast } from "react-hot-toast";
@ -23,9 +21,9 @@ export default function SearchBar({ placeholder }: Props) {
<div className="flex items-center relative group"> <div className="flex items-center relative group">
<label <label
htmlFor="search-box" htmlFor="search-box"
className="inline-flex w-fit absolute left-1 pointer-events-none rounded-md p-1 text-primary" className="inline-flex items-center w-fit absolute left-1 pointer-events-none rounded-md p-1 text-primary"
> >
<FontAwesomeIcon icon={faMagnifyingGlass} className="w-5 h-5" /> <i className="bi-search"></i>
</label> </label>
<input <input
@ -49,11 +47,11 @@ export default function SearchBar({ placeholder }: Props) {
"/public/collections/" + "/public/collections/" +
router.query.id + router.query.id +
"?q=" + "?q=" +
encodeURIComponent(searchQuery || "") encodeURIComponent(searchQuery || ""),
); );
} else { } else {
return router.push( return router.push(
"/search?q=" + encodeURIComponent(searchQuery) "/search?q=" + encodeURIComponent(searchQuery),
); );
} }
} }

29
components/ToggleDarkMode.tsx
View File

@ -11,11 +11,7 @@ export default function ToggleDarkMode({ className }: Props) {
const [theme, setTheme] = useState(localStorage.getItem("theme")); const [theme, setTheme] = useState(localStorage.getItem("theme"));
const handleToggle = (e: any) => { const handleToggle = (e: any) => {
if (e.target.checked) { setTheme(e.target.checked ? "dark" : "light");
setTheme("dark");
} else {
setTheme("light");
}
}; };
useEffect(() => { useEffect(() => {
@ -36,27 +32,8 @@ export default function ToggleDarkMode({ className }: Props) {
className="theme-controller" className="theme-controller"
checked={localStorage.getItem("theme") === "light" ? false : true} checked={localStorage.getItem("theme") === "light" ? false : true}
/> />
<i className="bi-sun text-xl swap-on"></i>
{/* sun icon */} <i className="bi-moon text-xl swap-off"></i>
<svg
className="swap-on fill-current w-5 h-5"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 16 16"
>
<path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z" />
</svg>
{/* moon icon */}
<svg
className="swap-off fill-current w-5 h-5"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 16 16"
>
<path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278" />
</svg>
</label> </label>
</div> </div>
); );