Merge branch 'main' into feature/userAccount

Signed-off-by: Jy <[email protected]>
caffeine-addictt · Jul 17, 2024 · bf5794e · bf5794e
2 parents 5cca0f5 + 352853e
commit bf5794e
Show file tree

Hide file tree

Showing 62 changed files with 3,732 additions and 599 deletions.
diff --git a/.github/workflows/linter.yml b/.github/workflows/linter.yml
@@ -18,7 +18,7 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Setup node
-        uses: actions/[email protected].2
+        uses: actions/[email protected].3
         with:
           cache: npm
 

diff --git a/.github/workflows/test-worker.yml b/.github/workflows/test-worker.yml
@@ -22,7 +22,7 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Setup node
-        uses: actions/[email protected].2
+        uses: actions/[email protected].3
         with:
           cache: npm
 
@@ -46,7 +46,7 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Setup node
-        uses: actions/[email protected].2
+        uses: actions/[email protected].3
         with:
           cache: npm
 

diff --git a/client/components.json b/client/components.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": false,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@components",
+    "utils": "@utils/tailwind"
+  }
+}
diff --git a/client/index.html b/client/index.html
@@ -8,7 +8,7 @@
     <!-- Render default title before page renders -->
     <title>GreenBitesSG</title>
   </head>
-  <body>
+  <body style="background-color: #131313">
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

diff --git a/client/package.json b/client/package.json
@@ -17,18 +17,24 @@
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.1.0",
+    "@radix-ui/react-toast": "^1.2.1",
+    "@simplewebauthn/browser": "^10.0.0",
     "@simplewebauthn/server": "^10.0.0",
     "@tanstack/react-query": "^5.50.1",
     "axios": "^1.7.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "embla-carousel-autoplay": "^8.1.6",
+    "embla-carousel-react": "^8.1.6",
     "js-cookie": "^3.0.5",
+    "lucide-react": "^0.408.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-helmet": "^6.1.0",
     "react-hook-form": "^7.52.0",
-    "react-router-dom": "^6.24.0",
+    "react-router-dom": "^6.24.1",
     "tailwind-merge": "^2.4.0",
+    "tailwindcss-animate": "^1.0.7",
     "zod": "^3.23.8"
   },
   "devDependencies": {
@@ -37,16 +43,16 @@
     "@types/react-dom": "^18.3.0",
     "@types/react-helmet": "^6.1.11",
     "@typescript-eslint/eslint-plugin": "^7.14.1",
-    "@typescript-eslint/parser": "^7.15.0",
+    "@typescript-eslint/parser": "^7.16.0",
     "@vitejs/plugin-react-swc": "^3.7.0",
     "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.7",
+    "eslint-plugin-react-refresh": "^0.4.8",
     "eslint-plugin-tailwindcss": "^3.17.4",
     "postcss": "^8.4.38",
     "tailwindcss": "^3.4.4",
-    "typescript": "^5.4.5",
+    "typescript": "^5.5.3",
     "vite": "^5.3.1",
     "vite-tsconfig-paths": "^4.3.2",
     "vitest": "^1.6.0"

diff --git a/client/public/cooking-class-1414x2000.png b/client/public/cooking-class-1414x2000.png
diff --git a/client/public/cooking-class-354x500.png b/client/public/cooking-class-354x500.png
diff --git a/client/public/cooking-class-707x1000.png b/client/public/cooking-class-707x1000.png
diff --git a/client/public/food-drive-1414x2000.png b/client/public/food-drive-1414x2000.png
diff --git a/client/public/food-drive-354x500.png b/client/public/food-drive-354x500.png
diff --git a/client/public/food-drive-707x1000.png b/client/public/food-drive-707x1000.png
diff --git a/client/public/menu-item-1414x2000.png b/client/public/menu-item-1414x2000.png
diff --git a/client/public/menu-item-354x500.png b/client/public/menu-item-354x500.png
diff --git a/client/public/menu-item-707x1000.png b/client/public/menu-item-707x1000.png
diff --git a/client/src/components/footer.tsx b/client/src/components/footer.tsx
@@ -5,10 +5,61 @@
  */
 
 import * as React from 'react';
-import { Location } from 'react-router-dom';
 
-export type FooterProps = { location: Location; isAdmin: boolean };
-const Footer = (props: FooterProps): React.ReactNode => {
-  return <footer>Footer at {props.location.pathname}</footer>;
+const Footer = (): React.ReactNode => {
+  return (
+    <footer className="bg-accent-dark text-text-dark">
+      <div className="mx-auto max-h-full p-4 py-6 md:max-h-48 lg:max-h-64 lg:py-8">
+        <div className="md:flex md:justify-between">
+          <div className="mb-3 text-center md:mb-0 md:text-left">
+            <a href="/" className="flex items-center">
+              <span className="mx-auto self-center whitespace-nowrap text-lg font-semibold md:mx-0 md:text-lg lg:text-2xl xl:text-3xl">
+                Green Bites SG
+              </span>
+            </a>
+            <p className="self-center text-sm md:text-base xl:text-lg">
+              A passion project by a group of students from Nanyang Polytechnic,
+              Singapore.
+            </p>
+          </div>
+          <div className="mt-3 grid grid-cols-1 gap-5 md:mr-10 md:mt-8 md:grid-cols-2 md:gap-6 xl:gap-12">
+            <div className="mx-auto text-center md:mx-0 md:text-right">
+              <h2 className="mb-2 font-normal uppercase md:text-base xl:mb-3 xl:text-lg">
+                Legal
+              </h2>
+              <ul className="text-xs font-normal underline md:text-sm xl:text-base">
+                <li className="mb-1">
+                  <a href="/privacy">Privacy Policy</a>
+                </li>
+                <li>
+                  <a href="/tos">Terms &amp; Conditions</a>
+                </li>
+              </ul>
+            </div>
+            <div className="mx-auto text-center md:mx-0 md:text-right">
+              <h2 className="mb-2 font-normal uppercase md:text-base xl:mb-3 xl:text-lg">
+                Contact Us
+              </h2>
+              <ul className="text-xs font-normal underline md:text-sm xl:text-base">
+                <li className="mb-1">
+                  <a href="mailto:contact@[email protected]">Email</a>
+                </li>
+                <li>
+                  <a href="https://github.com/caffeine-addictt/greenbitessg">
+                    Github
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <div>
+          <p className="text-center text-xs md:text-left xl:text-sm">
+            © Copyright 2024 GreenBitesSG. All Rights Reserved.
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
 };
 export default Footer;
diff --git a/client/src/components/hooks.tsx b/client/src/components/hooks.tsx
@@ -0,0 +1,24 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Ng Jun Xiang <[email protected]>
+ *
+ * SPDX-License-Identifier: GPL-3.0-only
+ */
+
+import { useEffect, useState } from 'react';
+
+export const useMediaQuery = (query: string): boolean => {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    const matchQuery = matchMedia(query);
+    const handleChange = (e: unknown) =>
+      setMatches((e as typeof matchQuery).matches);
+
+    setMatches(matchQuery.matches);
+
+    matchQuery.addEventListener('change', handleChange);
+    return () => matchQuery.removeEventListener('change', handleChange);
+  }, [query]);
+
+  return matches;
+};
diff --git a/client/src/components/ui/button.tsx b/client/src/components/ui/button.tsx
@@ -61,5 +61,93 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 );
 Button.displayName = 'Button';
 
+export interface ExternalLinkProps
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement>,
+    VariantProps<typeof buttonVariants> {
+  disabled?: boolean;
+  href: `http://${string}` | `https://${string}`;
+}
+
+const ExternalLink = React.forwardRef<HTMLAnchorElement, ExternalLinkProps>(
+  ({ className, variant, size, disabled = false, children, ...props }, ref) => {
+    if (disabled) {
+      return (
+        <Button
+          className={cn(buttonVariants({ variant, size, className }))}
+          disabled={true}
+        >
+          {children}
+        </Button>
+      );
+    }
+
+    return (
+      <a
+        ref={ref}
+        {...props}
+        target="_blank"
+        rel="noopener noreferrer"
+        referrerPolicy="no-referrer-when-downgrade"
+        className={cn(buttonVariants({ variant, size, className }))}
+      >
+        {children}
+      </a>
+    );
+  },
+);
+ExternalLink.displayName = 'ExternalLink';
+
+export interface InternalLinkProps extends Omit<ExternalLinkProps, 'href'> {
+  href: `/${string}`;
+  preserveCallback?: boolean;
+}
+const InternalLink = React.forwardRef<HTMLAnchorElement, InternalLinkProps>(
+  (
+    {
+      className,
+      variant,
+      size,
+      href,
+      disabled = false,
+      preserveCallback = false,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const targetURI = new URL(href, location.origin);
+    const callback = new URLSearchParams(window.location.search).get(
+      'callbackURI',
+    );
+
+    if (preserveCallback && callback) {
+      targetURI.searchParams.set('callbackURI', callback);
+    }
+
+    if (disabled) {
+      return (
+        <Button
+          className={cn(buttonVariants({ variant, size, className }))}
+          disabled={true}
+        >
+          {children}
+        </Button>
+      );
+    }
+
+    return (
+      <a
+        ref={ref}
+        {...props}
+        href={targetURI.toString()}
+        className={cn(buttonVariants({ variant, size, className }))}
+      >
+        {children}
+      </a>
+    );
+  },
+);
+InternalLink.displayName = 'InternalLink';
+
 // eslint-disable-next-line
-export { Button, buttonVariants };
+export { Button, ExternalLink, InternalLink, buttonVariants };