56 |
58 |
66 |
107 | AI Assistance
67 |
68 | {messages.map((msg, index) => (
69 |
86 | {error &&
77 | {msg.text}
78 |
79 | ))}
80 | {loading && (
81 |
82 | Loading...
83 |
84 | )}
85 | {error}
}
87 |
88 |
96 |
102 |
103 |
104 | AI can provide total BS response too, because ... it's AI :D
105 |
106 |
38 | {tab === "settings" &&
61 | {tab === "ai" &&
62 |
63 | );
64 | };
65 |
66 | export default Nav;
67 |
--------------------------------------------------------------------------------
/src/components/SettingSections/AppearanceSection.tsx:
--------------------------------------------------------------------------------
1 | import { useSettings } from "@/contexts/SettingsContext";
2 | import { useEffect, useState } from "react";
3 | import { getContrastingColor, getPalette } from "@/utils/colorUtils";
4 | import { debounce } from "lodash";
5 |
6 | import * as Select from "@radix-ui/react-select";
7 | import * as Slider from "@radix-ui/react-slider";
8 | import {
9 | ChevronDownIcon,
10 | ChevronUpIcon,
11 | CheckIcon,
12 | } from "@radix-ui/react-icons";
13 |
14 | const AppearanceSection = () => {
15 | const { settings, updateSettings } = useSettings();
16 | const [backgroundBlur, setBackgroundBlur] = useState
39 |
40 |
41 |
59 |
60 |
42 |
47 |
50 |
57 |
58 |
120 | (null);
9 | const fileInputRef = useRef(null);
10 |
11 | const exportData = () => {
12 | const data = {
13 | settings,
14 | widgets,
15 | };
16 | const json = JSON.stringify(data, null, 2);
17 | const blob = new Blob([json], { type: "application/json" });
18 | const url = URL.createObjectURL(blob);
19 | const link = document.createElement("a");
20 | link.href = url;
21 | link.download = "backup.json";
22 | link.click();
23 | };
24 |
25 | const importData = (event: React.ChangeEvent) => {
26 | const file = event.target.files?.[0];
27 | if (!file) return;
28 |
29 | const reader = new FileReader();
30 | reader.onload = (e) => {
31 | const json = e.target?.result;
32 | if (typeof json === "string") {
33 | const data = JSON.parse(json);
34 | if (data.settings && data.widgets) {
35 | updateSettings(data.settings);
36 | setWidgets(data.widgets);
37 | setImportMessage("Items imported successfully!");
38 | }
39 | }
40 | };
41 | reader.readAsText(file);
42 | };
43 |
44 | const triggerFileInput = () => {
45 | if (fileInputRef.current) {
46 | fileInputRef.current.click();
47 | }
48 | };
49 |
50 | return (
51 | ) => {
42 | updateSettings({
43 | city: event.target.value,
44 | });
45 | }, 2000),
46 | []
47 | );
48 |
49 | return (
50 | ("");
21 | const [title, setTitle] = useState("");
22 | const [countdown_title, setCountdown_title] = useState("");
23 | const [countdown_date, setCountdown_date] = useState(new Date());
24 | const { addWidget } = useWidgets();
25 | return (
26 |
29 |
107 | );
108 | };
109 |
110 | export default Settings;
111 |
--------------------------------------------------------------------------------
/src/components/WidgetLayout.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 | import { useWidgets } from "@/contexts/WidgetsContext";
3 | import "react-grid-layout/css/styles.css";
4 | import "react-resizable/css/styles.css";
5 | import { Responsive, WidthProvider, Layout } from "react-grid-layout";
6 | import { CrossIcon } from "@/components/Icons/CrossIcon";
7 | import Time from "@/components/Widgets/Time";
8 | import Tile from "@/components/Widgets/Tile";
9 | import Search from "@/components/Widgets/Search";
10 | import Todo from "@/components/Widgets/Todo";
11 | import Weather from "@/components/Widgets/Weather";
12 | import Countdown from "@/components/Widgets/Countdown";
13 | import Note from "@/components/Widgets/Note";
14 |
15 | const ResponsiveGridLayout = WidthProvider(Responsive);
16 |
17 | interface Widget {
18 | i: string;
19 | component: string;
20 | dimensions: Layout;
21 | props?: { [key: string]: any };
22 | }
23 |
24 | interface WidgetLayout {
25 | edit: boolean;
26 | }
27 |
28 | const componentMap: { [key: string]: React.ComponentType } = {
29 | Time,
30 | Search,
31 | Todo,
32 | Weather,
33 | Tile,
34 | Countdown,
35 | Note,
36 | };
37 |
38 | const WidgetLayout = ({ edit }: WidgetLayout) => {
39 | const { widgets, setWidgets } = useWidgets();
40 | const handleNoteUpdate = (id: string, title: string, description: string) => {
41 | const updatedWidgets = widgets.map((widget: Widget) =>
42 | widget.i === id
43 | ? { ...widget, props: { ...widget.props, title, description } }
44 | : widget
45 | );
46 | setWidgets(updatedWidgets);
47 | };
48 |
49 | const handleTodoUpdate = (
50 | id: string,
51 | title: string,
52 | todos: { text: string; completed: boolean }[]
53 | ) => {
54 | const updatedWidgets = widgets.map((widget: Widget) =>
55 | widget.i === id
56 | ? { ...widget, props: { ...widget.props, title, todos } }
57 | : widget
58 | );
59 | setWidgets(updatedWidgets);
60 | };
61 | return (
62 | {
73 | const updatedWidgets = layout
74 | .map((l) => {
75 | const widget = widgets.find((w: Widget) => w.i === l.i);
76 | return widget ? { ...widget, dimensions: l } : null;
77 | })
78 | .filter(Boolean);
79 | setWidgets(updatedWidgets as any);
80 | }}
81 | >
82 | {widgets.map((widget: Widget) => {
83 | const Component = componentMap[widget.component];
84 |
85 | return (
86 |
114 | );
115 | };
116 |
117 | export default WidgetLayout;
118 |
--------------------------------------------------------------------------------
/src/components/Widgets/Countdown.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 | import { useSettings } from "@/contexts/SettingsContext";
3 |
4 | export const CountdownDimensions = {
5 | x: 0,
6 | y: 0,
7 | w: 3,
8 | h: 5,
9 | maxW: 4,
10 | maxH: 5,
11 | minW: 3,
12 | minH: 5,
13 | };
14 |
15 | interface CountdownProps {
16 | title: string;
17 | date: Date;
18 | id: string;
19 | }
20 |
21 | const Countdown: React.FC = ({ title, date, id }) => {
22 | const { settings } = useSettings();
23 | const theme = settings.theme;
24 | const themeClass =
25 | theme === "dark"
26 | ? "dark"
27 | : theme === "light"
28 | ? "light"
29 | : "bg-accent text-solid-text";
30 |
31 | // Function to calculate days left
32 | const calculateDaysLeft = (targetDate: Date) => {
33 | const currentDate = new Date();
34 | targetDate = new Date(targetDate);
35 | const timeDiff = targetDate.getTime() - currentDate.getTime();
36 | return Math.round(Math.abs(timeDiff / (1000 * 3600 * 24)));
37 | };
38 |
39 | const [daysLeft, setDaysLeft] = useState(1);
40 |
41 | // Update days left when the component mounts or when the date prop changes
42 | useEffect(() => {
43 | setDaysLeft(calculateDaysLeft(date));
44 | }, [date]);
45 |
46 | return (
47 | = ({ title, description, id, onUpdate }) => {
63 | const { settings } = useSettings();
64 | const theme = settings.theme;
65 |
66 | const [noteContent, setNoteContent] = useState(description);
67 | const [noteTitle, setNotetitle] = useState(title);
68 | const [isEditing, setIsEditing] = useState(false);
69 |
70 | useEffect(() => {
71 | // Create a debounced version of the onUpdate function
72 | const debouncedUpdate = debounce((id, title, description) => {
73 | onUpdate(id, title, description);
74 | }, 500); // Adjust the debounce delay as needed
75 |
76 | debouncedUpdate(id, noteTitle, noteContent);
77 |
78 | // Cleanup function to cancel debounced calls on unmount
79 | return () => {
80 | debouncedUpdate.cancel();
81 | };
82 | }, [noteTitle, noteContent, id, onUpdate]);
83 |
84 | const handleTitleChange = (event: React.ChangeEvent) => {
85 | setNotetitle(event.target.value);
86 | };
87 |
88 | const handleContentChange = (
89 | event: React.ChangeEvent
90 | ) => {
91 | setNoteContent(event.target.value);
92 | };
93 |
94 | const toggleEditMode = () => {
95 | setIsEditing(!isEditing);
96 | };
97 |
98 | return (
99 | ) => {
46 | if (event.key === "Enter" && query.trim() !== "") {
47 | handleSearch();
48 | }
49 | };
50 |
51 | return (
52 | = ({ title, url, edit }) => {
22 | const { settings } = useSettings();
23 | const theme = settings.theme;
24 | const themeClass =
25 | theme === "dark"
26 | ? "dark"
27 | : theme === "light"
28 | ? "light"
29 | : "bg-accent text-solid-text";
30 |
31 | return (
32 | = ({
62 | id,
63 | todos: initialTodos,
64 | title,
65 | onUpdate,
66 | }) => {
67 | const { settings } = useSettings();
68 | const theme = settings.theme;
69 |
70 | const [todos, setTodos] = useState(initialTodos);
71 | const [newTodo, setNewTodo] = useState("");
72 | const [todoTitle, setTodoTitle] = useState(title);
73 |
74 | const prevTodosRef = useRef(todos);
75 | const prevTitleRef = useRef(todoTitle);
76 |
77 | useEffect(() => {
78 | if (prevTodosRef.current !== todos || prevTitleRef.current !== todoTitle) {
79 | prevTodosRef.current = todos;
80 | prevTitleRef.current = todoTitle;
81 | onUpdate(id, todoTitle, todos);
82 | }
83 | }, [todos, todoTitle, id, onUpdate]);
84 |
85 | const handleAddTodo = (event: React.FormEvent) => {
86 | event.preventDefault();
87 | if (newTodo.trim()) {
88 | setTodos((prevTodos) => [
89 | ...prevTodos,
90 | { text: newTodo, completed: false },
91 | ]);
92 | setNewTodo("");
93 | }
94 | };
95 |
96 | const handleDeleteTodo = (index: number) => {
97 | setTodos((prevTodos) => prevTodos.filter((_, i) => i !== index));
98 | };
99 |
100 | const handleToggleComplete = (index: number) => {
101 | setTodos((prevTodos) =>
102 | prevTodos.map((todo, i) =>
103 | i === index ? { ...todo, completed: !todo.completed } : todo
104 | )
105 | );
106 | };
107 |
108 | const handleTitleChange = (event: React.ChangeEvent) => {
109 | setTodoTitle(event.target.value);
110 | };
111 |
112 | return (
113 | ) => void;
27 | }
28 |
29 | const defaultSettings: UserSettings = {
30 | version: "1.0.0",
31 | searchEngine: "google",
32 | theme: "dark",
33 | timeFormat: "24hr",
34 | temperatureFormat: "Celsius",
35 | city: "New Delhi",
36 | backgroundImage: "/wallpaper1.jpg",
37 | backgroundBlur: 0,
38 | text_color: "#000000",
39 | accent_color: "#d6b8a0",
40 | theme_colors: [
41 | "#d6b8a0",
42 | "#52b0bb",
43 | "#041b35",
44 | "#24708b",
45 | "#0d4565",
46 | "#1c5e72",
47 | "#2f90ad",
48 | "#a34c60",
49 | "#634962",
50 | "#cf6e48",
51 | ],
52 | };
53 |
54 | // Create the context with default values
55 | const SettingsContext = createContext({
56 | settings: defaultSettings,
57 | updateSettings: () => {},
58 | });
59 |
60 | // Provider component
61 | export const SettingsProvider: React.FC<{ children: ReactNode }> = ({
62 | children,
63 | }) => {
64 | const [settings, setSettings] = useState(defaultSettings);
65 | const [isLoading, setIsLoading] = useState(true); // Flag to check if loading from localStorage
66 |
67 | // Load settings from localStorage on mount
68 | useEffect(() => {
69 | const storedSettings = localStorage.getItem("userSettings");
70 | if (storedSettings) {
71 | const parsedSettings: UserSettings = JSON.parse(storedSettings);
72 |
73 | // Check for version mismatch
74 | if (parsedSettings.version !== defaultSettings.version) {
75 | // Update settings with defaults, but keep existing values where possible
76 | const updatedSettings = {
77 | ...defaultSettings,
78 | ...parsedSettings,
79 | version: defaultSettings.version, // Ensure the version is updated
80 | };
81 | setSettings(updatedSettings);
82 | } else {
83 | setSettings(parsedSettings);
84 | }
85 | }
86 | setIsLoading(false); // Loading is complete
87 | }, []);
88 |
89 | // Save settings to localStorage whenever they change
90 | useEffect(() => {
91 | if (!isLoading) {
92 | localStorage.setItem("userSettings", JSON.stringify(settings));
93 | }
94 | }, [settings, isLoading]);
95 |
96 | const updateSettings = (newSettings: Partial) => {
97 | setSettings((prevSettings) => ({ ...prevSettings, ...newSettings }));
98 | };
99 |
100 | return (
101 |
102 | {children}
103 |
104 | );
105 | };
106 |
107 | // Custom hook to use the Settings context
108 | export const useSettings = () => {
109 | return useContext(SettingsContext);
110 | };
111 |
--------------------------------------------------------------------------------
/src/contexts/WidgetsContext.tsx:
--------------------------------------------------------------------------------
1 | import React, {
2 | createContext,
3 | useContext,
4 | useState,
5 | useEffect,
6 | ReactNode,
7 | } from "react";
8 | import { Layout } from "react-grid-layout";
9 | import { v4 as uuidv4 } from "uuid";
10 |
11 | interface Widget {
12 | i: string;
13 | component: string;
14 | dimensions: Layout;
15 | props?: { [key: string]: any };
16 | }
17 |
18 | interface WidgetsContextProps {
19 | widgets: Widget[];
20 | setWidgets: (widgets: Widget[]) => void;
21 | addWidget: (
22 | component: string,
23 | dimensions: any,
24 | props?: { [key: string]: any }
25 | ) => void;
26 | }
27 |
28 | const defaultWidgets: Widget[] = [
29 | {
30 | i: "f70c3ff4-4ebf-46b3-b77a-d9e1e59214c1",
31 | component: "Weather",
32 | dimensions: {
33 | w: 7,
34 | h: 8,
35 | x: 0,
36 | y: 0,
37 | i: "f70c3ff4-4ebf-46b3-b77a-d9e1e59214c1",
38 | minW: 4,
39 | maxW: 7,
40 | minH: 7,
41 | maxH: 9,
42 | moved: false,
43 | static: false,
44 | },
45 | props: {
46 | id: "f70c3ff4-4ebf-46b3-b77a-d9e1e59214c1",
47 | },
48 | },
49 | {
50 | i: "9fdc4b79-cf64-4902-800a-183b3fe159fc",
51 | component: "Search",
52 | dimensions: {
53 | w: 7,
54 | h: 2,
55 | x: 0,
56 | y: 13,
57 | i: "9fdc4b79-cf64-4902-800a-183b3fe159fc",
58 | minW: 4,
59 | maxW: 7,
60 | minH: 2,
61 | maxH: 3,
62 | moved: false,
63 | static: false,
64 | },
65 | props: {
66 | id: "9fdc4b79-cf64-4902-800a-183b3fe159fc",
67 | },
68 | },
69 | {
70 | i: "2806b5fe-8c8c-415b-9c8a-a5c7c84d344a",
71 | component: "Time",
72 | dimensions: {
73 | w: 4,
74 | h: 5,
75 | x: 3,
76 | y: 8,
77 | i: "2806b5fe-8c8c-415b-9c8a-a5c7c84d344a",
78 | minW: 4,
79 | maxW: 6,
80 | minH: 5,
81 | maxH: 7,
82 | moved: false,
83 | static: false,
84 | },
85 | props: {
86 | id: "2806b5fe-8c8c-415b-9c8a-a5c7c84d344a",
87 | },
88 | },
89 | {
90 | i: "0c038094-de30-4306-b447-cba4c609009a",
91 | component: "Todo",
92 | dimensions: {
93 | w: 5,
94 | h: 12,
95 | x: 12,
96 | y: 0,
97 | i: "0c038094-de30-4306-b447-cba4c609009a",
98 | minW: 4,
99 | maxW: 7,
100 | minH: 2,
101 | maxH: 14,
102 | moved: false,
103 | static: false,
104 | },
105 | props: {
106 | title: "Todo",
107 | todos: [],
108 | id: "0c038094-de30-4306-b447-cba4c609009a",
109 | },
110 | },
111 | {
112 | i: "1a00ff60-0af4-4960-bcfd-871073aadbef",
113 | component: "Note",
114 | dimensions: {
115 | w: 5,
116 | h: 12,
117 | x: 7,
118 | y: 0,
119 | i: "1a00ff60-0af4-4960-bcfd-871073aadbef",
120 | minW: 4,
121 | maxW: 7,
122 | minH: 2,
123 | maxH: 13,
124 | moved: false,
125 | static: false,
126 | },
127 | props: {
128 | title: "Note",
129 | description: "",
130 | id: "1a00ff60-0af4-4960-bcfd-871073aadbef",
131 | },
132 | },
133 | {
134 | i: "8d5d4c1f-3492-49b0-8992-debe3449a04f",
135 | component: "Tile",
136 | dimensions: {
137 | w: 3,
138 | h: 5,
139 | x: 0,
140 | y: 8,
141 | i: "8d5d4c1f-3492-49b0-8992-debe3449a04f",
142 | minW: 2,
143 | maxW: 3,
144 | minH: 4,
145 | maxH: 5,
146 | moved: false,
147 | static: false,
148 | },
149 | props: {
150 | title: "Animood",
151 | url: "https://animood.lirena.in",
152 | id: "8d5d4c1f-3492-49b0-8992-debe3449a04f",
153 | },
154 | },
155 | ];
156 |
157 | const WidgetsContext = createContext({
158 | widgets: defaultWidgets,
159 | addWidget: () => {},
160 | setWidgets: () => {},
161 | });
162 |
163 | export const WidgetsProvider: React.FC<{ children: ReactNode }> = ({
164 | children,
165 | }) => {
166 | const [widgets, setWidgets] = useState(defaultWidgets);
167 | const [isLoading, setIsLoading] = useState(true);
168 |
169 | useEffect(() => {
170 | const savedWidgets = localStorage.getItem("widgets");
171 | if (savedWidgets) {
172 | setWidgets(JSON.parse(savedWidgets));
173 | }
174 | setIsLoading(false);
175 | }, []);
176 |
177 | // Save widgets to localStorage whenever they change
178 | useEffect(() => {
179 | if (!isLoading) {
180 | localStorage.setItem("widgets", JSON.stringify(widgets));
181 | }
182 | }, [widgets, isLoading]);
183 |
184 | const addWidget = (
185 | component: string,
186 | dimensions: any,
187 | props?: { [key: string]: any }
188 | ) => {
189 | const id = uuidv4();
190 | const newWidget = {
191 | i: id,
192 | component,
193 | dimensions: { ...dimensions, i: id },
194 | props: { ...props, id } || {},
195 | };
196 | setWidgets([...widgets, newWidget]);
197 | };
198 |
199 | return (
200 |
201 | {children}
202 |
203 | );
204 | };
205 |
206 | // Custom hook to use the Widgets context
207 | export const useWidgets = () => {
208 | return useContext(WidgetsContext);
209 | };
210 |
--------------------------------------------------------------------------------
/src/hooks/useBackground.ts:
--------------------------------------------------------------------------------
1 | import { useSettings } from "@/contexts/SettingsContext";
2 | import { useEffect } from "react";
3 |
4 | const useBackground = () => {
5 | const { settings } = useSettings();
6 | const backgroundImage = settings.backgroundImage;
7 | const backgroundBlur = settings.backgroundBlur;
8 | const accentColor = settings.accent_color;
9 | const textColor = settings.text_color;
10 |
11 | useEffect(() => {
12 | const bodyElement = document.querySelector("body");
13 |
14 | if (bodyElement) {
15 | bodyElement.style.backgroundImage = `url(${backgroundImage})`;
16 | bodyElement.style.backgroundSize = "cover";
17 | bodyElement.style.backgroundRepeat = "no-repeat";
18 | bodyElement.style.height = "100vh";
19 | bodyElement.style.zIndex = "-1";
20 | if (backgroundBlur > 0) {
21 | bodyElement.style.backdropFilter = `blur(${backgroundBlur}px)`;
22 | }
23 | }
24 |
25 | const image = new Image();
26 | image.src = backgroundImage;
27 | image.crossOrigin = "Anonymous";
28 |
29 | image.onload = () => {
30 | document.documentElement.style.setProperty(
31 | "--solid-text-color",
32 | textColor
33 | );
34 | document.documentElement.style.setProperty("--accent-color", accentColor);
35 | };
36 |
37 | // Clean up the styles when the component unmounts or imageUrl changes
38 | return () => {
39 | if (bodyElement) {
40 | bodyElement.style.backgroundImage = "";
41 | bodyElement.style.backgroundSize = "";
42 | bodyElement.style.backgroundRepeat = "";
43 | bodyElement.style.height = "";
44 | bodyElement.style.backdropFilter = "";
45 | }
46 | document.documentElement.style.removeProperty("--accent-color");
47 | document.documentElement.style.removeProperty("--solid-text-color");
48 | };
49 | }, [accentColor, textColor, backgroundImage, backgroundBlur]);
50 | };
51 |
52 | export default useBackground;
53 |
--------------------------------------------------------------------------------
/src/pages/_app.tsx:
--------------------------------------------------------------------------------
1 | import type { AppProps } from "next/app";
2 | import "@/styles/globals.css";
3 | import { SettingsProvider } from "@/contexts/SettingsContext";
4 | import { WidgetsProvider } from "@/contexts/WidgetsContext";
5 | import Head from "next/head";
6 |
7 | function App({ Component, pageProps }: AppProps) {
8 | return (
9 |
10 |
11 |
12 |
17 |
18 |
20 |
21 | );
22 | }
23 |
24 | export default App;
25 |
--------------------------------------------------------------------------------
/src/pages/_document.tsx:
--------------------------------------------------------------------------------
1 | import { Html, Head, Main, NextScript } from "next/document";
2 |
3 | export default function Document() {
4 | return (
5 |
6 |
7 |
8 |
9 | Odash | Your New Tab, Your Way
20 |
24 |
25 |
26 |
27 |
28 |
32 |
33 |
34 |
35 |
39 |
40 |
41 |
42 |
46 |
50 |
51 |
52 |
53 |
54 |
55 |
59 |
60 | );
61 | }
62 |
--------------------------------------------------------------------------------
/src/styles/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | @layer base {
6 | @font-face {
7 | font-family: "Comfortaa";
8 | src: url("/fonts/comfortaa.ttf");
9 | }
10 | body {
11 | @apply font-comfortaa;
12 | }
13 | }
14 |
15 | @layer base {
16 | /* Custom scrollbar */
17 | ::-webkit-scrollbar {
18 | @apply w-1.5;
19 | @apply h-1.5;
20 | }
21 |
22 | ::-webkit-scrollbar-thumb {
23 | @apply bg-white/50;
24 | }
25 | }
26 | @layer components {
27 | .selector {
28 | user-drag: none;
29 | -webkit-user-drag: none;
30 | user-select: none;
31 | -moz-user-select: none;
32 | -webkit-user-select: none;
33 | -ms-user-select: none;
34 | }
35 | }
36 |
37 | body {
38 | background-color: #070a0c;
39 | color: #e3e8eb;
40 | }
41 |
42 | .light {
43 | backdrop-filter: blur(16px) saturate(180%);
44 | -webkit-backdrop-filter: blur(16px) saturate(180%);
45 | background-color: rgba(164, 169, 182, 0.75);
46 | border: 1px solid rgba(255, 255, 255, 0.125);
47 | }
48 |
49 | .dark {
50 | backdrop-filter: blur(16px) saturate(180%);
51 | -webkit-backdrop-filter: blur(16px) saturate(180%);
52 | background-color: rgba(0, 0, 0, 0.75);
53 | border: 1px solid rgba(255, 255, 255, 0.125);
54 | }
55 |
56 | .slider:hover {
57 | opacity: 1;
58 | }
59 |
60 | .slider::-webkit-slider-thumb {
61 | appearance: none;
62 | width: 20px;
63 | height: 20px;
64 | border-radius: 50%;
65 | background: #4caf50;
66 | cursor: pointer;
67 | }
68 |
69 | .slider::-moz-range-thumb {
70 | width: 20px;
71 | height: 20px;
72 | border-radius: 50%;
73 | background: #4caf50;
74 | cursor: pointer;
75 | }
76 |
--------------------------------------------------------------------------------
/src/types/colorthief.d.ts:
--------------------------------------------------------------------------------
1 | declare module 'colorthief' {
2 | export type RGBColor = [number, number, number];
3 | export default class ColorThief {
4 | getColor: (img: HTMLImageElement | null, quality: number=10) => RGBColor;
5 | getPalette: (img: HTMLImageElement | null, colorCount: number=10, quality: number=10) => RGBColor[];
6 | }
7 | }
--------------------------------------------------------------------------------
/src/utils/colorUtils.ts:
--------------------------------------------------------------------------------
1 | import ColorThief from "colorthief";
2 | import chroma from "chroma-js";
3 |
4 | export const getPalette = async (url: string): Promise => {
5 | return new Promise((resolve, reject) => {
6 | const image = new Image();
7 | image.crossOrigin = "Anonymous";
8 | image.src = url;
9 |
10 | image.onload = () => {
11 | try {
12 | const colorThief = new ColorThief();
13 | const palette = colorThief.getPalette(image);
14 | const hexColors = palette.map((color) => {
15 | const [r, g, b] = color;
16 | return `#${((1 << 24) | (r << 16) | (g << 8) | b)
17 | .toString(16)
18 | .slice(1)}`;
19 | });
20 | resolve(hexColors);
21 | } catch (error) {
22 | reject(error);
23 | }
24 | };
25 |
26 | image.onerror = (error) => reject(error);
27 | });
28 | };
29 |
30 | export const getContrastingColor = (rgb: string): string => {
31 | const color = chroma(rgb);
32 | return color.luminance() > 0.5 ? "#000000" : "#ffffff";
33 | };
34 |
--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
1 | import type { Config } from "tailwindcss";
2 |
3 | const config: Config = {
4 | content: [
5 | "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
6 | "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
7 | "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
8 | ],
9 | theme: {
10 | extend: {
11 | fontFamily: {
12 | comfortaa: ["comfortaa", "sans-serif"],
13 | },
14 | colors: {
15 | text: "#e3e8eb",
16 | "solid-text": "var(--solid-text-color)",
17 | background: "#070a0c",
18 | primary: "#97bed1",
19 | secondary: "#275b73",
20 | accent: "var(--accent-color)",
21 | },
22 | },
23 | },
24 |
25 | plugins: [require("@tailwindcss/typography")],
26 | };
27 | export default config;
28 |
29 | /*
30 | '#3fa1d0'
31 | */
32 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "lib": ["dom", "dom.iterable", "esnext"],
4 | "allowJs": true,
5 | "skipLibCheck": true,
6 | "strict": true,
7 | "noEmit": true,
8 | "esModuleInterop": true,
9 | "module": "esnext",
10 | "moduleResolution": "bundler",
11 | "resolveJsonModule": true,
12 | "isolatedModules": true,
13 | "jsx": "preserve",
14 | "incremental": true,
15 | "paths": {
16 | "@/*": ["./src/*"]
17 | }
18 | },
19 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
20 | "exclude": ["node_modules"]
21 | }
22 |
--------------------------------------------------------------------------------
121 | Theme
122 |
123 |
124 |
126 |
128 |
129 |
130 |
131 |
132 |
134 |
135 | {themeOptions.map((option) => (
136 |
141 | {option.label}
142 |
143 |
145 |
146 | ))}
147 |
148 |
149 |
151 |
152 |
153 |
154 |
155 |
156 |
157 | Wallpaper
158 |
187 |
188 |
159 | 
164 |
168 |
165 | Current wallpaper
166 |
167 |
169 | {wallpapers.map((wallpaper, index) => (
170 | 
handleWallpaperChange(wallpaper)}
178 | />
179 | ))}
180 |
181 |
186 |
189 | Colors
190 |
226 | );
227 | };
228 |
229 | export default AppearanceSection;
230 |
--------------------------------------------------------------------------------
/src/components/SettingSections/BackupSection.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useRef } from "react";
2 | import { useSettings } from "@/contexts/SettingsContext";
3 | import { useWidgets } from "@/contexts/WidgetsContext";
4 |
5 | const BackupSection = () => {
6 | const { settings, updateSettings } = useSettings();
7 | const { widgets, setWidgets } = useWidgets();
8 | const [importMessage, setImportMessage] = useState
191 | {settings.theme_colors.map((color, index) => (
192 |
208 |
209 | handleColorChange(color)}
197 | />
198 | ))}
199 |
206 |
207 |
210 | Background Blur
211 |
219 |
220 |
222 |
224 |
225 |
52 |
77 | );
78 | };
79 |
80 | export default BackupSection;
81 |
--------------------------------------------------------------------------------
/src/components/SettingSections/GeneralSection.tsx:
--------------------------------------------------------------------------------
1 | import { useSettings } from "@/contexts/SettingsContext";
2 | import * as Select from "@radix-ui/react-select";
3 | import {
4 | ChevronDownIcon,
5 | ChevronUpIcon,
6 | CheckIcon,
7 | } from "@radix-ui/react-icons";
8 | import { debounce } from "lodash";
9 | import { useCallback } from "react";
10 |
11 | const GeneralSection = () => {
12 | const { settings, updateSettings } = useSettings();
13 |
14 | const searchEngineOptions = [
15 | { value: "google", label: "Google" },
16 | { value: "bing", label: "Bing" },
17 | { value: "duckduckgo", label: "Duckduckgo" },
18 | { value: "perplexity", label: "Perplexity" },
19 | ];
20 |
21 | const timeFormatOptions = ["24hr", "12hr"];
22 | const temperatureFormatOptions = ["Fahrenheit", "Celsius"];
23 |
24 | const handleSearchEngineChange = (value: string) => {
25 | updateSettings({
26 | searchEngine: value as "google" | "bing" | "duckduckgo" | "perplexity",
27 | });
28 | };
29 |
30 | const handleTimeFormatChange = (value: string) => {
31 | updateSettings({ timeFormat: value as "24hr" | "12hr" });
32 | };
33 |
34 | const handleTemperatureFormatChange = (value: string) => {
35 | updateSettings({
36 | temperatureFormat: value as "Fahrenheit" | "Celsius",
37 | });
38 | };
39 |
40 | const handleCityChange = useCallback(
41 | debounce((event: React.ChangeEvent
53 |
59 |
65 |
72 | {importMessage && (
73 |
76 | {importMessage}
74 | )} 75 |
51 |
177 | );
178 | };
179 | export default GeneralSection;
180 |
--------------------------------------------------------------------------------
/src/components/SettingSections/WidgetSection.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import { useWidgets } from "@/contexts/WidgetsContext";
3 |
4 | import Search from "@/components/Widgets/Search";
5 | import Time from "@/components/Widgets/Time";
6 | import Tile from "@/components/Widgets/Tile";
7 | import { NotePreview } from "@/components/Widgets/Note";
8 | import { TodoPreview } from "@/components/Widgets/Todo";
9 | import Weather from "@/components/Widgets/Weather";
10 | import Countdown from "@/components/Widgets/Countdown";
11 | import { SearchDimensions } from "@/components/Widgets/Search";
12 | import { TodoDimensions } from "@/components/Widgets/Todo";
13 | import { TimeDimensions } from "@/components/Widgets/Time";
14 | import { TileDimensions } from "@/components/Widgets/Tile";
15 | import { WeatherDimensions } from "@/components/Widgets/Weather";
16 | import { CountdownDimensions } from "@/components/Widgets/Countdown";
17 | import { NoteDimensions } from "@/components/Widgets/Note";
18 |
19 | const WidgetSection = () => {
20 | const [url, setUrl] = useState
52 | Search Engine
53 |
57 |
58 |
60 |
62 |
63 |
64 |
65 |
66 |
68 |
69 | {searchEngineOptions.map((option) => (
70 |
75 | {option.label}
76 |
77 |
79 |
80 | ))}
81 |
82 |
83 |
85 |
86 |
87 |
88 |
89 |
90 |
91 | Time Format
92 |
96 |
97 |
99 |
101 |
102 |
103 |
104 |
105 |
107 |
108 | {timeFormatOptions.map((option) => (
109 |
114 | {option}
115 |
116 |
118 |
119 | ))}
120 |
121 |
122 |
124 |
125 |
126 |
127 |
128 |
129 |
130 | Temperature Format
131 |
135 |
136 |
138 |
140 |
141 |
142 |
143 |
144 |
146 |
147 | {temperatureFormatOptions.map((option) => (
148 |
153 | {option}
154 |
155 |
157 |
158 | ))}
159 |
160 |
161 |
163 |
164 |
165 |
166 |
167 |
168 |
169 | City
170 |
175 |
176 |
27 | Widgets
28 |
158 | );
159 | };
160 |
161 | export default WidgetSection;
162 |
--------------------------------------------------------------------------------
/src/components/Settings.tsx:
--------------------------------------------------------------------------------
1 | import { motion } from "framer-motion";
2 | import { useState } from "react";
3 | import Link from "next/link";
4 |
5 | import { GithubIcon } from "@/components/Icons/GithubIcon";
6 | import { DiscordIcon } from "@/components/Icons/DiscordIcon";
7 | import { BackupIcon } from "@/components/Icons/BackupIcon";
8 | import { WidgetIcon } from "@/components/Icons/WidgetIcon";
9 | import { GeneralIcon } from "@/components/Icons/GeneralIcon";
10 | import { PalleteIcon } from "@/components/Icons/PalleteIcon";
11 |
12 | import GeneralSection from "@/components/SettingSections/GeneralSection";
13 | import AppearanceSection from "@/components/SettingSections/AppearanceSection";
14 | import WidgetSection from "@/components/SettingSections/WidgetSection";
15 | import BackupSection from "@/components/SettingSections/BackupSection";
16 |
17 | const Settings = () => {
18 | const [active, setActive] = useState("general");
19 |
20 | return (
21 |
29 |
157 |
30 |
60 |
61 |
31 |
36 | setUrl(e.target.value)}
41 | />
42 | setTitle(e.target.value)}
47 | />
48 |
59 |
32 |
35 |
62 |
89 |
90 |
63 |
65 | setCountdown_title(e.target.value)}
70 | />
71 | setCountdown_date(new Date(e.target.value))}
76 | />
77 |
88 |
91 |
106 |
107 |
93 |
104 |
105 |
108 |
120 |
121 |
110 |
118 |
119 |
122 |
132 |
133 |
124 |
130 |
131 |
134 |
135 |
144 |
145 |
136 |
142 |
143 |
146 |
156 |
148 |
154 |
155 |
30 | Settings
31 |
100 | -
32 |
- setActive("general")}
34 | className={`cursor-pointer py-1.5 px-2 text-sm rounded-sm flex gap-2 items-center ${
35 | active === "general"
36 | ? "bg-gray-800/60 border-l-2"
37 | : "hover:bg-gray-600/30"
38 | }`}
39 | >
40 |
41 |
42 | 43 | General 44 |
45 | - setActive("appearance")}
47 | className={`cursor-pointer py-1.5 px-2 text-sm rounded-sm flex gap-2 items-center ${
48 | active === "appearance"
49 | ? "bg-gray-800/60 border-l-2"
50 | : "hover:bg-gray-600/30"
51 | }`}
52 | >
53 |
54 |
55 | 56 | Appearance 57 |
58 | - setActive("widgets")}
60 | className={`cursor-pointer py-1.5 px-2 text-sm rounded-sm flex gap-2 items-center ${
61 | active === "widgets"
62 | ? "bg-gray-800/60 border-l-2"
63 | : "hover:bg-gray-600/30"
64 | }`}
65 | >
66 |
67 |
68 | 69 | Widgets 70 |
71 | - setActive("backup")}
73 | className={`cursor-pointer py-1.5 px-2 text-sm rounded-sm flex gap-2 items-center ${
74 | active === "backup"
75 | ? "bg-gray-800/60 border-l-2"
76 | : "hover:bg-gray-600/30"
77 | }`}
78 | >
79 |
80 |
81 | 82 | Backup 83 |
84 |
87 |
99 |
88 |
89 |
95 |
96 | Odash
97 |
98 |
101 | {active === "general" &&
106 |
91 | {edit && (
92 |
100 | )}
101 | {widget.component === "Note" ? (
102 |
111 | );
112 | })}
113 |
50 |
58 | );
59 | };
60 |
61 | export default Countdown;
62 |
--------------------------------------------------------------------------------
/src/components/Widgets/Note.tsx:
--------------------------------------------------------------------------------
1 | import { useSettings } from "@/contexts/SettingsContext";
2 | import React, { useState, useEffect, useCallback } from "react";
3 | import { debounce } from "lodash";
4 | import { PlusIcon } from "@/components/Icons/PlusIcon";
5 | import { MinusIcon } from "@/components/Icons/MinusIcon";
6 | import Markdown from "react-markdown";
7 | import remarkGfm from "remark-gfm";
8 |
9 | export const NoteDimensions = {
10 | x: 0,
11 | y: 0,
12 | w: 5,
13 | h: 12,
14 | minW: 4,
15 | minH: 2,
16 | maxW: 7,
17 | maxH: 13,
18 | };
19 |
20 | export const NotePreview = () => {
21 | const { settings } = useSettings();
22 | const theme = settings.theme;
23 | return (
24 |
51 | {title}
52 |
53 |
54 | {daysLeft}
55 | {daysLeft === 1 ? "day" : "days"} left
56 |
57 |
33 |
52 | );
53 | };
54 |
55 | interface NoteProps {
56 | title: string;
57 | description: string;
58 | id: string;
59 | onUpdate: (id: string, title: string, description: string) => void;
60 | }
61 |
62 | const Note: React.FC
34 |
38 |
41 |
42 |
43 |
44 |
48 | It *supports* ~~markdown~~
49 |
50 |
51 |
108 |
137 | );
138 | };
139 |
140 | export default Note;
141 |
--------------------------------------------------------------------------------
/src/components/Widgets/Search.tsx:
--------------------------------------------------------------------------------
1 | import { GoogleIcon } from "@/components/Icons/GoogleIcon";
2 | import { BingIcon } from "@/components/Icons/BingIcon";
3 | import { DuckDuckGoIcon } from "@/components/Icons/DuckDuckGoIcon";
4 | import { PerplexityIcon } from "@/components/Icons/PerplexityIcon";
5 | import { useSettings } from "@/contexts/SettingsContext";
6 | import React, { useState } from "react";
7 |
8 | export const SearchDimensions = {
9 | x: 0,
10 | y: 0,
11 | w: 7,
12 | h: 2,
13 | minW: 4,
14 | minH: 2,
15 | maxW: 7,
16 | maxH: 3,
17 | };
18 |
19 | const Search = () => {
20 | const { settings } = useSettings();
21 | const searchEngine = settings.searchEngine;
22 | const theme = settings.theme;
23 | const [query, setQuery] = useState("");
24 |
25 | const handleSearch = () => {
26 | if (query.trim() === "") return; // Prevent search if query is empty
27 | let searchUrl = "";
28 | switch (searchEngine) {
29 | case "google":
30 | searchUrl = `https://www.google.com/search?q=${query}`;
31 | break;
32 | case "bing":
33 | searchUrl = `https://www.bing.com/search?q=${query}`;
34 | break;
35 | case "duckduckgo":
36 | searchUrl = `https://duckduckgo.com/?q=${query}`;
37 | break;
38 | case "perplexity":
39 | searchUrl = `https://www.perplexity.ai/search?q=${query}`;
40 | break;
41 | }
42 | window.location.href = searchUrl;
43 | };
44 |
45 | const handleKeyPress = (event: React.KeyboardEvent
109 |
114 |
117 |
118 |
119 |
120 | {isEditing ? (
121 |
127 | ) : (
128 |
132 | {noteContent}
133 |
134 | )}
135 |
136 |
61 |
81 | );
82 | };
83 |
84 | export default Search;
85 |
--------------------------------------------------------------------------------
/src/components/Widgets/Tile.tsx:
--------------------------------------------------------------------------------
1 | import { useSettings } from "@/contexts/SettingsContext";
2 | import { DiceIcon } from "@/components/Icons/DiceIcon";
3 | import Link from "next/link";
4 |
5 | export const TileDimensions = {
6 | x: 0,
7 | y: 0,
8 | w: 2,
9 | h: 4,
10 | minH: 4,
11 | minW: 2,
12 | maxH: 5,
13 | maxW: 3,
14 | };
15 | interface TileProps {
16 | title: string;
17 | url: string;
18 | edit?: boolean;
19 | }
20 |
21 | const Tile: React.FC
62 | {searchEngine === "google" ? (
63 |
72 | setQuery(e.target.value)}
78 | onKeyUp={handleKeyPress}
79 | />
80 |
35 | {title === "Example" ? (
36 | 
45 | ) : (
46 |
47 |
52 |
53 | )}
54 |
58 | );
59 | };
60 |
61 | export default Tile;
62 |
--------------------------------------------------------------------------------
/src/components/Widgets/Time.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 | import { useSettings } from "@/contexts/SettingsContext";
3 |
4 | export const TimeDimensions = {
5 | x: 0,
6 | y: 0,
7 | w: 4,
8 | h: 5,
9 | minW: 4,
10 | minH: 5,
11 | maxW: 6,
12 | maxH: 7,
13 | };
14 |
15 | const Time = () => {
16 | const [time, setTime] = useState("");
17 | const [date, setDate] = useState("");
18 | const { settings } = useSettings();
19 | const theme = settings.theme;
20 |
21 | useEffect(() => {
22 | const interval = setInterval(() => {
23 | const currentDate = new Date();
24 | const timeFormat = settings.timeFormat === "12hr" ? true : false;
25 |
26 | const timeString = currentDate.toLocaleTimeString([], {
27 | hour: "2-digit",
28 | minute: "2-digit",
29 | hour12: timeFormat, // Use settings.timeFormat to set 12-hour or 24-hour clock format
30 | });
31 |
32 | const dateString = currentDate.toLocaleDateString([], {
33 | weekday: "short",
34 | day: "2-digit",
35 | month: "short",
36 | });
37 |
38 | setTime(timeString);
39 | setDate(dateString);
40 | }, 1000);
41 |
42 | return () => clearInterval(interval);
43 | }, [settings.timeFormat]);
44 |
45 | const themeClass =
46 | theme === "dark"
47 | ? "dark"
48 | : theme === "light"
49 | ? "light"
50 | : "bg-accent text-solid-text";
51 |
52 | return (
53 |
37 |
39 | ) : edit ? (
40 |
55 | {title}
56 |
57 |
56 |
59 | );
60 | };
61 |
62 | export default Time;
63 |
--------------------------------------------------------------------------------
/src/components/Widgets/Todo.tsx:
--------------------------------------------------------------------------------
1 | import { useSettings } from "@/contexts/SettingsContext";
2 | import React, { useState, useEffect, useRef } from "react";
3 | import { PlusIcon } from "@/components/Icons/PlusIcon";
4 | import { MinusIcon } from "@/components/Icons/MinusIcon";
5 |
6 | export const TodoDimensions = {
7 | x: 0,
8 | y: 0,
9 | w: 7,
10 | h: 14,
11 | minW: 4,
12 | minH: 2,
13 | maxW: 7,
14 | maxH: 14,
15 | };
16 |
17 | export const TodoPreview = () => {
18 | const { settings } = useSettings();
19 | const theme = settings.theme;
20 |
21 | return (
22 | {time}
57 | {date}
58 |
31 |
47 | );
48 | };
49 |
50 | interface TodoProps {
51 | id: string;
52 | todos: { text: string; completed: boolean }[];
53 | title: string;
54 | onUpdate: (
55 | id: string,
56 | title: string,
57 | todos: { text: string; completed: boolean }[]
58 | ) => void;
59 | }
60 |
61 | const Todo: React.FC
32 | Todo
33 |
34 |
43 |
44 |
46 | No todos added yet.
45 |
122 |
169 | );
170 | };
171 |
172 | export default Todo;
173 |
--------------------------------------------------------------------------------
/src/components/Widgets/Weather.tsx:
--------------------------------------------------------------------------------
1 | import { useSettings } from "@/contexts/SettingsContext";
2 | import React, { useState, useEffect } from "react";
3 | import { LocationIcon } from "@/components/Icons/LocationIcon";
4 | import { WindIcon } from "@/components/Icons/WindIcon";
5 | import { HumidityIcon } from "@/components/Icons/Humidity";
6 |
7 | export const WeatherDimensions = {
8 | x: 0,
9 | y: 0,
10 | w: 5,
11 | h: 7,
12 | minW: 4,
13 | minH: 7,
14 | maxW: 7,
15 | maxH: 9,
16 | };
17 |
18 | const Weather = () => {
19 | const { settings } = useSettings();
20 | const theme = settings.theme;
21 |
22 | const [weather, setWeather] = useState(null);
23 | const [error, setError] = useState(false); // Add error state
24 | const format = settings.temperatureFormat;
25 |
26 | useEffect(() => {
27 | const fetchWeather = async () => {
28 | try {
29 | const response = await fetch(
30 | `https://api.weatherapi.com/v1/current.json?key=${process.env.WEATHER_KEY}&q=${settings.city}`
31 | );
32 | if (!response.ok) {
33 | throw new Error("Network response was not ok");
34 | }
35 | const data = await response.json();
36 | setWeather(data);
37 | setError(false); // Reset error state if fetch is successful
38 | } catch (error) {
39 | console.error("Error fetching weather data:", error);
40 | setError(true); // Set error state if fetch fails
41 | }
42 | };
43 |
44 | fetchWeather();
45 | }, [settings.city]);
46 |
47 | if (error) {
48 | return (
49 |
123 |
128 |
129 |
140 |
141 | {todos.length > 0 ? (
142 | todos.map((todo, index) => (
143 |
168 |
147 | handleToggleComplete(index)}
151 | className="p-2 rounded-md w-5 h-5"
152 | />
153 |
163 | ))
164 | ) : (
165 |
154 | {todo.text}
155 |
156 |
162 | No todos added yet.
166 | )}
167 |
58 | Edit city in settings
59 |
60 | );
61 | }
62 |
63 | if (!weather) {
64 | return (
65 |
74 | Loading...
75 |
76 | );
77 | }
78 |
79 | const {
80 | location: { name },
81 | current: {
82 | temp_c,
83 | temp_f,
84 | condition: { text, icon },
85 | wind_kph,
86 | wind_dir,
87 | humidity,
88 | feelslike_c,
89 | feelslike_f,
90 | },
91 | } = weather;
92 |
93 | return (
94 |
103 |
133 | );
134 | };
135 |
136 | export default Weather;
137 |
--------------------------------------------------------------------------------
/src/contexts/SettingsContext.tsx:
--------------------------------------------------------------------------------
1 | import React, {
2 | createContext,
3 | useContext,
4 | useState,
5 | useEffect,
6 | ReactNode,
7 | } from "react";
8 |
9 | // Define the shape of the user settings
10 | interface UserSettings {
11 | version: string;
12 | searchEngine: "google" | "bing" | "duckduckgo" | "perplexity";
13 | theme: "light" | "dark" | "solid";
14 | timeFormat: "24hr" | "12hr";
15 | temperatureFormat: "Fahrenheit" | "Celsius";
16 | backgroundImage: string;
17 | backgroundBlur: number;
18 | city: string;
19 | accent_color: string;
20 | text_color: string;
21 | theme_colors: string[];
22 | }
23 |
24 | interface SettingsContextProps {
25 | settings: UserSettings;
26 | updateSettings: (newSettings: Partial
104 | 
131 |
132 |
105 |
130 | 106 | {format === "Fahrenheit" ? `${temp_f}°F` : `${temp_c}°C`} 107 |
108 |
109 |
117 | {text}
110 |111 | | Feels like:{" "} 112 | {format === "Fahrenheit" 113 | ? `${feelslike_f}°F` 114 | : `${feelslike_c}°C`} 115 |
116 |
118 |
129 |
119 |
123 |
126 |