dominik/homepage-plus
1
0
Fork 0
mirror of https://github.com/DI0IK/homepage-plus.git synced 2025-07-08 14:38:47 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

add theme switcher

Browse source
This commit is contained in:
Ben Phelps 2022-08-25 11:14:17 +03:00
parent 5711b22b4e
commit 1b2fa720c6
8 changed files with 469 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

70
src/pages/index.js
View file

@ -7,52 +7,60 @@ import { ThemeProvider } from "utils/theme-context";
import ServicesGroup from "components/services/group";
import BookmarksGroup from "components/bookmarks/group";
import Widget from "components/widget";
import { ColorProvider } from "utils/color-context";
const ThemeToggle = dynamic(() => import("components/theme-toggle"), {
ssr: false,
});
const ColorToggle = dynamic(() => import("components/color-toggle"), {
ssr: false,
});
export default function Home() {
const { data: services, error: servicesError } = useSWR("/api/services");
const { data: bookmarks, error: bookmarksError } = useSWR("/api/bookmarks");
const { data: widgets, error: widgetsError } = useSWR("/api/widgets");
return (
<ThemeProvider>
<Head>
<title>Welcome</title>
</Head>
<div className="w-full container m-auto flex flex-col h-screen justify-between">
<div className="flex flex-wrap m-8 pb-4 mt-10 border-b-2 border-theme-800 dark:border-theme-200">
{widgets && (
<>
{widgets.map((widget) => (
<Widget key={widget.type} widget={widget} />
<ColorProvider>
<ThemeProvider>
<Head>
<title>Welcome</title>
</Head>
<div className="w-full container m-auto flex flex-col h-screen justify-between">
<div className="flex flex-wrap m-8 pb-4 mt-10 border-b-2 border-theme-800 dark:border-theme-200">
{widgets && (
<>
{widgets.map((widget) => (
<Widget key={widget.type} widget={widget} />
))}
</>
)}
</div>
{services && (
<div className="flex flex-wrap p-8 items-start">
{services.map((group) => (
<ServicesGroup key={group.name} services={group} />
))}
</>
</div>
)}
</div>
{services && (
<div className="flex flex-wrap p-8 items-start">
{services.map((group) => (
<ServicesGroup key={group.name} services={group} />
))}
{bookmarks && (
<div className="grow flex flex-wrap pt-0 p-8">
{bookmarks.map((group) => (
<BookmarksGroup key={group.name} group={group} />
))}
</div>
)}
<div className="rounded-full flex p-8 w-full justify-between">
<ColorToggle />
<ThemeToggle />
</div>
)}
{bookmarks && (
<div className="grow flex flex-wrap pt-0 p-8">
{bookmarks.map((group) => (
<BookmarksGroup key={group.name} group={group} />
))}
</div>
)}
<div className="rounded-full flex p-8 w-full justify-end">
<ThemeToggle />
</div>
</div>
</ThemeProvider>
</ThemeProvider>
</ColorProvider>
);
}