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.

src/components/TransactionCard.tsx

@@ -0,0 +1,72 @@
+
+import React from 'react';
+import { ArrowDownIcon, ArrowUpIcon, ShoppingBag, Coffee, Home, Car, Gift } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+export type Transaction = {
+  id: string;
+  title: string;
+  amount: number;
+  date: string;
+  category: string;
+  type: 'expense' | 'income';
+};
+
+const categoryIcons: Record<string, React.ReactNode> = {
+  shopping: <ShoppingBag size={18} />,
+  food: <Coffee size={18} />,
+  housing: <Home size={18} />,
+  transportation: <Car size={18} />,
+  entertainment: <Gift size={18} />,
+  // Add more categories as needed
+};
+
+interface TransactionCardProps {
+  transaction: Transaction;
+}
+
+const TransactionCard: React.FC<TransactionCardProps> = ({ transaction }) => {
+  const { title, amount, date, category, type } = transaction;
+  
+  const formattedAmount = new Intl.NumberFormat('ko-KR', {
+    style: 'currency',
+    currency: 'KRW',
+    maximumFractionDigits: 0
+  }).format(amount);
+  
+  return (
+    <div className="neuro-flat p-4 transition-all duration-300 hover:shadow-neuro-convex animate-scale-in">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <div className={cn(
+            "p-2 rounded-full",
+            type === 'expense' ? "bg-neuro-expense/10 text-neuro-expense" : "bg-neuro-income/10 text-neuro-income"
+          )}>
+            {categoryIcons[category] || <ShoppingBag size={18} />}
+          </div>
+          
+          <div>
+            <h3 className="text-sm font-medium">{title}</h3>
+            <p className="text-xs text-gray-500">{date}</p>
+          </div>
+        </div>
+        
+        <div className="flex items-center gap-1">
+          {type === 'expense' ? (
+            <ArrowDownIcon size={12} className="text-neuro-expense" />
+          ) : (
+            <ArrowUpIcon size={12} className="text-neuro-income" />
+          )}
+          <span className={cn(
+            "font-medium",
+            type === 'expense' ? "text-neuro-expense" : "text-neuro-income"
+          )}>
+            {formattedAmount}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TransactionCard;