counterweight/kuotata
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

extract LoanPanel

Browse source
This commit is contained in:
Pablo Martin 2025-05-22 18:36:26 +02:00
parent 0f07127efd
commit 6333638ed9
2 changed files with 50 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

42
src/App.jsx
View file

@ -1,5 +1,6 @@
import AppHeader from "./components/AppHeader"; import AppHeader from "./components/AppHeader";
import AppSubHeader from "./components/AppSubHeader"; import AppSubHeader from "./components/AppSubHeader";
import LoanPanel from "./components/LoanPanel";
const App = () => { const App = () => {
return ( return (
@ -12,46 +13,7 @@ const App = () => {
<AppSubHeader /> <AppSubHeader />
</div> </div>
</div> </div>
<div className="p-5 bg-gray-50 rounded-3xl border border-gray-400"> <LoanPanel />
<form className="flex flex-col justify-end items-end my-5 text-white bg-blue-600 p-5 rounded-3xl shadow-[0_4px_0_rgba(0,255,255,1)]">
<div className="flex">
<label className="my-1" htmlFor="">
Capital prestado
</label>
<input
className="ml-3 w-[120px] w-min-0 bg-white rounded-tl-md rounded-bl-md text-black text-right p-1 !placeholder-gray-300"
placeholder="1000"
/>
<div className="w-[60px] place-self-center p-1 rounded-tr-md rounded-br bg-gray-600 font-light">
€
</div>
</div>
<div className="flex">
<label className="my-1" htmlFor="">
Duración
<input
className="ml-3 w-[60px] bg-white rounded-tl-md rounded-bl-md text-black text-right p-1"
defaultValue={12}
/>
</label>
<div className="w-[60px] place-self-center p-1 rounded-tr-md rounded-br bg-gray-600 font-light">
Meses
</div>
</div>
<div className="flex">
<label className="my-1" htmlFor="">
Interés (TIN)
<input
className="ml-3 w-[60px] bg-white rounded-tl-md rounded-bl-md text-black text-right p-1"
defaultValue={5}
/>
</label>
<div className="w-[60px] place-self-center p-1 rounded-tr-md rounded-br bg-gray-600 font-light">
%
</div>
</div>
</form>
</div>
<p className="mt-auto mb-5">Made by me, with lots of love</p> <p className="mt-auto mb-5">Made by me, with lots of love</p>
</div> </div>
); );

48
src/components/LoanPanel.jsx Normal file
View file

@ -0,0 +1,48 @@
const LoanPanel = () => {
return (
<>
<div className="p-5 bg-gray-50 rounded-3xl border border-gray-400">
<form className="flex flex-col justify-end items-end my-5 text-white bg-blue-600 p-5 rounded-3xl shadow-[0_4px_0_rgba(0,255,255,1)]">
<div className="flex">
<label className="my-1" htmlFor="">
Capital prestado
</label>
<input
className="ml-3 w-[120px] w-min-0 bg-white rounded-tl-md rounded-bl-md text-black text-right p-1 !placeholder-gray-300"
placeholder="1000"
/>
<div className="w-[60px] place-self-center p-1 rounded-tr-md rounded-br bg-gray-600 font-light">
€
</div>
</div>
<div className="flex">
<label className="my-1" htmlFor="">
Duración
<input
className="ml-3 w-[60px] bg-white rounded-tl-md rounded-bl-md text-black text-right p-1"
defaultValue={12}
/>
</label>
<div className="w-[60px] place-self-center p-1 rounded-tr-md rounded-br bg-gray-600 font-light">
Meses
</div>
</div>
<div className="flex">
<label className="my-1" htmlFor="">
Interés (TIN)
<input
className="ml-3 w-[60px] bg-white rounded-tl-md rounded-bl-md text-black text-right p-1"
defaultValue={5}
/>
</label>
<div className="w-[60px] place-self-center p-1 rounded-tr-md rounded-br bg-gray-600 font-light">
%
</div>
</div>
</form>
</div>
</>
);
};
export default LoanPanel;