refactor: everything
This commit is contained in:
32
src/components/CreateModal.jsx
Normal file
32
src/components/CreateModal.jsx
Normal file
@@ -0,0 +1,32 @@
|
||||
import React from "react";
|
||||
|
||||
export default function CreateModal({ onClose, onAddBean, onAddBrew }) {
|
||||
return (
|
||||
<div className="fixed inset-0 bg-[rgba(44,24,16,0.5)] z-[100] flex items-end justify-center animate-fade-in" onClick={onClose}>
|
||||
<div className="bg-[#FAF6F1] rounded-t-[28px] w-full max-w-[480px] px-5 pb-10 animate-slide-up" onClick={e => e.stopPropagation()}>
|
||||
<div className="w-9 h-1 bg-[#E8DFD3] rounded mx-auto mt-3 mb-6" />
|
||||
<div className="font-serif text-xl font-semibold text-[#2C1810] mb-6">What would you like to add?</div>
|
||||
<div className="flex flex-col gap-3">
|
||||
<button
|
||||
className="flex items-center gap-4 px-5 py-4 bg-white border border-[#E8DFD3] rounded-2xl text-left cursor-pointer hover:shadow-[0_4px_16px_rgba(44,24,16,0.08)] transition-all active:scale-[0.98]"
|
||||
onClick={() => { onClose(); onAddBrew(); }}>
|
||||
<div className="w-12 h-12 rounded-xl bg-[#FAF6F1] flex items-center justify-center text-2xl flex-shrink-0">☕</div>
|
||||
<div>
|
||||
<div className="font-semibold text-[#2C1810] text-sm">Log a Brew</div>
|
||||
<div className="text-xs text-[#9C8B7A] mt-0.5">Record a brewing session with recipe details</div>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
className="flex items-center gap-4 px-5 py-4 bg-white border border-[#E8DFD3] rounded-2xl text-left cursor-pointer hover:shadow-[0_4px_16px_rgba(44,24,16,0.08)] transition-all active:scale-[0.98]"
|
||||
onClick={() => { onClose(); onAddBean(); }}>
|
||||
<div className="w-12 h-12 rounded-xl bg-[#FAF6F1] flex items-center justify-center text-2xl flex-shrink-0">🫘</div>
|
||||
<div>
|
||||
<div className="font-semibold text-[#2C1810] text-sm">Add Bean</div>
|
||||
<div className="text-xs text-[#9C8B7A] mt-0.5">Add a new coffee bean to your library</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user