Skip to content

Commit

Permalink
Decorate
Browse files Browse the repository at this point in the history
  • Loading branch information
@nicotinelnwza007
nicotinelnwza007 committed Jul 21, 2024
1 parent bae4f08 commit 1e33198
Show file tree
Hide file tree
Showing 6 changed files with 1,304 additions and 123 deletions.
85 changes: 73 additions & 12 deletions components/firstpage.js
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,86 @@
import Image from "next/image";
import Link from "next/link";

import React from 'react';
import React from "react";

export default function FirstPage() {
return (
<div>
<nav className="bg-white shadow-md">
<ul className="flex justify-around py-4">
<li className="nav-item"><a href="/" className="nav-link">Home</a></li>
<li className="nav-item"><a href="/about" className="nav-link">About</a></li>
<li className="nav-item"><a href="/services" className="nav-link">Services</a></li>
<li className="nav-item"><a href="/contact" className="nav-link">Contact</a></li>
<nav className="bg-white shadow-md p-8 flex justify-between">
<div>Credit Buddy</div>
<ul className="flex justify-around gap-[24px]">
<li className="nav-item">
<a href="/" className="nav-link">
Home
</a>
</li>
<li className="nav-item">
<a href="/about" className="nav-link">
Caculate
</a>
</li>
<li className="nav-item">
<a href="/services" className="nav-link">
About us
</a>
</li>
<li className="nav-item">
<a href="/contact" className="nav-link">
Policy
</a>
</li>
</ul>
</nav>
<Link to="/hero">
<button>Go to Hero</button>
</Link>

<div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
<div className="text-center">
ให้เหมาะกับสไตล์คุณ ผ่านเว็บไซต์ช่วยวางแผนการใช้บัตรเครดิต
</div>
<Link href="/hero">
<div className="inline-block bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700 transition duration-300 ease-in-out shadow-lg transform hover:scale-105">
About Us
</div>
</Link>
<div className="grid grid-cols-3 gap-[4px] p-1">
<div className="flex items-center justify-center h-screen ">
<div className="bg-white shadow-lg rounded-lg p-8 h-[400px] w-[750px] text-center">
<h2 className="text-2xl font-bold mb-4">Louriepoiem</h2>
<p className="text-gray-700 mb-6">lorepium</p>
<Link href="/hero">
<div className="inline-block bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700">
เข้าใช้บริการ
</div>
</Link>
</div>
</div>
);
}
<div className="flex items-center justify-center h-screen ">
<div className="bg-white shadow-lg rounded-lg p-8 h-[400px] w-[750px] text-center">
<h2 className="text-2xl font-bold mb-4">Louriepoiem</h2>
<p className="text-gray-700 mb-6">lorepium</p>
<Link href="/hero">
<div className="inline-block bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700">
เข้าใช้บริการ
</div>
</Link>
</div>
</div>
<div className="flex items-center justify-center">
<div className="bg-white shadow-lg rounded-lg p-8 h-[400px] w-[750px] text-center">
<h2 className="text-2xl font-bold mb-4">Louriepoiem</h2>
<p className="text-gray-700 mb-6">lorepium</p>
<Link href="/hero">
<div className="inline-block bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700">
เข้าใช้บริการ
</div>
</Link>
</div>
</div>
</div>
</div>



</div>

);
}
228 changes: 146 additions & 82 deletions components/hero.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
"use client";

import { useState, useEffect } from 'react';
import { Container, TextField, Button, Typography, Box, List, ListItem, ListItemText } from '@mui/material';
import { creditCardData } from './mockData';

const recommendCard = (amount, creditCards) => {
Expand All @@ -26,16 +27,17 @@ const recommendCard = (amount, creditCards) => {
return `You should use ${recommendedCard.cardName} for this purchase.`;
};

const Hero = () => {
const App = () => {
const [salary, setSalary] = useState(0);
const [purchaseAmount, setPurchaseAmount] = useState(0);
const [recommendation, setRecommendation] = useState('');
const [availableMoney, setAvailableMoney] = useState(0);
const [percentage, setPercentage] = useState(20);
const [percentage, setPercentage] = useState(20);
const [maxDebt, setMaxDebt] = useState(0);
const [expenses, setExpenses] = useState([]);
const [expenseDescription, setExpenseDescription] = useState('');
const [expenseAmount, setExpenseAmount] = useState(0);
const [purchaseDate, setPurchaseDate] = useState('');

useEffect(() => {
const totalExpenses = expenses.reduce((sum, expense) => sum + expense.amount, 0);
Expand Down Expand Up @@ -64,89 +66,151 @@ const Hero = () => {
setExpenses(newExpenses);
};

return (
<div className="flex justify-center">
{/* <h1>Credit Card Information</h1>
{creditCardData.map((card, index) => (
<div key={index}>
<p><strong>Card Name:</strong> {card.cardName}</p>
<p><strong>Billing Cycle:</strong> {card.billingCycle}</p>
<p><strong>Credit Limit:</strong> {card.creditLimit}</p>
</div>
))} */}

<h2>User Financial Information</h2>
<div>
<label>
Salary:
<input
type="number"
value={salary}
onChange={(e) => setSalary(Number(e.target.value))}
/>
</label>
</div>
<div>
<label>
Purchase Amount:
<input
type="number"
value={purchaseAmount}
onChange={(e) => setPurchaseAmount(Number(e.target.value))}
/>
</label>
</div>
<div>
<label>
Percentage for Max Debt:
<input
type="number"
value={percentage}
onChange={(e) => setPercentage(Number(e.target.value))}
/>
</label>
</div>
<button onClick={handleRecommendation}>Get Recommendation</button>

<h2>Expenses</h2>
<div>
<label>
Expense Description:
<input
type="text"
value={expenseDescription}
onChange={(e) => setExpenseDescription(e.target.value)}
/>
</label>
<label>
Expense Amount:
<input
type="number"
value={expenseAmount}
onChange={(e) => setExpenseAmount(Number(e.target.value))}
/>
</label>
<button onClick={handleAddExpense}>Add Expense</button>
</div>
<ul>
{expenses.map((expense, index) => (
<li key={index}>
{expense.description}: {expense.amount}
<button onClick={() => handleRemoveExpense(index)}>Remove</button>
</li>
))}
</ul>
const calculateBestCard = () => {
const purchase = new Date(purchaseDate);
const dayOfPurchase = purchase.getDate();

const closingDay1 = 25; // Closing date 25
const closingDay2 = 20; // Closing date 20

<h2>Available Money</h2>
<p>{availableMoney}</p>
// Get days until next closing dates
let daysUntilClosing1 = closingDay1 - dayOfPurchase;
let daysUntilClosing2 = closingDay2 - dayOfPurchase;

// Adjust days for month boundary
if (daysUntilClosing1 < 0) {
daysUntilClosing1 += new Date(purchase.getFullYear(), purchase.getMonth() + 1, 0).getDate(); // days in current month
}

if (daysUntilClosing2 < 0) {
daysUntilClosing2 += new Date(purchase.getFullYear(), purchase.getMonth() + 1, 0).getDate(); // days in current month
}

<h2>Max Debt ({percentage}% of Salary)</h2>
<p>{maxDebt}</p>
// Recommend card based on closest closing date
if (daysUntilClosing1 < daysUntilClosing2) {
setRecommendation('You should use the card with a closing date on the 25th.');
} else {
setRecommendation('You should use the card with a closing date on the 20th.');
}
};

<h2>Purchase Recommendation</h2>
<p>{recommendation}</p>
</div>
return (
<Container>
<nav className="bg-white shadow-md p-8 flex justify-between">
<div>Credit Buddy</div>
<ul className="flex justify-around gap-[24px]">
<li className="nav-item">
<a href="/" className="nav-link">
Home
</a>
</li>
<li className="nav-item">
<a href="/about" className="nav-link">
Caculate
</a>
</li>
<li className="nav-item">
<a href="/services" className="nav-link">
About us
</a>
</li>
<li className="nav-item">
<a href="/contact" className="nav-link">
Policy
</a>
</li>
</ul>
</nav>
<Typography className=''>User Financial Information</Typography>

<Box component="form" noValidate autoComplete="off">
<TextField
label="Salary"
type="number"
value={salary}
onChange={(e) => setSalary(Number(e.target.value))}
fullWidth
margin="normal"
/>
<TextField
label="Purchase Amount"
type="number"
value={purchaseAmount}
onChange={(e) => setPurchaseAmount(Number(e.target.value))}
fullWidth
margin="normal"
/>
<TextField
label="Percentage for Max Debt"
type="number"
value={percentage}
onChange={(e) => setPercentage(Number(e.target.value))}
fullWidth
margin="normal"
/>
<Button variant="contained" color="primary" onClick={handleRecommendation} style={{ marginTop: 20 }}>
Get Recommendation
</Button>
</Box>

<Typography variant="h5" gutterBottom style={{ marginTop: 40 }}>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"
/>
<TextField
label="Expense Amount"
type="number"
value={expenseAmount}
onChange={(e) => setExpenseAmount(Number(e.target.value))}
fullWidth
margin="normal"
/>
<Button variant="contained" color="primary" onClick={handleAddExpense} style={{ marginTop: 20 }}>
Add Expense
</Button>
</Box>
<List>
{expenses.map((expense, index) => (
<ListItem key={index}>
<ListItemText primary={`${expense.description}: ${expense.amount}`} />
<Button variant="outlined" color="secondary" onClick={() => handleRemoveExpense(index)}>
Remove
</Button>
</ListItem>
))}
</List>

<Typography variant="h5" gutterBottom style={{ marginTop: 40 }}>Available Money</Typography>
<Typography>{availableMoney}</Typography>

<Typography variant="h5" gutterBottom>Max Debt ({percentage}% of Salary)</Typography>
<Typography>{maxDebt}</Typography>

<Typography variant="h5" gutterBottom>Purchase Recommendation</Typography>
<Typography>{recommendation}</Typography>

<Typography variant="h5" gutterBottom style={{ marginTop: 40 }}>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"
/>
<Button variant="contained" color="primary" onClick={calculateBestCard} style={{ marginTop: 20 }}>
Calculate Best Card
</Button>
</Box>
</Container>
);
};

export default Hero;
export default App;
Loading

0 comments on commit 1e33198

Please sign in to comment.