Merge pull request #29 from khanghy2130/minor-changes

init local supabase
khanghy2130 · Oct 11, 2024 · 3515769 · 3515769
2 parents 9fa476b + ccb88cf
commit 3515769
Show file tree

Hide file tree

Showing 15 changed files with 1,393 additions and 13,522 deletions.
diff --git a/README.md b/README.md
@@ -21,7 +21,7 @@ yarn test
 Replace `abcd12345` with project ID.
 
 ```sh
-npx supabase gen types typescript --project-id abcd12345 > database.types.ts
+yarn supabase gen types typescript --project-id abcd12345 > database.types.ts
 ```
 
 ## Environment variables

diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
@@ -1,12 +1,20 @@
+import { Link } from "@remix-run/react";
+
 export default function Footer() {
     return (
         <div className="z-10 flex w-full flex-grow items-end pt-10">
-            <div className="text-md flex w-full flex-col items-center bg-black px-2 py-3 text-center text-gray-200 sm:px-20 sm:text-lg">
+            <div className="flex w-full flex-col items-stretch bg-black px-4 py-3 text-center text-sm text-gray-200 sm:px-20 sm:text-lg">
                 <h2>&copy; {new Date().getFullYear()} TOYSHOP</h2>
-                <h2>
+                <h2 className="px-2">
                     <span className="font-bold">Disclaimer:</span> This is a
                     demo website project, not a real online store!
                 </h2>
+                <Link
+                    to="/policy"
+                    className="font-medium underline hover:text-primaryColor"
+                >
+                    See policy
+                </Link>
             </div>
         </div>
     );

diff --git a/app/components/SidePanel.tsx b/app/components/SidePanel.tsx
@@ -82,7 +82,6 @@ export default function SidePanel({
         ["Profile", "/profile", profileIcon],
         ["Wishlist", "/profile?wishlist=true", heartIcon],
         ["Orders", "/profile?orders=true", orderIcon],
-        ["Policy", "/policy", policyIcon],
     ];
 
     return (
@@ -294,20 +293,3 @@ const orderIcon = (
         />
     </svg>
 );
-
-const policyIcon = (
-    <svg
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-        strokeWidth={1.5}
-        stroke="currentColor"
-        className="size-8"
-    >
-        <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z"
-        />
-    </svg>
-);
diff --git a/app/routes/_index/Headlines.tsx b/app/routes/_index/Headlines.tsx
@@ -29,7 +29,7 @@ export default function Headlines({ highlight }: Props) {
     return (
         <div ref={containerRef} className="flex h-[1000px] flex-col">
             {/* Headline image */}
-            <div className="sticky top-0 -z-10 flex justify-center">
+            <div className="sticky top-0 -z-10 flex justify-center pt-10 sm:pt-4">
                 <div className="relative flex justify-start">
                     <img
                         className="w-screen max-w-[800px]"

diff --git a/app/routes/_index/ThreeCanvas.tsx b/app/routes/_index/ThreeCanvas.tsx
@@ -154,33 +154,12 @@ export default function ThreeCanvas() {
         setMounted(true);
     }, []);
 
-    const [dimensions, setDimensions] = useState({
-        width: 0,
-        height: 0,
-    });
-    useEffect(() => {
-        const handleResize = () => {
-            setDimensions({
-                width: window.innerWidth,
-                height: window.innerHeight,
-            });
-        };
-        handleResize(); // set initial size
-
-        window.addEventListener("resize", handleResize);
-        return () => {
-            window.removeEventListener("resize", handleResize);
-        };
-    }, []);
-
     if (!mounted) return null;
     return (
         <Canvas
             className="pointer-events-none inset-0 z-10"
             style={{
                 position: "fixed",
-                width: dimensions.width,
-                height: dimensions.height,
             }}
             camera={{ fov: 40, position: [0, 0, -5] }}
         >

diff --git a/app/routes/_index/index.tsx b/app/routes/_index/index.tsx
@@ -81,7 +81,7 @@ export default function LandingPage() {
                 }}
                 className="relative z-30 -mt-24 flex h-[90vh] w-full flex-col items-center justify-center overflow-hidden"
             >
-                <h1 className="custom-text-shadow mx-2 mb-24 text-center text-2xl text-white sm:mx-5 sm:text-4xl">
+                <h1 className="custom-text-shadow mx-2 mb-24 max-w-[700px] text-center text-3xl font-bold text-white sm:mx-5 sm:text-5xl">
                     Discover your next favorite toys here at TOYSHOP.
                 </h1>
                 <Link to="/store" className="relative">

diff --git a/app/routes/login/SignupForm.tsx b/app/routes/login/SignupForm.tsx
@@ -50,14 +50,6 @@ export default function SignupForm({
                     <h1 className="pb-4 text-center text-2xl">Register</h1>
 
                     <input name="form_type" type="hidden" value="REGISTER" />
-                    {/* <label htmlFor="reg_display_name_input">Display name</label>
-                    <input
-                        name="reg_display_name_input"
-                        id="reg_display_name_input"
-                        type="text"
-                        required
-                        className="text-input"
-                    /> */}
                     <label htmlFor="reg_email_input">Email</label>
                     <input
                         name="reg_email_input"

diff --git a/app/routes/policy.tsx b/app/routes/policy.tsx
@@ -6,21 +6,24 @@ export const meta: MetaFunction = () => {
 
 export default function PolicyPage() {
     return (
-        <div className="mt-10 max-w-[600px] text-xl">
+        <div className="mb-4 mt-10 max-w-[600px] px-4 text-base sm:text-lg">
             <h1 className="mb-6 text-center text-3xl">Policy</h1>
             <p className="mb-4">
                 This website is a portfolio project created to showcase a
                 fictional online store. Please note that the store is not
                 operational, and no real transactions occur here.
             </p>
             <p className="mb-4">
-                If you link your Google account, only name and email will be
-                collected to create your profile for demo purposes. You may
-                request to have your data deleted at any time.
+                If you link account from a 3rd party provider like Google, only
+                name and email will be collected to create a profile for demo
+                purposes. You may request to have your data deleted at any time.
             </p>
             <p>
                 Contact{" "}
-                <a href="mailto:[email protected]" className="underline">
+                <a
+                    href="mailto:[email protected]"
+                    className="underline hover:text-primaryColor"
+                >
                     [email protected]
                 </a>
             </p>

diff --git a/database.types.ts b/database.types.ts
@@ -1,3 +1,5 @@
+yarn run v1.22.22
+$ "C:\Users\khang\OneDrive\Máy tính\MAIN\remix-app-01\node_modules\.bin\supabase" gen types typescript --project-id ulaqqblqcmrlbvnsehxg
 export type Json =
   | string
   | number
@@ -489,3 +491,4 @@ export type Enums<
   : PublicEnumNameOrOptions extends keyof PublicSchema["Enums"]
     ? PublicSchema["Enums"][PublicEnumNameOrOptions]
     : never
+Done in 1.10s.