Added a lamp

Author: derwebcoder

src/assets/icons/GraduationCapIcon.tsx

@@ -0,0 +1,27 @@
+type IconProps = {
+	className?: string;
+	overrideDefaultClassName?: boolean;
+};
+
+// Lucide
+export const GraduationCapIcon = (props: IconProps) => {
+	const { className, overrideDefaultClassName } = props;
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			viewBox="0 0 24 24"
+			strokeWidth={1.5}
+			stroke="currentColor"
+			stroke-linejoin="round"
+			className={
+				overrideDefaultClassName ? className : `size-5 ${className}`
+			}
+			role="presentation"
+		>
+			<path d="M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z"/>
+			<path d="M22 10v6"/>
+			<path d="M6 12.5V16a6 3 0 0 0 12 0v-3.5"/>
+		</svg>
+	);
+};

src/assets/icons/HomeIcon.tsx

@@ -0,0 +1,26 @@
+type IconProps = {
+	className?: string;
+	overrideDefaultClassName?: boolean;
+};
+
+// Lucide
+export const HomeIcon = (props: IconProps) => {
+	const { className, overrideDefaultClassName } = props;
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			viewBox="0 0 24 24"
+			strokeWidth={1.5}
+			stroke="currentColor"
+			stroke-linejoin="round"
+			className={
+				overrideDefaultClassName ? className : `size-5 ${className}`
+			}
+			role="presentation"
+		>
+			<path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"/>
+			<path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
+		</svg>
+	);
+};

src/assets/icons/LampIcon.tsx

@@ -0,0 +1,26 @@
+type IconProps = {
+	className?: string;
+	overrideDefaultClassName?: boolean;
+};
+
+// Lucide
+export const LampIcon = (props: IconProps) => {
+	const { className, overrideDefaultClassName } = props;
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			viewBox="0 0 24 24"
+			strokeWidth={1.5}
+			stroke="currentColor"
+			className={
+				overrideDefaultClassName ? className : `size-5 ${className}`
+			}
+			role="presentation"
+		>
+			<path d="M8 2h8l4 10H4L8 2Z"/>
+			<path d="M12 12v6"/>
+			<path d="M8 22v-2c0-1.1.9-2 2-2h4a2 2 0 0 1 2 2v2H8Z"/>
+		</svg>
+	);
+};

src/assets/icons/LampWallUpIcon.tsx

@@ -0,0 +1,26 @@
+type IconProps = {
+	className?: string;
+	overrideDefaultClassName?: boolean;
+};
+
+// Lucide
+export const LampWallUpIcon = (props: IconProps) => {
+	const { className, overrideDefaultClassName } = props;
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			viewBox="0 0 24 24"
+			strokeWidth={1.5}
+			stroke="currentColor"
+			className={
+				overrideDefaultClassName ? className : `size-5 ${className}`
+			}
+			role="presentation"
+		>
+			<path d="M11 4h6l3 7H8l3-7Z"/>
+			<path d="M14 11v5a2 2 0 0 1-2 2H8"/>
+			<path d="M4 15h2a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H4v-6Z"/>
+		</svg>
+	);
+};

src/assets/icons/ListTodoIcon.tsx

@@ -0,0 +1,29 @@
+type IconProps = {
+	className?: string;
+	overrideDefaultClassName?: boolean;
+};
+
+// Lucide
+export const ListTodoIcon = (props: IconProps) => {
+	const { className, overrideDefaultClassName } = props;
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			viewBox="0 0 24 24"
+			strokeWidth={1.5}
+			stroke="currentColor"
+			stroke-linejoin="round"
+			className={
+				overrideDefaultClassName ? className : `size-5 ${className}`
+			}
+			role="presentation"
+		>
+			<rect x="3" y="5" width="6" height="6" rx="1"/>
+			<path d="m3 17 2 2 4-4"/>
+			<path d="M13 6h8"/>
+			<path d="M13 12h8"/>
+			<path d="M13 18h8"/>
+		</svg>
+	);
+};

src/common/components/lamps/LampWallUp/LampWallUp.module.css

@@ -0,0 +1,8 @@
+.light {
+    background: conic-gradient(transparent 110deg, hsl(50 100% 80%), transparent 250deg);
+    width: 600px;
+    height: 500px;
+    position: absolute;
+    filter: blur(25px);
+    z-index: -1;
+}

src/common/components/lamps/LampWallUp/LampWallUp.tsx

@@ -0,0 +1,20 @@
+import { LampWallUpIcon } from "@/assets/icons/LampWallUpIcon"
+import { useState } from "react"
+import styles from './LampWallUp.module.css'
+
+export const LampWallUp = () => {
+    const [isOn, setIsOn] = useState(false)
+
+    return (
+        <button
+            type="button"
+            className={`opacity-0 hover:opacity-100 transition-all size-8 flex place-content-center place-items-center ${isOn ? 'opacity-100' : ''}`}
+            onClick={() => setIsOn(!isOn)}
+        >
+            <LampWallUpIcon />
+            <div
+                className={`${isOn ? 'block' : 'hidden'} ${styles.light}`}
+            />
+        </button>
+    )
+}

src/container/MainMenu/MainMenu.tsx

@@ -2,6 +2,7 @@ import logo from "@/assets/images/logo.png";
 import { Settings } from "../Settings/Settings";
 import { PipInput } from "../PipInput/PipInput";
 import { TagEditor } from "../TagEditor/TagEditor";
+import { LampWallUp } from "@/common/components/lamps/LampWallUp/LampWallUp";
 
 export const MainMenu = () => {
 	return (
@@ -14,6 +15,7 @@ export const MainMenu = () => {
 			<PipInput />
 			<TagEditor />
 			<Settings />
+			<LampWallUp />
 		</div>
 	);
 };