From faab0b0fd542e35fa4222cb18e010dbb4d1cdd3f Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Fri, 4 Oct 2024 20:10:51 +0700
Subject: [PATCH] Update component and pages to responsive

---
 src/app/invest/page.tsx          | 12 ++---
 src/app/overview/page.tsx        |  2 +-
 src/components/paymentMethod.tsx | 79 ++++++++++++++++++++++++--------
 3 files changed, 67 insertions(+), 26 deletions(-)

diff --git a/src/app/invest/page.tsx b/src/app/invest/page.tsx
index 80850fd..97ca4b3 100644
--- a/src/app/invest/page.tsx
+++ b/src/app/invest/page.tsx
@@ -75,24 +75,24 @@ export default function Invest() {
   };
 
   return (
-    <div className="mx-40 my-10">
-      <h1 className="text-4xl font-bold">Invest on NVIDIA</h1>
+    <div className="mx-10 md:mx-40 my-10">
+      <h1 className="text-2xl md:text-4xl font-bold">Invest on NVIDIA</h1>
       <Separator className="my-4" />
 
       <div>
         <div className="w-1/2 space-y-2">
-          <h2 className="text-2xl">Investment Amount</h2>
+          <h2 className="text:base md:text-2xl">Investment Amount</h2>
           <Input type="number" placeholder="min $500" />
         </div>
         <Separator className="my-4" />
 
-        <div className="w-1/2 space-y-2">
-          <h2 className="text-2xl">Payment Information</h2>
+        <div className="w-full space-y-2">
+          <h2 className="text:base md:text-2xl">Payment Information</h2>
           <CardsPaymentMethod />
         </div>
         <Separator className="my-4" />
 
-        <div className="w-2/3 space-y-2">
+        <div className=" md:w-2/3 space-y-2">
           <h2 className="text-2xl">Terms and Services</h2>
           <Table>
             <TableHeader>
diff --git a/src/app/overview/page.tsx b/src/app/overview/page.tsx
index f34d3cc..cd07319 100644
--- a/src/app/overview/page.tsx
+++ b/src/app/overview/page.tsx
@@ -148,7 +148,7 @@ export default function Invest() {
               </h1>
               <p className="ml-5"> Left to invest</p>
               <Button className="mt-5 md:mt-10 ml-0 md:ml-[25%] scale-75 md:scale-100">
-                <Link href="/invest/1">Invest in NVIDIA</Link>
+                <Link href="/invest">Invest in NVIDIA</Link>
               </Button>
             </div>
           </div>
diff --git a/src/components/paymentMethod.tsx b/src/components/paymentMethod.tsx
index 36eccc6..634b5b6 100644
--- a/src/components/paymentMethod.tsx
+++ b/src/components/paymentMethod.tsx
@@ -2,26 +2,47 @@
 
 import { Icons } from "./ui/icons";
 import { Button } from "./ui/button";
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "./ui/card";
 import { Input } from "./ui/input";
 import { Label } from "./ui/label";
 import { RadioGroup, RadioGroupItem } from "./ui/radio-group";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./ui/select";
 
 export function CardsPaymentMethod() {
   return (
-    <Card>
+    <Card className="w-full">
       <CardHeader>
-        <CardTitle>Payment Method</CardTitle>
-        <CardDescription>Add a new payment method to your account.</CardDescription>
+        <CardTitle className="text-xl md:text-2xl">Payment Method</CardTitle>
+        <CardDescription className="font-normal md:font-semibold">
+          Add a new payment method to your account.
+        </CardDescription>
       </CardHeader>
       <CardContent className="grid gap-6">
-        <RadioGroup defaultValue="card" className="grid grid-cols-3 gap-4">
-          <div>
-            <RadioGroupItem value="card" id="card" className="peer sr-only" aria-label="Card" />
+        <RadioGroup defaultValue="card" className="flex w-full justify-center gap-1 md:gap-3">
+          <div className="w-[100px] md:w-[150px]">
+            <RadioGroupItem
+              value="card"
+              id="card"
+              className="peer sr-only"
+              aria-label="Card"
+            />
             <Label
               htmlFor="card"
-              className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-transparent p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary">
+              className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-transparent p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
+            >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
@@ -30,7 +51,8 @@ export function CardsPaymentMethod() {
                 strokeLinecap="round"
                 strokeLinejoin="round"
                 strokeWidth="2"
-                className="mb-3 h-6 w-6">
+                className="mb-3 h-6 w-6"
+              >
                 <rect width="20" height="14" x="2" y="5" rx="2" />
                 <path d="M2 10h20" />
               </svg>
@@ -38,29 +60,48 @@ export function CardsPaymentMethod() {
             </Label>
           </div>
 
-          <div>
-            <RadioGroupItem value="paypal" id="paypal" className="peer sr-only" aria-label="Paypal" />
+          <div className="w-[100px] md:w-[150px]">
+            <RadioGroupItem
+              value="paypal"
+              id="paypal"
+              className="peer sr-only"
+              aria-label="Paypal"
+            />
             <Label
               htmlFor="paypal"
-              className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-transparent p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary">
+              className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-transparent p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
+            >
               <Icons.paypal className="mb-3 h-6 w-6" />
               Paypal
             </Label>
           </div>
 
-          <div>
-            <RadioGroupItem value="apple" id="apple" className="peer sr-only" aria-label="Apple" />
+          <div className="w-[100px] md:w-[150px]">
+            <RadioGroupItem
+              value="apple"
+              id="apple"
+              className="peer sr-only"
+              aria-label="Apple"
+            />
             <Label
               htmlFor="apple"
-              className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-transparent p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary">
+              className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-transparent p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
+            >
               <Icons.apple className="mb-3 h-6 w-6" />
               Apple
             </Label>
           </div>
         </RadioGroup>
-        <div className="grid gap-2">
-          <Label htmlFor="name">Name</Label>
-          <Input id="name" placeholder="First Last" />
+
+        <div className="grid grid-cols-2">
+          <div className="grid gap-2">
+            <Label htmlFor="firstname">First Name</Label>
+            <Input id="firstname" placeholder="Your firstname..." />
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor="lastname">Last Name</Label>
+            <Input id="lastname" placeholder="Your lastname..." />
+          </div>
         </div>
         <div className="grid gap-2">
           <Label htmlFor="city">City</Label>