sosokker/B2D-Ventures
1
0
Fork 0
mirror of https://github.com/Sosokker/B2D-Ventures.git synced 2025-12-20 14:34:05 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Refactor component and page structure for responsiveness

Browse Source
This commit is contained in:
THIS ONE IS A LITTLE BIT TRICKY KRUB 2024-10-04 20:18:23 +07:00
parent faab0b0fd5
commit 7705519081
2 changed files with 28 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/app/invest/page.tsx
View File

@ -3,7 +3,14 @@
import { Separator } from "@/components/ui/separator"; import { Separator } from "@/components/ui/separator";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { CardsPaymentMethod } from "@/components/paymentMethod"; import { CardsPaymentMethod } from "@/components/paymentMethod";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"; import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { useState } from "react"; import { useState } from "react";
import { import {
@ -47,7 +54,9 @@ const term_data = [
]; ];
export default function Invest() { export default function Invest() {
const [checkedTerms, setCheckedTerms] = useState(Array(term_data.length).fill(false)); const [checkedTerms, setCheckedTerms] = useState(
Array(term_data.length).fill(false)
);
const [error, setError] = useState(""); const [error, setError] = useState("");
const router = useRouter(); // Initialize the router const router = useRouter(); // Initialize the router
@ -59,7 +68,9 @@ export default function Invest() {
const handleTermServiceClick = () => { const handleTermServiceClick = () => {
if (checkedTerms.some((checked) => !checked)) { if (checkedTerms.some((checked) => !checked)) {
setError("Please accept all terms before proceeding with the investment."); setError(
"Please accept all terms before proceeding with the investment."
);
} else { } else {
setError(""); setError("");
handleInvestmentSuccess(); handleInvestmentSuccess();
@ -88,7 +99,7 @@ export default function Invest() {
<div className="w-full space-y-2"> <div className="w-full space-y-2">
<h2 className="text:base md:text-2xl">Payment Information</h2> <h2 className="text:base md:text-2xl">Payment Information</h2>
<CardsPaymentMethod /> <CardsPaymentMethod />
</div> </div>
<Separator className="my-4" /> <Separator className="my-4" />
@ -106,7 +117,11 @@ export default function Invest() {
{term_data.map((item, index) => ( {term_data.map((item, index) => (
<TableRow key={index}> <TableRow key={index}>
<TableCell> <TableCell>
<input type="checkbox" checked={checkedTerms[index]} onChange={() => handleCheckboxChange(index)} /> <input
type="checkbox"
checked={checkedTerms[index]}
onChange={() => handleCheckboxChange(index)}
/>
</TableCell> </TableCell>
<TableCell>{item.term}</TableCell> <TableCell>{item.term}</TableCell>
<TableCell>{item.description}</TableCell> <TableCell>{item.description}</TableCell>
@ -123,7 +138,9 @@ export default function Invest() {
<DialogContent> <DialogContent>
<DialogHeader> <DialogHeader>
<DialogTitle>Are you absolutely sure?</DialogTitle> <DialogTitle>Are you absolutely sure?</DialogTitle>
<DialogDescription>This action cannot be undone. This will permanently!</DialogDescription> <DialogDescription>
This action cannot be undone. This will permanently!
</DialogDescription>
</DialogHeader> </DialogHeader>
<DialogFooter className="sm:justify-start"> <DialogFooter className="sm:justify-start">
<Button type="submit" onClick={handleTermServiceClick}> <Button type="submit" onClick={handleTermServiceClick}>
@ -135,10 +152,12 @@ export default function Invest() {
</Button> </Button>
</DialogClose> </DialogClose>
</DialogFooter> </DialogFooter>
{error && <p className="text-red-500 mt-2 text-lg font-bold">{error}</p>} {error && (
<p className="text-red-500 mt-2 text-lg font-bold">{error}</p>
)}
</DialogContent> </DialogContent>
</Dialog> </Dialog>
</div> </div>
</div> </div>
); );
} }

2
src/components/paymentMethod.tsx
View File

@ -23,7 +23,7 @@ import {
export function CardsPaymentMethod() { export function CardsPaymentMethod() {
return ( return (
<Card className="w-full"> <Card className="lg:w-2/3 ">
<CardHeader> <CardHeader>
<CardTitle className="text-xl md:text-2xl">Payment Method</CardTitle> <CardTitle className="text-xl md:text-2xl">Payment Method</CardTitle>
<CardDescription className="font-normal md:font-semibold"> <CardDescription className="font-normal md:font-semibold">