(requestUrl, fetcher);
return (
- <>
-
+
+
+ {name}
+
+
+ }
+ >
{isValidating ? (
Validating…
) : isLoading ? (
@@ -61,14 +74,16 @@ const List = ({
{JSON.stringify(data?.debug, null, 2)}
) : (
-
- {data.items.map(({ title, url }, index) => {
- const key = `${title}:${url}:${index}`;
- return - {url ? {title} : title}
;
- })}
-
+
+
+ {data.items.map(({ title, url }, index) => {
+ const key = `${title}:${url}:${index}`;
+ return - {url ? {title} : title}
;
+ })}
+
+
)}
-
+
);
};
diff --git a/src/app/ListForm.tsx b/src/app/ListForm.tsx
index e9c0bb6..6e8bb2d 100644
--- a/src/app/ListForm.tsx
+++ b/src/app/ListForm.tsx
@@ -1,3 +1,6 @@
+import { Button } from "@colonydb/anthill/Button";
+import { RegularField } from "@colonydb/anthill/RegularField";
+import { Stack } from "@colonydb/anthill/Stack";
import { useState } from "react";
import type { ListConfig } from ".";
import List from "./List";
@@ -16,116 +19,118 @@ const ListForm = ({ list: initialList, onSubmit }: Props) => {
onSubmit(list);
}}
>
-
-
- {
- setList({ ...list, name: event.target.value });
- }}
- size={100}
- placeholder="Reddit"
- />
-
-
-
- {
- setList({ ...list, url: event.target.value });
- }}
- size={100}
- placeholder="https://www.reddit.com/"
- />
-
-
-
- {
- setList({ ...list, itemSelector: event.target.value });
- }}
- size={100}
- placeholder="article"
- />
-
-
-
- {
- setList({ ...list, titleSelector: event.target.value });
- }}
- size={100}
- placeholder="a"
- />
-
-
-
- {
- setList({ ...list, linkSelector: event.target.value });
- }}
- size={100}
- placeholder="a"
- />
-
-
-
- {
- setList({ ...list, include: event.target.value });
- }}
- size={100}
- placeholder="example, example two"
- />
-
-
-
- {
- setList({ ...list, exclude: event.target.value });
- }}
- size={100}
- placeholder="example, example two"
- />
-
- {list.name.trim() === "" || list.url.trim() === "" || list.itemSelector.trim() === "" ? (
- Required fields: Name, URL and Item selector
- ) : (
-
- )}
-
-
-
+
+
+ {
+ setList({ ...list, name: event.target.value });
+ }}
+ size={100}
+ placeholder="Reddit"
+ style={{ all: "revert" }}
+ />
+
+
+ {
+ setList({ ...list, url: event.target.value });
+ }}
+ size={100}
+ placeholder="https://www.reddit.com/"
+ style={{ all: "revert" }}
+ />
+
+
+ {
+ setList({ ...list, itemSelector: event.target.value });
+ }}
+ size={100}
+ placeholder="article"
+ style={{ all: "revert" }}
+ />
+
+
+ {
+ setList({ ...list, titleSelector: event.target.value });
+ }}
+ size={100}
+ placeholder="a"
+ style={{ all: "revert" }}
+ />
+
+
+ {
+ setList({ ...list, linkSelector: event.target.value });
+ }}
+ size={100}
+ placeholder="a"
+ style={{ all: "revert" }}
+ />
+
+
+ {
+ setList({ ...list, include: event.target.value });
+ }}
+ size={100}
+ placeholder="example, example two"
+ style={{ all: "revert" }}
+ />
+
+
+ {
+ setList({ ...list, exclude: event.target.value });
+ }}
+ size={100}
+ placeholder="example, example two"
+ style={{ all: "revert" }}
+ />
+
+ {list.name.trim() === "" ||
+ list.url.trim() === "" ||
+ list.itemSelector.trim() === "" ? null : (
+
+ )}
+
+
+
+
);
};
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 14e9b7f..d0781b8 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,5 +1,6 @@
+import { Base } from "@colonydb/anthill/Base";
import type { Metadata } from "next";
-import "./layout.css";
+import FrameworkContextProvider from "./FrameworkContextProvider";
type Props = Readonly<{
children: React.ReactNode;
@@ -13,7 +14,13 @@ export const metadata: Metadata = {
const RootLayout = ({ children }: Props) => (
- {children}
+
+
+
+ {children}
+
+
+
);
diff --git a/src/app/page.tsx b/src/app/page.tsx
index c9ac0d0..76a312a 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,9 +1,18 @@
"use client";
+import { Button } from "@colonydb/anthill/Button";
+import { Card } from "@colonydb/anthill/Card";
+import { CardContent } from "@colonydb/anthill/CardContent";
+import { Dialog } from "@colonydb/anthill/Dialog";
+import { Header } from "@colonydb/anthill/Header";
+import { Heading } from "@colonydb/anthill/Heading";
+import { Icon } from "@colonydb/anthill/Icon";
+import { Section } from "@colonydb/anthill/Section";
+import { Stack } from "@colonydb/anthill/Stack";
import useSWR from "swr/immutable";
import { v4 as uuid } from "uuid";
import type { ListConfig } from ".";
-import Dialog from "./Dialog";
+// import Dialog from "./Dialog";
import List from "./List";
import ListForm from "./ListForm";
@@ -56,69 +65,121 @@ const HomePage = () => {
if (error) return ":(";
return (
-
-
- {(lists ?? [])
- .sort((a, b) => a.name.localeCompare(b.name))
- .map((list) => (
-
-
-
-
-
-
- ))}
-
-
-
+ }
+ >
+
Harvester
+
+ }
+ >
+
- Add list
-
-
+
+ {(lists ?? [])
+ .sort((a, b) => a.name.localeCompare(b.name))
+ .map((list) => (
+
+
+ }
+ render={(closeDialog) => (
+ Remove List}
+ footer={
+ <>
+
+
+
+ }
+ >
+ Are you sure you want to remove this list?
+
+ )}
+ width="narrow"
+ >
+ Remove list
+
+ }
+ render={(closeDialog) => (
+ Edit List}>
+
+ {
+ updateList(list);
+ closeDialog();
+ }}
+ />
+
+
+ )}
+ >
+ Edit list
+
+