Add cards page (#5)

* Update Plan

* Work on header.

* Adjust search

* Adjust colors.

* Extract primary header.

* Make cards list scrollable.

* Adjust colors.

* Add more dummy pages.

* Navigate with query

* Adjust plan

* Fix error.

app/(homescreens)/add-cards/page.tsx

@@ -1,3 +1,57 @@
+import { PredefinedCompanies, Routes } from '@/app/lib/shared';
+import { PrimaryHeader } from '@/app/ui/primary-header';
+import {
+  IconGift,
+  IconLayoutGrid,
+  IconPlus,
+  IconSearch,
+} from '@tabler/icons-react';
+import Link from 'next/link';
+
 export default function Page() {
-  return <main>Add cards</main>;
+  return (
+    <div className="h-full flex flex-col">
+      <PrimaryHeader
+        title="Add cards"
+        actions={
+          <Link href={Routes.ScanCard}>
+            <button className="btn btn-primary">
+              <IconPlus className="w-6 h-6" />
+              Add card
+            </button>
+          </Link>
+        }
+      >
+        <>
+          <div className="form-control flex-1">
+            <label className="input input-bordered flex items-center gap-2 w-full">
+              <input type="text" className="grow w-full" placeholder="Search" />
+              <IconSearch className="h-4 w-4 opacity-70"></IconSearch>
+            </label>
+          </div>
+          <button className="btn btn-circle btn-ghost">
+            <IconLayoutGrid className="w-6 h-6" />
+          </button>
+        </>
+      </PrimaryHeader>
+      <main className="overflow-y-auto flex-1 bg-base-100">
+        <ul className="menu menu-lg rounded-box text-base-content">
+          {Object.values(PredefinedCompanies).map(company => (
+            <li key={company}>
+              <Link
+                href={{
+                  pathname: Routes.ScanCard,
+                  query: { predefinedCompany: company },
+                }}
+                prefetch={false}
+              >
+                <IconGift className="w-8 h-8" />
+                {company}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </main>
+    </div>
+  );
 }

app/(homescreens)/layout.module.css

@@ -0,0 +1,6 @@
+.bottomBarNavHeight {
+  height: var(--bottom-bar-height);
+}
+.childrenHeight {
+  height: calc(100vh - var(--bottom-bar-height));
+}

app/(homescreens)/layout.tsx

@@ -1,10 +1,17 @@
 import BottomNavigationLinks from '@/app/ui/bottom-navigation-links';
+import clsx from 'clsx';
+import styles from './layout.module.css';
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
-    <div className="flex h-screen flex-col">
-      <div>{children}</div>
-      <div className="btm-nav btm-nav-lg text-primary">
+    <div className="h-screen">
+      <div className={styles.childrenHeight}>{children}</div>
+      <div
+        className={clsx(
+          `btm-nav btm-nav-lg text-base-content bg-base-200`,
+          styles.bottomBarNavHeight
+        )}
+      >
         <BottomNavigationLinks />
       </div>
     </div>

app/add-card/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <div>Scan card page</div>;
+}

app/globals.css

@@ -5,13 +5,8 @@
 :root {
   --background: #ffffff;
   --foreground: #171717;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+  --bottom-bar-height: 5rem;
+  /*--primary: #fc9581;*/
 }
 
 body {

app/lib/shared.ts

@@ -3,10 +3,34 @@ export enum Routes {
   MyCards = '/my-cards',
   Settings = '/settings',
   Offline = '/offline',
+  AddCard = '/add-card',
+  ScanCard = '/scan-card',
 }
 
 export enum Cookies {
   LandingPage = 'LandingPage',
 }
 
 export const ICON_COLOR = '#db924b';
+
+export enum PredefinedCompanies {
+  TESCO = 'Tesco',
+  DM = 'Dm',
+  IKEA = 'Ikea',
+  BILLA = 'Billa',
+  LIDL = 'Lidl',
+  TERNO = 'Terno',
+  PET_CENTER = 'Pet center',
+  ALBERT = 'Albert',
+  GLOBUS = 'Globus',
+  ROSSMANN = 'Rossmann',
+  AUPARK = 'Aupark',
+  DATART = 'Datart',
+  KAUFLAND = 'Kaufland',
+  MALL = 'Mall',
+  NOTINO = 'Notino',
+  O2 = 'O2',
+  SPORTISIMO = 'Sportisimo',
+  TETA = 'Teta',
+  ZOOT = 'Zoot',
+}

app/scan-card/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <div>Scan card page</div>;
+}

app/ui/bottom-navigation-links.tsx

@@ -31,6 +31,7 @@ export default function BottomNavigationLinks() {
             href={link.href}
             className={clsx({
               active: pathname === link.href,
+              ['text-primary']: pathname === link.href,
             })}
           >
             <LinkIcon className="w-6" />

app/ui/primary-header.tsx

@@ -0,0 +1,34 @@
+import Image from 'next/image';
+
+export function PrimaryHeader({
+  title,
+  actions,
+  children,
+}: {
+  title: string;
+  actions?: React.ReactNode;
+  children?: React.ReactNode;
+}) {
+  return (
+    <header>
+      <div className="navbar bg-base-200 text-base-content">
+        <div className="navbar-start">
+          <Image
+            src="/logo.svg"
+            alt="Tilda logo"
+            className="w-8 rounded-lg bg-base-content"
+            width={24}
+            height={24}
+          />
+          <h1 className="btn btn-ghost text-lg">{title}</h1>
+        </div>
+        {actions && <div className="navbar-end">{actions}</div>}
+      </div>
+      {children && (
+        <div className="navbar bg-base-100 text-base-content gap-2">
+          {children}
+        </div>
+      )}
+    </header>
+  );
+}

plan.md

@@ -7,11 +7,11 @@ Features:
 3. optional are with normal font
 
 - [ ] **Welcome page**
-  - [ ] **add navigation to my cards page**
+  - [x] **add navigation to add cards page**
   - [ ] **add navigation to about page**
 - [ ] Utils
   - [ ] add theme switching
-  - [ ] **implement PWA**
+  - [x] **implement PWA**
   - [x] **add homescreen menu**
   - [ ] **create a general search component**
   - [ ] **implement primary header**
@@ -21,11 +21,11 @@ Features:
   - [ ] _fe unit tests_
   - [ ] e2e tests
 - [ ] **Add cards page**
-  - [ ] **display list of predefined companies**
+  - [x] **display list of predefined companies**
   - [ ] display grid of predefined companies + switch to grid
   - [ ] _implement search in predefined companies_
-  - [ ] **implement add card button + navigation to scan code page**
-  - [ ] _implement click on predefined company + navigation to create card page_
+  - [x] **implement add card button + navigation to scan code page**
+  - [x] _implement click on predefined company + navigation to create card page_
 - [ ] _Scan code page_
   - [ ] _implement barcode scan_
   - [ ] _implement navigation to qrcode scan + scan itself_

tailwind.config.ts

@@ -17,7 +17,7 @@ const config: Config = {
   },
   plugins: [daisyui],
   daisyui: {
-    themes: ['coffee', 'sunset', 'acid', 'light', 'dark'],
+    themes: ['coffee'],
   },
 };
 export default config;