customizable icon color
This commit is contained in:
Daniel
@@ -1,10 +1,15 @@
|
||||
import React, { useState } from "react";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faPenToSquare, faPlus } from "@fortawesome/free-solid-svg-icons";
|
||||
import {
|
||||
faFolder,
|
||||
faPenToSquare,
|
||||
faPlus,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import useCollectionStore from "@/store/collections";
|
||||
import { CollectionIncludingMembers } from "@/types/global";
|
||||
import RequiredBadge from "../../RequiredBadge";
|
||||
import SubmitButton from "@/components/SubmitButton";
|
||||
import { HexColorPicker } from "react-colorful";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
|
||||
type Props = {
|
||||
toggleCollectionModal: Function;
|
||||
@@ -46,21 +51,48 @@ export default function CollectionInfo({
|
||||
Name
|
||||
<RequiredBadge />
|
||||
</p>
|
||||
<input
|
||||
value={collection.name}
|
||||
onChange={(e) =>
|
||||
setCollection({ ...collection, name: e.target.value })
|
||||
}
|
||||
type="text"
|
||||
placeholder="e.g. Example Collection"
|
||||
className="w-full rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
|
||||
/>
|
||||
<div className="flex flex-col gap-3">
|
||||
<input
|
||||
value={collection.name}
|
||||
onChange={(e) =>
|
||||
setCollection({ ...collection, name: e.target.value })
|
||||
}
|
||||
type="text"
|
||||
placeholder="e.g. Example Collection"
|
||||
className="w-full rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
|
||||
/>
|
||||
<div className="color-picker flex justify-between">
|
||||
<div className="flex flex-col justify-between items-center w-32">
|
||||
<p className="text-sm w-full font-bold text-sky-300 mb-2">
|
||||
Icon Color
|
||||
</p>
|
||||
<div style={{ color: collection.color || "#7dd3fc" }}>
|
||||
<FontAwesomeIcon
|
||||
icon={faFolder}
|
||||
className="w-12 h-12 drop-shadow"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="py-1 px-2 rounded-md text-xs font-semibold cursor-pointer text-gray-500 hover:bg-slate-200 duration-100"
|
||||
onClick={() =>
|
||||
setCollection({ ...collection, color: "#7dd3fc" })
|
||||
}
|
||||
>
|
||||
Reset
|
||||
</div>
|
||||
</div>
|
||||
<HexColorPicker
|
||||
color={collection.color || "#7dd3fc"}
|
||||
onChange={(e) => setCollection({ ...collection, color: e })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full">
|
||||
<p className="text-sm font-bold text-sky-300 mb-2">Description</p>
|
||||
<textarea
|
||||
className="w-full h-40 resize-none border rounded-md duration-100 bg-white p-3 outline-none border-sky-100 focus:border-sky-500"
|
||||
className="w-full h-[11.4rem] resize-none border rounded-md duration-100 bg-white p-3 outline-none border-sky-100 focus:border-sky-500"
|
||||
placeholder="The purpose of this Collection..."
|
||||
value={collection.description}
|
||||
onChange={(e) =>
|
||||
|
||||
@@ -7,9 +7,16 @@ interface SidebarItemProps {
|
||||
icon: ReactElement;
|
||||
path: string;
|
||||
className?: string;
|
||||
iconColor?: string;
|
||||
}
|
||||
|
||||
export default function ({ text, icon, path, className }: SidebarItemProps) {
|
||||
export default function ({
|
||||
text,
|
||||
icon,
|
||||
path,
|
||||
className,
|
||||
iconColor,
|
||||
}: SidebarItemProps) {
|
||||
const router = useRouter();
|
||||
const [active, setActive] = useState(false);
|
||||
|
||||
@@ -23,10 +30,13 @@ export default function ({ text, icon, path, className }: SidebarItemProps) {
|
||||
<div
|
||||
className={`${
|
||||
active ? "bg-sky-500" : "hover:bg-slate-200 bg-gray-100"
|
||||
} duration-100 py-1 px-4 cursor-pointer flex items-center gap-2 w-full ${className}`}
|
||||
} duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md ${className}`}
|
||||
>
|
||||
{React.cloneElement(icon, {
|
||||
className: `w-4 h-4 ${active ? "text-white" : "text-sky-300"}`,
|
||||
className: "w-4 h-4",
|
||||
style: {
|
||||
color: active ? "white" : iconColor ? iconColor : "#7dd3fc",
|
||||
},
|
||||
})}
|
||||
<p
|
||||
className={`${active ? "text-white" : "text-sky-900"} truncate w-4/6`}
|
||||
|
||||
@@ -27,84 +27,88 @@ export default function ({ className }: { className?: string }) {
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`bg-gray-100 h-screen w-64 xl:w-80 overflow-y-auto border-solid border-r-sky-100 border z-20 ${className}`}
|
||||
className={`bg-gray-100 h-screen w-64 xl:w-80 overflow-y-auto border-solid border-r-sky-100 px-2 border z-20 ${className}`}
|
||||
>
|
||||
<p className="p-4 text-sky-500 font-bold text-2xl my-2 leading-4">
|
||||
<p className="p-3 text-sky-500 font-bold text-2xl my-2 leading-4">
|
||||
Linkwarden
|
||||
</p>
|
||||
|
||||
<Link href="/dashboard">
|
||||
<div
|
||||
className={`${
|
||||
active === "/dashboard"
|
||||
? "bg-sky-500"
|
||||
: "hover:bg-slate-200 bg-gray-100"
|
||||
} outline-sky-100 outline-1 duration-100 py-1 px-4 cursor-pointer flex items-center gap-2`}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faChartSimple}
|
||||
className={`w-4 h-4 ${
|
||||
active === "/dashboard" ? "text-white" : "text-sky-300"
|
||||
}`}
|
||||
/>
|
||||
<p
|
||||
<div className="flex flex-col gap-1">
|
||||
<Link href="/dashboard">
|
||||
<div
|
||||
className={`${
|
||||
active === "/dashboard" ? "text-white" : "text-sky-900"
|
||||
}`}
|
||||
active === "/dashboard"
|
||||
? "bg-sky-500"
|
||||
: "hover:bg-slate-200 bg-gray-100"
|
||||
} outline-sky-100 outline-1 duration-100 py-1 px-2 rounded-md cursor-pointer flex items-center gap-2`}
|
||||
>
|
||||
Dashboard
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
<FontAwesomeIcon
|
||||
icon={faChartSimple}
|
||||
className={`w-4 h-4 ${
|
||||
active === "/dashboard" ? "text-white" : "text-sky-300"
|
||||
}`}
|
||||
/>
|
||||
<p
|
||||
className={`${
|
||||
active === "/dashboard" ? "text-white" : "text-sky-900"
|
||||
}`}
|
||||
>
|
||||
Dashboard
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<Link href="/collections">
|
||||
<div
|
||||
className={`${
|
||||
active === "/collections" ? "bg-sky-500" : "hover:bg-slate-200"
|
||||
} outline-sky-100 outline-1 duration-100 py-1 px-4 cursor-pointer flex items-center gap-2`}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faBox}
|
||||
className={`w-4 h-4 ${
|
||||
active === "/collections" ? "text-white" : "text-sky-300"
|
||||
}`}
|
||||
/>
|
||||
<p
|
||||
<Link href="/collections">
|
||||
<div
|
||||
className={`${
|
||||
active === "/collections" ? "text-white" : "text-sky-900"
|
||||
}`}
|
||||
active === "/collections" ? "bg-sky-500" : "hover:bg-slate-200"
|
||||
} outline-sky-100 outline-1 duration-100 py-1 px-2 rounded-md cursor-pointer flex items-center gap-2`}
|
||||
>
|
||||
All Collections
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
<FontAwesomeIcon
|
||||
icon={faBox}
|
||||
className={`w-4 h-4 ${
|
||||
active === "/collections" ? "text-white" : "text-sky-300"
|
||||
}`}
|
||||
/>
|
||||
<p
|
||||
className={`${
|
||||
active === "/collections" ? "text-white" : "text-sky-900"
|
||||
}`}
|
||||
>
|
||||
All Collections
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<Link href="/links">
|
||||
<div
|
||||
className={`${
|
||||
active === "/links"
|
||||
? "bg-sky-500"
|
||||
: "hover:bg-slate-200 bg-gray-100"
|
||||
} outline-sky-100 outline-1 duration-100 py-1 px-4 cursor-pointer flex items-center gap-2`}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faBookmark}
|
||||
className={`w-4 h-4 ${
|
||||
active === "/links" ? "text-white" : "text-sky-300"
|
||||
}`}
|
||||
/>
|
||||
<p
|
||||
className={`${active === "/links" ? "text-white" : "text-sky-900"}`}
|
||||
<Link href="/links">
|
||||
<div
|
||||
className={`${
|
||||
active === "/links"
|
||||
? "bg-sky-500"
|
||||
: "hover:bg-slate-200 bg-gray-100"
|
||||
} outline-sky-100 outline-1 duration-100 py-1 px-2 rounded-md cursor-pointer flex items-center gap-2`}
|
||||
>
|
||||
All Links
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
<FontAwesomeIcon
|
||||
icon={faBookmark}
|
||||
className={`w-4 h-4 ${
|
||||
active === "/links" ? "text-white" : "text-sky-300"
|
||||
}`}
|
||||
/>
|
||||
<p
|
||||
className={`${
|
||||
active === "/links" ? "text-white" : "text-sky-900"
|
||||
}`}
|
||||
>
|
||||
All Links
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="text-gray-500 mt-5">
|
||||
<p className="text-sm px-4 mb-2">Collections</p>
|
||||
<p className="text-sm mb-2 pl-3 font-semibold">Collections</p>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex flex-col gap-1">
|
||||
{collections
|
||||
.sort((a, b) => a.name.localeCompare(b.name))
|
||||
.map((e, i) => {
|
||||
@@ -113,6 +117,7 @@ export default function ({ className }: { className?: string }) {
|
||||
key={i}
|
||||
text={e.name}
|
||||
icon={<FontAwesomeIcon icon={faFolder} />}
|
||||
iconColor={e.color}
|
||||
path={`/collections/${e.id}`}
|
||||
className="capitalize"
|
||||
/>
|
||||
@@ -120,9 +125,9 @@ export default function ({ className }: { className?: string }) {
|
||||
})}
|
||||
</div>
|
||||
<div className="text-gray-500 mt-5">
|
||||
<p className="text-sm px-4 mb-2">Tags</p>
|
||||
<p className="text-sm mb-2 pl-3 font-semibold">Tags</p>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex flex-col gap-1">
|
||||
{tags
|
||||
.sort((a, b) => a.name.localeCompare(b.name))
|
||||
.map((e, i) => {
|
||||
|
||||
Reference in New Issue
Block a user