+
+ );
+ };
+
+ return (
+
+
+ );
+};
+
+export default Card;
diff --git a/ui/src/components/checkboxes/Checkbox.tsx b/ui/src/components/checkboxes/Checkbox.tsx
new file mode 100644
index 00000000..973efc67
--- /dev/null
+++ b/ui/src/components/checkboxes/Checkbox.tsx
@@ -0,0 +1,128 @@
+import React from "react";
+import { twMerge } from "tailwind-merge";
+
+import CheckIcon from "@/assets/icons/CheckIcon";
+import MinusIcon from "@/assets/icons/MinusIcon";
+
+export interface CheckboxProps {
+ className?: string;
+ variant?: "light" | "dark";
+ label: string;
+ checked?: boolean;
+ defaultChecked?: boolean;
+ disabled?: boolean;
+ onChange?: (e: React.ChangeEvent
+
+ {name}
+
+ {isRunning ? (
+
+
+ Running
+
+ ) : isPR ? (
+
+ {[
+ ["Namespace", namespace],
+ ["State", getTag()],
+ ["Repository", repository],
+ ["Branch", branch],
+ ["Path", path],
+ ["Last result", lastResult],
+ ].map(([label, value], index) => (
+
+
+ {label}
+
+
+ ))}
+
+
+
+ {value}
+
+
+
+ {label}
+
+ {children}
+
+ )}
+
+ );
+};
+
+export default Dropdown;
diff --git a/ui/src/components/inputs/Input.tsx b/ui/src/components/inputs/Input.tsx
new file mode 100644
index 00000000..7240d4ef
--- /dev/null
+++ b/ui/src/components/inputs/Input.tsx
@@ -0,0 +1,177 @@
+import React, { useRef } from "react";
+import { twMerge } from "tailwind-merge";
+
+import ExclamationTriangleIcon from "@/assets/icons/ExclamationTriangleIcon";
+
+export interface InputProps {
+ className?: string;
+ variant?: "light" | "dark";
+ label?: string;
+ type?: React.HTMLInputTypeAttribute;
+ placeholder?: string;
+ value?: string;
+ leftIcon?: React.ReactNode;
+ rightIcon?: React.ReactNode;
+ caption?: string;
+ error?: boolean;
+ disabled?: boolean;
+ onChange?: (e: React.ChangeEvent
+ {children}
+
+ );
+};
+
+export default Box;
diff --git a/ui/src/components/misc/ProfilePicture.tsx b/ui/src/components/misc/ProfilePicture.tsx
new file mode 100644
index 00000000..f14d3dac
--- /dev/null
+++ b/ui/src/components/misc/ProfilePicture.tsx
@@ -0,0 +1,94 @@
+import React, { useState, useRef } from "react";
+import { twMerge } from "tailwind-merge";
+
+import ThemeToggle from "@/components/misc/ThemeToggle";
+
+import Sombrero from "@/assets/illustrations/Sombrero";
+
+export interface ProfilePictureProps {
+ className?: string;
+ variant?: "light" | "dark";
+}
+
+const ProfilePicture: React.FC
+ 
// TODO: Add profile picture */}
+
+ );
+};
+
+export default ProfilePicture;
diff --git a/ui/src/components/misc/ThemeToggle.tsx b/ui/src/components/misc/ThemeToggle.tsx
new file mode 100644
index 00000000..5388ac4d
--- /dev/null
+++ b/ui/src/components/misc/ThemeToggle.tsx
@@ -0,0 +1,41 @@
+import React, { useContext } from "react";
+import { twMerge } from "tailwind-merge";
+
+import { ThemeContext } from "@/contexts/ThemeContext";
+
+import Box from "@/components/misc/Box";
+import Toggle from "@/components/buttons/Toggle";
+
+export interface ThemeToggleProps {
+ className?: string;
+ variant?: "light" | "dark";
+}
+
+const ThemeToggle: React.FC
+ BR
+
+ {open && (
+
+
+ );
+};
+
+export default NavigationBar;
diff --git a/ui/src/components/navigation/NavigationButton.tsx b/ui/src/components/navigation/NavigationButton.tsx
new file mode 100644
index 00000000..f75706c5
--- /dev/null
+++ b/ui/src/components/navigation/NavigationButton.tsx
@@ -0,0 +1,63 @@
+import React from "react";
+
+export interface NavigationButtonProps {
+ variant?: "light" | "dark";
+ icon: React.ReactNode;
+ selected?: boolean;
+ onClick?: () => void;
+}
+
+const NavigationButton: React.FC
+
+
+
+ isActive ? "fill-inherit" : "fill-primary-600"
+ }
+ to="/layers"
+ >
+
+
+ isActive ? "fill-inherit" : "fill-primary-600"
+ }
+ to="/pulls"
+ >
+
+
+
+ {result.getValue()}
+ {result.row.original.isRunning && (
+
+ ),
+ }),
+ ];
+
+ const getTag = (state: LayerState) => {
+ return (
+
+
+ )}
+
+ Running
+
+
+
+ );
+ };
+
+ const table = useReactTable({
+ data,
+ columns,
+ getCoreRowModel: getCoreRowModel(),
+ });
+
+ const styles = {
+ header: {
+ light: `text-primary-600`,
+ dark: `text-nuances-300`,
+ },
+ row: {
+ base: {
+ light: `text-nuances-black
+ fill-nuances-black
+ hover:bg-nuances-white
+ hover:shadow-light`, // BUG: not working on Safari
+ dark: `text-nuances-50
+ fill-nuances-50
+ hover:bg-nuances-400
+ hover:shadow-dark`, // BUG: not working on Safari
+ },
+ running: {
+ light: `outline-blue-400`,
+ dark: `outline-blue-500`,
+ },
+ },
+ separator: {
+ light: `border-primary-500`,
+ dark: `border-nuances-300`,
+ },
+ };
+
+ return (
+
+
+ {/* HACK: 1px height actually ignored but required to make cell div full size */}
+
+ {table.getHeaderGroups().map((headerGroup) => (
+
+
+ );
+};
+
+export default Table;
diff --git a/ui/src/components/tags/Tag.tsx b/ui/src/components/tags/Tag.tsx
new file mode 100644
index 00000000..514a61e7
--- /dev/null
+++ b/ui/src/components/tags/Tag.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+
+import { LayerState } from "@/clients/layers/types";
+
+export interface TagProps {
+ variant: LayerState;
+}
+
+const Tag: React.FC|
+ {header.isPlaceholder
+ ? null
+ : flexRender(
+ header.column.columnDef.header,
+ header.getContext()
+ )}
+ {index === 0 ? (
+ + ) : index === headerGroup.headers.length - 1 ? ( + + ) : ( + + )} + |
+ ))}
+
|---|
|
+ {flexRender(cell.column.columnDef.cell, cell.getContext())}
+ {index === 0 ? (
+ + ) : index === row.getVisibleCells().length - 1 ? ( + + ) : ( + + )} + |
+ ))}
+
+ {getContent()}
+
+ );
+};
+
+export default Tag;
diff --git a/ui/src/contexts/ThemeContext.tsx b/ui/src/contexts/ThemeContext.tsx
new file mode 100644
index 00000000..60ecb1fa
--- /dev/null
+++ b/ui/src/contexts/ThemeContext.tsx
@@ -0,0 +1,47 @@
+import React, { useState, useEffect, createContext } from "react";
+
+interface ThemeContextProps {
+ theme: "light" | "dark";
+ setTheme: (theme: "light" | "dark") => void;
+}
+
+export const ThemeContext = createContext
+
+ );
+};
+
+export default Layout;
diff --git a/ui/src/main.tsx b/ui/src/main.tsx
new file mode 100644
index 00000000..966f17a4
--- /dev/null
+++ b/ui/src/main.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+
+
+ ) : (
+ <>
+ ))}
+
+ );
+};
+
+export default Layers;
diff --git a/ui/src/pages/layers/components/RepositoryDropdown.tsx b/ui/src/pages/layers/components/RepositoryDropdown.tsx
new file mode 100644
index 00000000..4ca5087a
--- /dev/null
+++ b/ui/src/pages/layers/components/RepositoryDropdown.tsx
@@ -0,0 +1,123 @@
+import React, { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+
+import { fetchRepositories } from "@/clients/repositories/client";
+import { reactQueryKeys } from "@/clients/reactQueryConfig";
+
+import Box from "@/components/misc/Box";
+import Input from "@/components/inputs/Input";
+import Checkbox from "@/components/checkboxes/Checkbox";
+
+export interface RepositoryDropdownProps {
+ variant?: "light" | "dark";
+ filter: string[];
+ onChange: (filter: string[]) => void;
+}
+
+const RepositoryDropdown: React.FC
+
+ {layersQuery.isLoading && <>}
+ {layersQuery.isError && <>}
+ {layersQuery.isSuccess &&
+ (view === "grid" ? (
+
+
+ }
+ value={search}
+ onChange={(e) => setSearch(e.target.value)}
+ />
+ + Layers +
+ +
+
+
+
+ {`${
+ layersQuery.isSuccess ? layersQuery.data.results.length : 0
+ } layers`}
+
+
+
+ Filter by
+
+
+
+
+
+
+
+
+
+
+ Hide Pull Requests
+
+ setHidePRFilter(!hidePRFilter)}
+ />
+
+
+
+
+ {layersQuery.data.results.map((layer, index) => (
+
+ ) : view === "table" ? (
+ + +
+
+ {repositoriesQuery.isLoading && Loading...}
+ {repositoriesQuery.isError && An error occurred.}
+ {repositoriesQuery.isSuccess &&
+ (repositoriesQuery.data.results.length !== 0 ? (
+ repositoriesQuery.data.results.map((repository) => (
+ handleChange(e, repository.name)}
+ />
+ ))
+ ) : (
+ No repositories found.
+ ))}
+
+ +
+ handleChange(e, "success")}
+ />
+ handleChange(e, "warning")}
+ />
+ handleChange(e, "error")}
+ />
+
+
+
+ );
+};
+
+export default Login;
diff --git a/ui/src/pages/pulls/Pulls.tsx b/ui/src/pages/pulls/Pulls.tsx
new file mode 100644
index 00000000..b6f2637a
--- /dev/null
+++ b/ui/src/pages/pulls/Pulls.tsx
@@ -0,0 +1,26 @@
+import React, { useContext } from "react";
+
+import { ThemeContext } from "@/contexts/ThemeContext";
+
+import TrafficCone from "./temp/TrafficCone";
+
+const Pulls: React.FC = () => {
+ const { theme } = useContext(ThemeContext);
+ return (
+
+
+
+
+
+
+
+
+
+
+ }
+ />
+
+
+
+
+ OR +
+
+ + OR +
+
+ navigate("/")}
+ />
+ navigate("/")}
+ />
+
+
+
+ Don't have an account ?
+
+ Sign up
+
+
+ 
+
+
+ Burrito is a TACoS
+
+ Monitor the status of your layers and their impacts on your project.
+
+
+
+
+ );
+};
+
+export default Pulls;
diff --git a/ui/src/pages/pulls/temp/TrafficCone.tsx b/ui/src/pages/pulls/temp/TrafficCone.tsx
new file mode 100644
index 00000000..2151197c
--- /dev/null
+++ b/ui/src/pages/pulls/temp/TrafficCone.tsx
@@ -0,0 +1,53 @@
+import { SVGProps } from "react";
+
+const TrafficCone = (props: SVGProps
+
+