Skip to content

Commit

Permalink
mainfucntiondone
Browse files Browse the repository at this point in the history
  • Loading branch information
@nicotinelnwza007
nicotinelnwza007 committed Jul 21, 2024
1 parent fa82cbb commit 2f4f73c
Showing 1 changed file with 143 additions and 143 deletions.
286 changes: 143 additions & 143 deletions src/app/hero/page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,23 +136,23 @@ const App = () => {
</li>
<li className="nav-item">
<a href="/calculate" className="text-white text-lg">
Calculate
คำนวณ
</a>
</li>
<li className="nav-item">
<a href="/about" className="text-white text-lg">
About us
เกี่ยวกับ
</a>
</li>
<li className="nav-item">
<a href="/policy" className="text-white text-lg">
Policy
นโยบาย
</a>
</li>
</ul>
<div className="text-white text-lg">Login</div>
</nav>
<div className="bg-[#575757] text-white">
<div className="bg-[#696969] text-white">
<div className="flex gap-[8px] p-12 justify-center items-center">
<Image src={creditcard} width={400} height={400} alt="Credit Card" />
<Image src={creditcard2} width={400} height={400} alt="Credit Card" />
Expand All @@ -161,150 +161,150 @@ const App = () => {
{" "}
</div>

<div className="bg-[#575757] p-6 rounded-lg shadow-lg w-4/5 mx-auto mt-10 text-white">
<Typography
variant="h5"
gutterBottom
className="mt-10 mb-4 text-3xl font-bold"
>
Your info
</Typography>
<Box component="form" noValidate autoComplete="off">
<div className="text-[24px] text-white">Salary</div>
<TextField
type="number"
value={salary}
onChange={(e) => setSalary(Number(e.target.value))}
fullWidth
margin="normal"
className="bg-white rounded-lg"
/>
<div className="text-[24px] text-white">
Max Debt for credit card
</div>
<TextField
type="number"
value={percentage}
onChange={(e) => setPercentage(Number(e.target.value))}
fullWidth
margin="normal"
className="bg-white rounded-lg"
/>
<Button
variant="contained"
color="primary"
onClick={handleRecommendation}
className="mt-6"
>
Get Our Suggestion
</Button>
</Box>
</div>

<div className="flex gap-4 mt-10">
<div className="bg-[#575757] p-6 rounded-lg shadow-lg w-full md:w-1/2 text-white">
<Typography variant="h5" gutterBottom className="text-xl font-bold">
Expenses
</Typography>
<Box component="form" noValidate autoComplete="off">
<TextField
label="Expense Description"
type="text"
value={expenseDescription}
onChange={(e) => setExpenseDescription(e.target.value)}
fullWidth
margin="normal"
className="bg-white rounded-lg"
/>
<div className="text-[24px] text-white">Outcome</div>
<TextField
type="number"
value={expenseAmount}
onChange={(e) => setExpenseAmount(Number(e.target.value))}
fullWidth
margin="normal"
className="bg-white rounded-lg"
/>
<Button
variant="contained"
color="primary"
onClick={handleAddExpense}
className="mt-6"
>
Add Expense
</Button>
</Box>
<List className="mt-6">
{expenses.map((expense, index) => (
<ListItem
key={index}
className="flex justify-between bg-gray-800 rounded-lg p-4 mb-2"
>
<ListItemText primary={`${expense.description}: ${expense.amount}`} />
<Button
variant="outlined"
color="secondary"
onClick={() => handleRemoveExpense(index)}
>
Remove
</Button>
</ListItem>
))}
</List>
</div>
<div className="flex gap-4 mt-10 p-8">
<div className="bg-[#575757] p-6 rounded-lg shadow-lg w-full md:w-1/2 text-white">
<Typography
variant="h5"
gutterBottom
className="mt-10 mb-4 text-3xl font-bold"
></Typography>
<Box component="form" noValidate autoComplete="off">
<div className="text-[24px] text-white">เงินเดือน</div>
<TextField
type="number"
value={salary}
onChange={(e) => setSalary(Number(e.target.value))}
fullWidth
margin="normal"
className="bg-white rounded-lg"
/>
<div className="text-[24px] text-white">
เปอเซ็นต์หนี้บัตรเครดิต
</div>
<TextField
type="number"
value={percentage}
onChange={(e) => setPercentage(Number(e.target.value))}
fullWidth
margin="normal"
className="bg-white rounded-lg"
/>
<Button
variant="contained"
color="primary"
onClick={handleRecommendation}
className="mt-6"
>
รับคำแนะนำจากเรา
</Button>
</Box>
</div>
<div className="bg-[#575757] p-6 rounded-lg shadow-lg w-full md:w-1/2 text-white">
<Typography variant="h5" gutterBottom className="text-xl font-bold">
ค่าใช้จ่าย
</Typography>
<Box component="form" noValidate autoComplete="off">
<TextField
label="Expense Description"
type="text"
value={expenseDescription}
onChange={(e) => setExpenseDescription(e.target.value)}
fullWidth
margin="normal"
className="bg-white rounded-lg"
/>
<div className="text-[24px] text-white">Outcome</div>
<TextField
type="number"
value={expenseAmount}
onChange={(e) => setExpenseAmount(Number(e.target.value))}
fullWidth
margin="normal"
className="bg-white rounded-lg"
/>
<Button
variant="contained"
color="primary"
onClick={handleAddExpense}
className="mt-6"
>
เพิ่มรายละเอียดของค่าใช้จ่าย
</Button>
</Box>
<List className="mt-6">
{expenses.map((expense, index) => (
<ListItem
key={index}
className="flex justify-between bg-gray-800 rounded-lg p-4 mb-2"
>
<ListItemText
primary={`${expense.description}: ${expense.amount}`}
/>
<Button
variant="outlined"
color="secondary"
onClick={() => handleRemoveExpense(index)}
>
ลบทิ้ง
</Button>
</ListItem>
))}
</List>
</div>
</div>

<div className="bg-[#575757] p-6 rounded-lg shadow-lg w-full md:w-1/2 text-white">
<Typography variant="h5" gutterBottom className="text-xl font-bold">
Available Money
</Typography>
<Typography className="mb-6">{availableMoney}</Typography>
<div className="flex gap-4 mt-10 p-8">
<div className="bg-[#575757] p-6 rounded-lg shadow-lg w-full md:w-1/2 text-white">
<Typography variant="h5" gutterBottom className="text-xl font-bold">
ยอดเงินที่สามารถใช้ได้
</Typography>
<Typography className="mb-6">{availableMoney}</Typography>

<Typography variant="h5" gutterBottom className="text-xl font-bold">
Max Debt ({percentage}% of Salary)
</Typography>
<Typography className="mb-6">{maxDebt}</Typography>
<Typography variant="h5" gutterBottom className="text-xl font-bold">
สามารถใช้เงินกับหนี้บัตรเครดิตได้ ({percentage}% of Salary)
</Typography>
<Typography className="mb-6">{maxDebt}</Typography>

<Typography variant="h5" gutterBottom className="text-xl font-bold">
Purchase Recommendation
</Typography>
<Typography className="mb-6">{recommendation}</Typography>
</div>
</div>
<Typography variant="h5" gutterBottom className="text-xl font-bold">
ควรใช้บัตรไหนรูดก่อนดี
</Typography>
<Typography className="mb-6">{recommendation}</Typography>
</div>

<div className="bg-[#575757] p-6 rounded-lg shadow-lg w-4/5 mx-auto mt-10 text-white">
<Typography variant="h5" gutterBottom className="mt-10 mb-4 text-xl">
Card Recommendation by Date
</Typography>
<Box component="form" noValidate autoComplete="off">
<TextField
label="Purchase Date"
type="text"
value={purchaseDate}
onChange={(e) => setPurchaseDate(e.target.value)}
fullWidth
margin="normal"
className="bg-white rounded-lg"
/>
<Button
variant="contained"
color="primary"
onClick={() => {
const dayOfPurchase = new Date(purchaseDate).getDate();
if (dayOfPurchase <= 15) {
setRecommendation("You should use Card 1 for this purchase.");
} else {
setRecommendation("You should use Card 2 for this purchase.");
}
}}
className="mt-6"
>
Calculate Best Card
</Button>
</Box>
</div>
</div>
<div className="bg-[#575757] p-6 rounded-lg shadow-lg w-full md:w-1/2 text-white">
<Typography variant="h5" gutterBottom className="mt-10 mb-4 text-xl">
วันที่รูดบัตรนั้น
</Typography>
<Box component="form" noValidate autoComplete="off">
<TextField
label="Purchase Date"
type="text"
value={purchaseDate}
onChange={(e) => setPurchaseDate(e.target.value)}
fullWidth
margin="normal"
className="bg-white rounded-lg"
/>
<Button
variant="contained"
color="primary"
onClick={() => {
const dayOfPurchase = new Date(purchaseDate).getDate();
if (dayOfPurchase <= 15) {
setRecommendation("You should use Card 1 for this purchase.");
} else {
setRecommendation("You should use Card 2 for this purchase.");
}
}}
className="mt-6"
>
หาบัตรที่ดีที่สุด
</Button>
</Box>
</div>
</div>
</div>

</div>
);
};

Expand Down

0 comments on commit 2f4f73c

Please sign in to comment.