initial version (template only)

2026-04-28 13:34:35 +02:00
commit 0f75dbaccb
44 changed files with 14066 additions and 0 deletions
@@ -0,0 +1,57 @@
+import type { LoaderFunctionArgs } from "react-router";
+import { redirect, Form, useLoaderData } from "react-router";
+
+import { login } from "../../shopify.server";
+
+import styles from "./styles.module.css";
+
+export const loader = async ({ request }: LoaderFunctionArgs) => {
+  const url = new URL(request.url);
+
+  if (url.searchParams.get("shop")) {
+    throw redirect(`/app?${url.searchParams.toString()}`);
+  }
+
+  return { showForm: Boolean(login) };
+};
+
+export default function App() {
+  const { showForm } = useLoaderData<typeof loader>();
+
+  return (
+    <div className={styles.index}>
+      <div className={styles.content}>
+        <h1 className={styles.heading}>A short heading about [your app]</h1>
+        <p className={styles.text}>
+          A tagline about [your app] that describes your value proposition.
+        </p>
+        {showForm && (
+          <Form className={styles.form} method="post" action="/auth/login">
+            <label className={styles.label}>
+              <span>Shop domain</span>
+              <input className={styles.input} type="text" name="shop" />
+              <span>e.g: my-shop-domain.myshopify.com</span>
+            </label>
+            <button className={styles.button} type="submit">
+              Log in
+            </button>
+          </Form>
+        )}
+        <ul className={styles.list}>
+          <li>
+            <strong>Product feature</strong>. Some detail about your feature and
+            its benefit to your customer.
+          </li>
+          <li>
+            <strong>Product feature</strong>. Some detail about your feature and
+            its benefit to your customer.
+          </li>
+          <li>
+            <strong>Product feature</strong>. Some detail about your feature and
+            its benefit to your customer.
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,73 @@
+.index {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+  text-align: center;
+  padding: 1rem;
+}
+
+.heading,
+.text {
+  padding: 0;
+  margin: 0;
+}
+
+.text {
+  font-size: 1.2rem;
+  padding-bottom: 2rem;
+}
+
+.content {
+  display: grid;
+  gap: 2rem;
+}
+
+.form {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin: 0 auto;
+  gap: 1rem;
+}
+
+.label {
+  display: grid;
+  gap: 0.2rem;
+  max-width: 20rem;
+  text-align: left;
+  font-size: 1rem;
+}
+
+.input {
+  padding: 0.4rem;
+}
+
+.button {
+  padding: 0.4rem;
+}
+
+.list {
+  list-style: none;
+  padding: 0;
+  padding-top: 3rem;
+  margin: 0;
+  display: flex;
+  gap: 2rem;
+}
+
+.list > li {
+  max-width: 20rem;
+  text-align: left;
+}
+
+@media only screen and (max-width: 50rem) {
+  .list {
+    display: block;
+  }
+
+  .list > li {
+    padding-bottom: 1rem;
+  }
+}