From 107512876174eae1cc3b516004f661910fb5f5db Mon Sep 17 00:00:00 2001 From: lukasbicus Date: Thu, 24 Oct 2024 14:36:19 +0200 Subject: [PATCH] Implement dummy Create card page (#6) * Rename add card to create card * Implement PageTemplate. * Use Page template in add-cards * Add text inputs * Add some dropdowns. * Add some dropdowns. * Add some dropdown fixes. * Update main layout. * Add some icon buttons. * Adjust layout * Adjust navigation. * Finish create card page style. * Adjust submit button name. * Update plan --- app/(homescreens)/add-cards/page.tsx | 90 +++++++++++++++------------- app/(homescreens)/layout.tsx | 4 +- app/add-card/page.tsx | 3 - app/create-card/page.tsx | 66 ++++++++++++++++++++ app/layout.tsx | 4 +- app/lib/shared.ts | 85 +++++++++++++++++++++++++- app/ui/dropdown-field.tsx | 49 +++++++++++++++ app/ui/page-template.tsx | 17 ++++++ app/ui/primary-header.tsx | 4 +- app/ui/secondary-header.tsx | 24 ++++++++ app/ui/text-area-field.tsx | 19 ++++++ app/ui/text-field.tsx | 24 ++++++++ plan.md | 4 +- tailwind.config.ts | 2 +- 14 files changed, 340 insertions(+), 55 deletions(-) delete mode 100644 app/add-card/page.tsx create mode 100644 app/create-card/page.tsx create mode 100644 app/ui/dropdown-field.tsx create mode 100644 app/ui/page-template.tsx create mode 100644 app/ui/secondary-header.tsx create mode 100644 app/ui/text-area-field.tsx create mode 100644 app/ui/text-field.tsx diff --git a/app/(homescreens)/add-cards/page.tsx b/app/(homescreens)/add-cards/page.tsx index 804fda8..db7e9e9 100644 --- a/app/(homescreens)/add-cards/page.tsx +++ b/app/(homescreens)/add-cards/page.tsx @@ -1,4 +1,5 @@ import { PredefinedCompanies, Routes } from '@/app/lib/shared'; +import PageTemplate from '@/app/ui/page-template'; import { PrimaryHeader } from '@/app/ui/primary-header'; import { IconGift, @@ -10,48 +11,53 @@ import Link from 'next/link'; export default function Page() { return ( -
- - + + } + > + <> +
+ +
+ - - } - > - <> -
- -
- - - -
-
    - {Object.values(PredefinedCompanies).map(company => ( -
  • - - - {company} - -
    • - ))} -
-
-
+ + + } + > + + ); } diff --git a/app/(homescreens)/layout.tsx b/app/(homescreens)/layout.tsx index f8960c7..24bebcd 100644 --- a/app/(homescreens)/layout.tsx +++ b/app/(homescreens)/layout.tsx @@ -6,14 +6,14 @@ export default function Layout({ children }: { children: React.ReactNode }) { return (
{children}
-
-
+
); } diff --git a/app/add-card/page.tsx b/app/add-card/page.tsx deleted file mode 100644 index c749c5b..0000000 --- a/app/add-card/page.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export default function Page() { - return
Scan card page
; -} diff --git a/app/create-card/page.tsx b/app/create-card/page.tsx new file mode 100644 index 0000000..193cd69 --- /dev/null +++ b/app/create-card/page.tsx @@ -0,0 +1,66 @@ +import { CardIcon, Colors, iconsMap, Routes } from '@/app/lib/shared'; +import { DropdownField } from '@/app/ui/dropdown-field'; +import PageTemplate from '@/app/ui/page-template'; +import { SecondaryHeader } from '@/app/ui/secondary-header'; +import { TextAreaField } from '@/app/ui/text-area-field'; +import { TextField } from '@/app/ui/text-field'; +import { IconCamera, IconPalette } from '@tabler/icons-react'; +import Link from 'next/link'; + +export default function Page() { + return ( + } + > +
+
+ + + + +
+ + +
+ ({ + label: ( +
+
+ {name} +
+ ), + value: hex, + }))} + /> + +
+ ({ + label: ( + + + + ), + value: key, + }))} + /> +
+
+ +
+ + + ); +} diff --git a/app/layout.tsx b/app/layout.tsx index 990dbbb..5c0e615 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -32,7 +32,7 @@ export default function RootLayout({ children: React.ReactNode; }>) { return ( - + {children} diff --git a/app/lib/shared.ts b/app/lib/shared.ts index 1ad32c1..a0b411d 100644 --- a/app/lib/shared.ts +++ b/app/lib/shared.ts @@ -1,9 +1,31 @@ +import { + IconBarbell, + IconBed, + IconBooks, + IconCar, + IconChess, + IconCoffee, + IconDeviceLaptop, + IconFirstAidKit, + IconFlower, + IconGasStation, + IconPaint, + IconPaperBag, + IconPaperclip, + IconPaw, + IconPlane, + IconShoppingCart, + IconTheater, + IconTicket, + IconToolsKitchen2, +} from '@tabler/icons-react'; + export enum Routes { AddCards = '/add-cards', MyCards = '/my-cards', Settings = '/settings', Offline = '/offline', - AddCard = '/add-card', + CreateCard = '/create-card', ScanCard = '/scan-card', } @@ -34,3 +56,64 @@ export enum PredefinedCompanies { TETA = 'Teta', ZOOT = 'Zoot', } + +export enum CardIcon { + Grocery = 'Grocery', + Retail = 'Retail', + Pharmacy = 'Pharmacy', + Gas = 'Gas Station', + Restaurant = 'Restaurant', + Cafes = 'Cafés', + Accommodation = 'Accommodation', + Airlines = 'Airlines', + Car = 'Car Rental', + Culture = 'Culture', + Beauty = 'Beauty', + Books = 'Books', + Fitness = 'Fitness', + Electronic = 'Electronic', + Pet = 'Pet', + Hobby = 'Hobby', + Office = 'Office', + Gaming = 'Gaming', + Entertainment = 'Entertainment', +} +export const iconsMap = { + [CardIcon.Grocery]: IconShoppingCart, + [CardIcon.Retail]: IconPaperBag, + [CardIcon.Pharmacy]: IconFirstAidKit, + [CardIcon.Gas]: IconGasStation, + [CardIcon.Restaurant]: IconToolsKitchen2, + [CardIcon.Cafes]: IconCoffee, + [CardIcon.Accommodation]: IconBed, + [CardIcon.Airlines]: IconPlane, + [CardIcon.Car]: IconCar, + [CardIcon.Culture]: IconTheater, + [CardIcon.Beauty]: IconFlower, + [CardIcon.Books]: IconBooks, + [CardIcon.Fitness]: IconBarbell, + [CardIcon.Electronic]: IconDeviceLaptop, + [CardIcon.Pet]: IconPaw, + [CardIcon.Hobby]: IconPaint, + [CardIcon.Office]: IconPaperclip, + [CardIcon.Gaming]: IconChess, + [CardIcon.Entertainment]: IconTicket, +}; + +export enum Colors { + SkyBlue = '#87CEEB', + Coral = '#FF7F50', + LightGreen = '#90EE90', + SandyBrown = '#F4A460', + Plum = '#DDA0DD', + CadetBlue = '#5F9EA0', + Salmon = '#FA8072', + Khaki = '#F0E68C', + SlateGray = '#708090', + Thistle = '#D8BFD8', + LightCoral = '#F08080', + PaleTurquoise = '#AFEEEE', + Tan = '#D2B48C', + LightSlateGray = '#778899', + Burlywood = '#DEB887', +} diff --git a/app/ui/dropdown-field.tsx b/app/ui/dropdown-field.tsx new file mode 100644 index 0000000..1146d9c --- /dev/null +++ b/app/ui/dropdown-field.tsx @@ -0,0 +1,49 @@ +import clsx from 'clsx'; + +export type Option = { + label: string | React.ReactNode; + value: T; +}; + +export function DropdownField({ + label, + className, + dropdownClassName, + options, + value, +}: { + label: string; + className?: string; + dropdownClassName?: string; + options: Option[]; + value?: T; +}) { + const currentOption = options.find(option => option.value === value); + + return ( + + ); +} diff --git a/app/ui/page-template.tsx b/app/ui/page-template.tsx new file mode 100644 index 0000000..1841ff6 --- /dev/null +++ b/app/ui/page-template.tsx @@ -0,0 +1,17 @@ +export default function PageTemplate({ + header, + children, + footer, +}: { + header: React.ReactNode; + footer?: React.ReactNode; + children: React.ReactNode; +}) { + return ( +
+ {header} +
{children}
+ {footer} +
+ ); +} diff --git a/app/ui/primary-header.tsx b/app/ui/primary-header.tsx index 56abe93..09e5970 100644 --- a/app/ui/primary-header.tsx +++ b/app/ui/primary-header.tsx @@ -11,7 +11,7 @@ export function PrimaryHeader({ }) { return (
-
+
-

{title}

+

{title}

{actions &&
{actions}
}
diff --git a/app/ui/secondary-header.tsx b/app/ui/secondary-header.tsx new file mode 100644 index 0000000..462bd86 --- /dev/null +++ b/app/ui/secondary-header.tsx @@ -0,0 +1,24 @@ +import { IconArrowLeft } from '@tabler/icons-react'; +import Link, { LinkProps } from 'next/link'; + +export function SecondaryHeader({ + title, + href, + rightAction, +}: { + title?: string; + rightAction?: React.ReactNode; + href: LinkProps['href']; +}) { + return ( +
+
+ + + +
+
{title}
+
{rightAction}
+
+ ); +} diff --git a/app/ui/text-area-field.tsx b/app/ui/text-area-field.tsx new file mode 100644 index 0000000..f26393a --- /dev/null +++ b/app/ui/text-area-field.tsx @@ -0,0 +1,19 @@ +export function TextAreaField({ + label, + placeholder = `Your ${label.toLowerCase()}`, +}: { + label: string; + placeholder?: string; +}) { + return ( + + ); +} diff --git a/app/ui/text-field.tsx b/app/ui/text-field.tsx new file mode 100644 index 0000000..f36ce65 --- /dev/null +++ b/app/ui/text-field.tsx @@ -0,0 +1,24 @@ +import clsx from 'clsx'; + +export function TextField({ + label, + placeholder = `Your ${label.toLowerCase()}`, + className, +}: { + label: string; + placeholder?: string; + className?: string; +}) { + return ( + + ); +} diff --git a/plan.md b/plan.md index 5bdcdf4..a47ce72 100644 --- a/plan.md +++ b/plan.md @@ -30,8 +30,8 @@ Features: - [ ] _implement barcode scan_ - [ ] _implement navigation to qrcode scan + scan itself_ - [ ] **Create card page** - - [ ] **implement form** - - [ ] _implement navigation to scan code page_ + - [x] **implement form** + - [x] _implement navigation to scan code page_ - [ ] implement color picker - [ ] **implement creation of card (add it to other cards in local storage (); navigate to my cards page)** - [ ] **My cards page** diff --git a/tailwind.config.ts b/tailwind.config.ts index c7d495c..9dadf75 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -17,7 +17,7 @@ const config: Config = { }, plugins: [daisyui], daisyui: { - themes: ['coffee'], + themes: ['light', 'coffee'], }, }; export default config;