Create new Flutter app
The prompt requests the creation of a new app with a neumorphic design, similar to a household account book, using Flutter.
This commit is contained in:
45
src/components/AddTransactionButton.tsx
Normal file
45
src/components/AddTransactionButton.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { PlusIcon, MinusIcon, X } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const AddTransactionButton = () => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="fixed bottom-24 right-6 z-20">
|
||||
{isOpen && (
|
||||
<div className="absolute bottom-16 right-0 flex flex-col gap-3 items-end animate-slide-up">
|
||||
<button
|
||||
className="neuro-flat p-4 text-neuro-expense flex items-center gap-2"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
<span className="text-sm font-medium">지출</span>
|
||||
<MinusIcon size={18} />
|
||||
</button>
|
||||
<button
|
||||
className="neuro-flat p-4 text-neuro-income flex items-center gap-2"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
<span className="text-sm font-medium">수입</span>
|
||||
<PlusIcon size={18} />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
className={cn(
|
||||
"p-4 rounded-full transition-all duration-300 text-white",
|
||||
isOpen
|
||||
? "bg-red-500 rotate-45 shadow-lg"
|
||||
: "bg-neuro-accent shadow-neuro-flat hover:shadow-neuro-convex animate-pulse-subtle"
|
||||
)}
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
>
|
||||
{isOpen ? <X size={24} /> : <PlusIcon size={24} />}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddTransactionButton;
|
||||
Reference in New Issue
Block a user