2022-08-24 10:44:35 +03:00
|
|
|
import useSWR from "swr";
|
|
|
|
|
import Head from "next/head";
|
|
|
|
|
import dynamic from "next/dynamic";
|
|
|
|
|
|
|
|
|
|
import { ThemeProvider } from "utils/theme-context";
|
|
|
|
|
|
|
|
|
|
import ServicesGroup from "components/services/group";
|
|
|
|
|
import BookmarksGroup from "components/bookmarks/group";
|
|
|
|
|
import Widget from "components/widget";
|
2022-08-25 11:14:17 +03:00
|
|
|
import { ColorProvider } from "utils/color-context";
|
2022-09-01 19:11:45 +02:00
|
|
|
import Search from "components/widgets/search/search";
|
2022-08-24 10:44:35 +03:00
|
|
|
|
|
|
|
|
const ThemeToggle = dynamic(() => import("components/theme-toggle"), {
|
|
|
|
|
ssr: false,
|
|
|
|
|
});
|
|
|
|
|
|
2022-08-25 11:14:17 +03:00
|
|
|
const ColorToggle = dynamic(() => import("components/color-toggle"), {
|
|
|
|
|
ssr: false,
|
|
|
|
|
});
|
|
|
|
|
|
2022-09-01 19:11:45 +02:00
|
|
|
const rightAlignedWidgets = ["weatherapi", "openweathermap", "weather", "search"];
|
2022-09-03 12:40:04 +03:00
|
|
|
const expandedWidgets = ["search"];
|
2022-08-27 15:26:00 +03:00
|
|
|
|
2022-08-24 10:44:35 +03:00
|
|
|
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 (
|
2022-08-25 11:14:17 +03:00
|
|
|
<ColorProvider>
|
|
|
|
|
<ThemeProvider>
|
|
|
|
|
<Head>
|
|
|
|
|
<title>Welcome</title>
|
|
|
|
|
</Head>
|
|
|
|
|
<div className="w-full container m-auto flex flex-col h-screen justify-between">
|
2022-09-03 12:40:04 +03:00
|
|
|
<div className="flex flex-row flex-wrap space-x-0 sm:space-x-4 m-8 pb-4 mt-10 border-b-2 border-theme-800 dark:border-theme-200 justify-between md:justify-start">
|
2022-08-25 11:14:17 +03:00
|
|
|
{widgets && (
|
|
|
|
|
<>
|
2022-08-27 00:55:13 +03:00
|
|
|
{widgets
|
2022-08-27 15:26:00 +03:00
|
|
|
.filter((widget) => !rightAlignedWidgets.includes(widget.type))
|
2022-08-27 00:55:13 +03:00
|
|
|
.map((widget, i) => (
|
|
|
|
|
<Widget key={i} widget={widget} />
|
|
|
|
|
))}
|
2022-09-03 12:40:04 +03:00
|
|
|
|
|
|
|
|
<div className="flex flex-wrap basis-full space-x-0 sm:space-x-4 grow sm:basis-auto justify-between md:justify-end mt-2 md:mt-0">
|
|
|
|
|
{widgets
|
|
|
|
|
.filter((widget) => rightAlignedWidgets.includes(widget.type))
|
|
|
|
|
.map((widget, i) => (
|
2022-09-01 19:11:45 +02:00
|
|
|
<Widget key={i} widget={widget} />
|
2022-09-03 12:40:04 +03:00
|
|
|
))}
|
|
|
|
|
</div>
|
2022-08-25 11:14:17 +03:00
|
|
|
</>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{services && (
|
|
|
|
|
<div className="flex flex-wrap p-8 items-start">
|
|
|
|
|
{services.map((group) => (
|
|
|
|
|
<ServicesGroup key={group.name} services={group} />
|
2022-08-24 10:44:35 +03:00
|
|
|
))}
|
2022-08-25 11:14:17 +03:00
|
|
|
</div>
|
2022-08-24 10:44:35 +03:00
|
|
|
)}
|
|
|
|
|
|
2022-08-25 11:14:17 +03:00
|
|
|
{bookmarks && (
|
|
|
|
|
<div className="grow flex flex-wrap pt-0 p-8">
|
|
|
|
|
{bookmarks.map((group) => (
|
|
|
|
|
<BookmarksGroup key={group.name} group={group} />
|
|
|
|
|
))}
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
2022-08-24 10:44:35 +03:00
|
|
|
|
2022-08-25 11:14:17 +03:00
|
|
|
<div className="rounded-full flex p-8 w-full justify-between">
|
|
|
|
|
<ColorToggle />
|
|
|
|
|
<ThemeToggle />
|
2022-08-24 10:44:35 +03:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2022-08-25 11:14:17 +03:00
|
|
|
</ThemeProvider>
|
|
|
|
|
</ColorProvider>
|
2022-08-24 10:44:35 +03:00
|
|
|
);
|
|
|
|
|
}
|
