Skip to content

Commit

Permalink
fix: mobile device layout on main page
Browse files Browse the repository at this point in the history
  • Loading branch information
@jcserv
jcserv committed Nov 10, 2024
1 parent a2c6395 commit 825af66
Show file tree
Hide file tree
Showing 2 changed files with 127 additions and 139 deletions.
236 changes: 113 additions & 123 deletions src/components/CartForm.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";

import { Button } from "@/components/ui/button";
import {
Form,
Expand All @@ -19,8 +18,6 @@ import {
SelectTrigger,
SelectValue,
} from "@/components/ui/select";

import currency from "@/assets/currency.json";
import { Checkbox } from "./ui/checkbox";
import { useLocalStorage } from "@/hooks/localStorage";
import {
Expand All @@ -30,9 +27,9 @@ import {
AllTreatments,
} from "@/types";
import { useNavigate } from "@tanstack/react-router";
import currency from "@/assets/currency.json";

const decklistRegex =
/^(\d+\s+.+?(?:\s+\([A-Z0-9]+\)\s+\d+)?(?:\s+\[[A-Z0-9]+\])?\s*\n?)+$/;
const decklistRegex = /^(\d+\s+.+?(?:\s+\([A-Z0-9]+\)\s+\d+)?(?:\s+\[[A-Z0-9]+\])?\s*\n?)+$/;

const formSchema = z.object({
decklist: z
Expand Down Expand Up @@ -91,126 +88,119 @@ export const CartForm: React.FC = () => {
}

return (
<>
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="text-start flex gap-8"
>
<div className="flex-grow w-100">
<FormField
control={form.control}
name="decklist"
render={({ field }) => (
<FormItem>
<div className="flex flex-row items-end">
<FormLabel className="text-base">Decklist</FormLabel>
<p
className={`text-sm ml-2 ${numCards > 100 ? "text-red-500" : "text-muted-foreground"}`}
>
({numCards}
/100 cards)
</p>
</div>
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="w-full max-w-4xl flex flex-col md:flex-row gap-4 md:gap-8 p-4"
>
<div className="flex-grow min-w-0">
<FormField
control={form.control}
name="decklist"
render={({ field }) => (
<FormItem>
<div className="flex flex-row items-end">
<FormLabel className="text-base">Decklist</FormLabel>
<p
className={`text-sm ml-2 ${
numCards > 100 ? "text-red-500" : "text-muted-foreground"
}`}
>
({numCards}/100 cards)
</p>
</div>
<FormControl>
<Textarea
placeholder="4 Lightning Bolt"
className="h-64 w-full resize-none"
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<div className="w-full md:w-64 space-y-6">
<FormField
control={form.control}
name="localCurrency"
render={({ field }) => (
<FormItem>
<FormLabel className="text-base">Currency</FormLabel>
<Select onValueChange={field.onChange} defaultValue={field.value}>
<FormControl>
<Textarea
placeholder="4 Lightning Bolt"
className="h-64 w-[50vw]"
{...field}
/>
<SelectTrigger>
<SelectValue placeholder="Select your local currency" />
</SelectTrigger>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<div className="w-64 space-y-6">
<FormField
control={form.control}
name="localCurrency"
render={({ field }) => (
<FormItem>
<FormLabel className="text-base">Currency</FormLabel>
<Select
onValueChange={field.onChange}
defaultValue={field.value}
>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Select your local currency" />
</SelectTrigger>
</FormControl>
<SelectContent>
{currency.map((currency) => (
<SelectItem
key={currency.value}
value={currency.value}
disabled={currency.disabled}
<SelectContent>
{currency.map((currency) => (
<SelectItem
key={currency.value}
value={currency.value}
disabled={currency.disabled}
>
{currency.emoji} {currency.label}
</SelectItem>
))}
</SelectContent>
</Select>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="treatments"
render={() => (
<FormItem>
<div>
<FormLabel className="text-base">Filters</FormLabel>
</div>
{AllTreatments.map((treatment) => (
<FormField
key={treatment}
control={form.control}
name="treatments"
render={({ field }) => {
return (
<FormItem
key={treatment}
className="flex flex-row items-start space-x-2"
>
{currency.emoji} {currency.label}
</SelectItem>
))}
</SelectContent>
</Select>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="treatments"
render={() => (
<FormItem>
<div>
<FormLabel className="text-base">Filters</FormLabel>
</div>
{AllTreatments.map((treatment) => (
<FormField
key={treatment}
control={form.control}
name="treatments"
render={({ field }) => {
return (
<FormItem
key={treatment}
className="flex flex-row items-start space-x-2"
>
<FormControl>
<Checkbox
checked={field.value?.includes(
treatment as Treatment
)}
onCheckedChange={(checked) => {
return checked
? field.onChange([
...field.value,
treatment,
])
: field.onChange(
field.value?.filter(
(value) => value !== treatment
)
);
}}
className="mt-2"
/>
</FormControl>
<FormLabel className="text-sm font-normal leading-none">
{treatment}
</FormLabel>
</FormItem>
);
}}
/>
))}
<FormMessage />
</FormItem>
)}
/>
<Button type="submit">Submit</Button>
</div>
</form>
</Form>
</>
<FormControl>
<Checkbox
checked={field.value?.includes(treatment as Treatment)}
onCheckedChange={(checked) => {
return checked
? field.onChange([...field.value, treatment])
: field.onChange(
field.value?.filter(
(value) => value !== treatment
)
);
}}
className="mt-2"
/>
</FormControl>
<FormLabel className="text-sm font-normal leading-none">
{treatment}
</FormLabel>
</FormItem>
);
}}
/>
))}
<FormMessage />
</FormItem>
)}
/>
<Button type="submit" className="w-full">Submit</Button>
</div>
</form>
</Form>
);
};

export default CartForm;
30 changes: 14 additions & 16 deletions src/routes/index.lazy.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,23 +9,21 @@ export const Route = createLazyFileRoute("/")({

function Index() {
return (
<section className="p-2 text-center">
<div className="h-[80vh] w-screen flex flex-col items-center">
<div className="flex flex-row">
<Alert className="text-start bg-blue-400 dark:bg-blue-600 my-8">
<Info className="h-4 w-4" />
<AlertTitle>Info</AlertTitle>
<AlertDescription>
Enter the cards you want to bling out, and we&apos;ll show you <br />
all of the most expensive printings available for each card, as well as <br />
the total cost.
</AlertDescription>
</Alert>
</div>
<div className="flex flex-row">
<CartForm />
</div>
<section className="p-2 md:p-4">
<div className="min-h-[80vh] w-full flex flex-col items-center">
<Alert className="w-full max-w-4xl bg-blue-400 dark:bg-blue-600 my-4 md:my-8">
<Info className="h-4 w-4" />
<AlertTitle>Info</AlertTitle>
<AlertDescription className="space-y-1">
<p>Enter the cards you want to bling out, and we&apos;ll show you</p>
<p>all of the most expensive printings available for each card, as well as</p>
<p>the total cost.</p>
</AlertDescription>
</Alert>
<CartForm />
</div>
</section>
);
}

export default Index;

0 comments on commit 825af66

Please sign in to comment.