added remix admin template

Author: TomasBankauskas

.env.example

@@ -0,0 +1,2 @@
+SUPABASE_URL=
+SUPABASE_ANON_KEY=

.eslintrc.cjs

@@ -0,0 +1,84 @@
+/**
+ * This is intended to be a basic starting point for linting in your app.
+ * It relies on recommended configs out of the box for simplicity, but you can
+ * and should modify this configuration to best suit your team's needs.
+ */
+
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  env: {
+    browser: true,
+    commonjs: true,
+    es6: true,
+  },
+  ignorePatterns: ["!**/.server", "!**/.client"],
+
+  // Base config
+  extends: ["eslint:recommended"],
+
+  overrides: [
+    // React
+    {
+      files: ["**/*.{js,jsx,ts,tsx}"],
+      plugins: ["react", "jsx-a11y"],
+      extends: [
+        "plugin:react/recommended",
+        "plugin:react/jsx-runtime",
+        "plugin:react-hooks/recommended",
+        "plugin:jsx-a11y/recommended",
+      ],
+      settings: {
+        react: {
+          version: "detect",
+        },
+        formComponents: ["Form"],
+        linkComponents: [
+          { name: "Link", linkAttribute: "to" },
+          { name: "NavLink", linkAttribute: "to" },
+        ],
+        "import/resolver": {
+          typescript: {},
+        },
+      },
+    },
+
+    // Typescript
+    {
+      files: ["**/*.{ts,tsx}"],
+      plugins: ["@typescript-eslint", "import"],
+      parser: "@typescript-eslint/parser",
+      settings: {
+        "import/internal-regex": "^~/",
+        "import/resolver": {
+          node: {
+            extensions: [".ts", ".tsx"],
+          },
+          typescript: {
+            alwaysTryTypes: true,
+          },
+        },
+      },
+      extends: [
+        "plugin:@typescript-eslint/recommended",
+        "plugin:import/recommended",
+        "plugin:import/typescript",
+      ],
+    },
+
+    // Node
+    {
+      files: [".eslintrc.cjs"],
+      env: {
+        node: true,
+      },
+    },
+  ],
+};

.gitignore

@@ -0,0 +1,7 @@
+node_modules
+
+/.cache
+/build
+.env
+
+.DS_Store

README.md

@@ -0,0 +1,40 @@
+# Welcome to Remix Admin Template!
+
+- 📖 [Remix docs](https://remix.run/docs)
+
+## Development
+
+Run the dev server:
+
+```shellscript
+npm run dev
+```
+
+## Deployment
+
+First, build your app for production:
+
+```sh
+npm run build
+```
+
+Then run the app in production mode:
+
+```sh
+npm start
+```
+
+Now you'll need to pick a host to deploy it to.
+
+### DIY
+
+If you're familiar with deploying Node applications, the built-in Remix app server is production-ready.
+
+Make sure to deploy the output of `npm run build`
+
+- `build/server`
+- `build/client`
+
+## Styling
+
+This template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever css framework you prefer. See the [Vite docs on css](https://vitejs.dev/guide/features.html#css) for more information.

app/components/Button.tsx

@@ -0,0 +1,101 @@
+import { Link } from "@remix-run/react";
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+import React from "react";
+
+import LoadingSpinner from "./icons/LoadingSpinner";
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  className?: string;
+  variant?: "contained" | "outlined";
+  size?: "small" | "medium" | "large";
+  type?: "submit" | "reset" | "button";
+  loading?: boolean;
+  to?: string;
+  target?: string;
+  disabled?: boolean;
+  onClick?: VoidFunction;
+  children?: ReactNode;
+}
+
+const baseStyles =
+  "group inline-flex items-center justify-center gap-1 text-sm/5 tracking-wide rounded-md transition focus:outline-none";
+
+const variantStyles = {
+  contained: "bg-cyan-500 text-white hover:bg-cyan-500/90",
+  outlined: "bg-transparent text-cyan-600 ring ring-cyan-300 hover:bg-cyan-50",
+};
+
+const sizeStyles = {
+  small: "py-2 px-3",
+  medium: "py-2 px-4",
+  large: "py-3 px-6",
+};
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      variant = "contained",
+      size = "medium",
+      children,
+      className,
+      loading = false,
+      disabled = false,
+      type,
+      target,
+      to,
+      onClick,
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <>
+        {to ? (
+          <Link
+            to={to}
+            className={[
+              baseStyles,
+              sizeStyles[size],
+              variantStyles[variant],
+              className,
+            ]
+              .filter(Boolean)
+              .join(" ")}
+            target={target}
+          >
+            {children}
+          </Link>
+        ) : (
+          <button
+            ref={ref}
+            disabled={disabled}
+            onClick={onClick}
+            className={[
+              baseStyles,
+              sizeStyles[size],
+              disabled || loading
+                ? "opacity-50 bg-slate-700 text-white hover:bg-slate-700 hover:text-white"
+                : variantStyles[variant],
+              "cursor-pointer relative",
+              className,
+            ]
+              .filter(Boolean)
+              .join(" ")}
+            {...rest}
+          >
+            {loading && (
+              <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
+                <LoadingSpinner />
+              </span>
+            )}
+            <span className={loading ? "invisible" : undefined}>
+              {children}
+            </span>
+          </button>
+        )}
+      </>
+    );
+  }
+);
+
+export default Button;

app/components/CodeBlock.tsx

@@ -0,0 +1,42 @@
+import { useEffect, useRef } from "react";
+import { createHighlighter } from "shiki";
+
+type CodeBlockProps = {
+  code: string;
+  language: "sql" | "csv";
+};
+
+const CodeBlock = ({ code, language }: CodeBlockProps) => {
+  const codeRef = useRef<HTMLPreElement>(null);
+
+  useEffect(() => {
+    const highlightCode = async () => {
+      const highlighter = await createHighlighter({
+        themes: ["github-light"],
+        langs: [language],
+      });
+
+      if (codeRef.current) {
+        const html = highlighter.codeToHtml(code, {
+          lang: language,
+          themes: { light: "github-light" },
+        });
+        const innerContent = html
+          .replace(/<pre[^>]*>/, "")
+          .replace(/<\/pre>$/, "");
+        codeRef.current.innerHTML = innerContent;
+      }
+    };
+
+    highlightCode();
+  }, [code, language]);
+
+  return (
+    <pre
+      ref={codeRef}
+      className="p-4 overflow-auto text-sm border rounded-md border-slate-200 not-prose"
+    />
+  );
+};
+
+export default CodeBlock;