+ Not found
+ Page not found
+
+ Sorry{" "}
+
+ 😔
+ {" "}
+ we couldn’t find what you were looking for.
+
+ {process.env.NODE_ENV === "development" ? (
+ <>
+
+ Try creating a page in src/pages/
.
+
+ >
+ ) : null}
+
+ Go home.
+
+
+ )
+}
+
+export default NotFoundPage
diff --git a/packages/dashboard-v2/src/pages/files.js b/packages/dashboard-v2/src/pages/files.js
new file mode 100644
index 00000000..e7f71f5e
--- /dev/null
+++ b/packages/dashboard-v2/src/pages/files.js
@@ -0,0 +1,13 @@
+import * as React from "react"
+
+// markup
+const FilesPage = () => {
+
+ return (
+ <>
+ FILES
+ >
+ )
+}
+
+export default FilesPage
diff --git a/packages/dashboard-v2/src/pages/index.js b/packages/dashboard-v2/src/pages/index.js
new file mode 100644
index 00000000..b87df20a
--- /dev/null
+++ b/packages/dashboard-v2/src/pages/index.js
@@ -0,0 +1,13 @@
+import * as React from "react"
+
+// markup
+const IndexPage = () => {
+
+ return (
+ <>
+ Dashboard
+ >
+ )
+}
+
+export default IndexPage
diff --git a/packages/dashboard-v2/src/styles/global.css b/packages/dashboard-v2/src/styles/global.css
new file mode 100644
index 00000000..b5c61c95
--- /dev/null
+++ b/packages/dashboard-v2/src/styles/global.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/packages/dashboard-v2/tailwind.config.js b/packages/dashboard-v2/tailwind.config.js
new file mode 100644
index 00000000..1a81d88c
--- /dev/null
+++ b/packages/dashboard-v2/tailwind.config.js
@@ -0,0 +1,70 @@
+const defaultTheme = require("tailwindcss/defaultTheme");
+const plugin = require("tailwindcss/plugin");
+
+const colors = {
+ primary: { light: "#33D17E", DEFAULT: "#00c65e" },
+ warning: "#ffd567",
+ error: "#ED5454",
+ palette: {
+ 100: "#f5f7f7",
+ 200: "#d4dddb",
+ 300: "#9e9e9e",
+ 400: "#555555",
+ 500: "#242424",
+ 600: "#0d0d0d",
+ },
+};
+
+module.exports = {
+ content: [
+ "./src/**/*.{js,jsx,ts,tsx}",
+ "./node_modules/skynet-storybook/dist/**/*.{js,jsx,ts,tsx}", // Also apply Tailwind classes to our shared components library
+ ],
+ theme: {
+ screens: {
+ sm: "640px",
+ md: "768px",
+ lg: "1024px",
+ xl: "1440px",
+ },
+ backgroundColor: (theme) => ({ ...theme("colors"), ...colors }),
+ borderColor: (theme) => ({ ...theme("colors"), ...colors }),
+ textColor: (theme) => ({ ...theme("colors"), ...colors }),
+ placeholderColor: (theme) => ({ ...theme("colors"), ...colors }),
+ extend: {
+ fontFamily: {
+ sans: ["Sora", ...defaultTheme.fontFamily.sans],
+ content: ["Source\\ Sans\\ Pro", ...defaultTheme.fontFamily.sans],
+ },
+ fontSize: {
+ tab: ["18px", "28px"],
+ },
+ backgroundColor: ["disabled"],
+ textColor: ["disabled"],
+ keyframes: {
+ wiggle: {
+ "0%, 100%": { transform: "rotate(-3deg)" },
+ "50%": { transform: "rotate(3deg)" },
+ },
+ },
+ animation: {
+ wiggle: "wiggle 3s ease-in-out infinite",
+ },
+ width: {
+ page: "100%",
+ "page-md": "640px",
+ "page-lg": "896px",
+ "page-xl": "1312px",
+ }
+ },
+ },
+ plugins: [
+ plugin(function ({ addBase, theme }) {
+ addBase({
+ body: {
+ color: theme("textColor.palette.600"),
+ },
+ });
+ }),
+ ],
+};