From 2788491bdee003df2b7cc29deb46f591259ba366 Mon Sep 17 00:00:00 2001 From: Garamon Date: Sun, 22 Sep 2024 16:34:01 -0400 Subject: [PATCH 1/4] color theme, chakra, food request page --- apps/frontend/src/app.tsx | 7 + .../src/components/forms/foodRequestForm.tsx | 82 ++ apps/frontend/src/containers/foodRequest.tsx | 7 + apps/frontend/src/main.tsx | 5 +- apps/frontend/src/theme.ts | 11 + package.json | 4 + yarn.lock | 1279 ++++++++++++++++- 7 files changed, 1389 insertions(+), 6 deletions(-) create mode 100644 apps/frontend/src/components/forms/foodRequestForm.tsx create mode 100644 apps/frontend/src/containers/foodRequest.tsx create mode 100644 apps/frontend/src/theme.ts diff --git a/apps/frontend/src/app.tsx b/apps/frontend/src/app.tsx index a51df65b..3112c5b4 100644 --- a/apps/frontend/src/app.tsx +++ b/apps/frontend/src/app.tsx @@ -5,6 +5,8 @@ import apiClient from '@api/apiClient'; import Root from '@containers/root'; import NotFound from '@containers/404'; import Test from '@containers/test'; +import RequestFood from '@containers/foodRequest'; +import { submitFoodRequestForm } from '@components/forms/foodRequestForm'; const router = createBrowserRouter([ { @@ -16,6 +18,11 @@ const router = createBrowserRouter([ path: '/test', element: , }, + { + path: '/food-request', + element: , + action: submitFoodRequestForm, + }, ]); export const App: React.FC = () => { diff --git a/apps/frontend/src/components/forms/foodRequestForm.tsx b/apps/frontend/src/components/forms/foodRequestForm.tsx new file mode 100644 index 00000000..c5bbb2ce --- /dev/null +++ b/apps/frontend/src/components/forms/foodRequestForm.tsx @@ -0,0 +1,82 @@ +// Information Needed: +// restrictions (pre-populate from pantries table) +// due date +// donation contents +// donation type +// donation size +// running low on any foods? + +import { + Flex, + Box, + Heading, + FormControl, + FormLabel, + Input, + Button, + FormHelperText, + Checkbox, + Stack, + Textarea, +} from '@chakra-ui/react'; +import { + Form, + redirect, + ActionFunction, + ActionFunctionArgs, +} from 'react-router-dom'; + +const FoodRequestForm: React.FC = () => { + return ( + +
+ + Requested Delivery Date + + + We'll reach out to confirm a delivery date and time. + + + + Dietary Restrictions + + Milk + Eggs + Fish + Shellfish + Tree Nuts + Peanuts + Wheat + Soybeans + Sesame + Other + + + + Requested Items + + + Notes +