lvl0/incr
lvl0/incr
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases 3 Packages Wiki Activity Actions

Fix form border

Browse source
This commit is contained in:
myrmidex 2025-07-13 02:10:52 +02:00
parent 2359e93d58
commit 19afa660da
4 changed files with 85 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
resources/js/components/Display/InlineForm.tsx
View file

@ -3,6 +3,7 @@ import AddPurchaseForm from '@/components/Transactions/AddPurchaseForm';
import UpdatePriceForm from '@/components/Pricing/UpdatePriceForm';
import { cn } from '@/lib/utils';
import { X } from 'lucide-react';
import ComponentTitle from '@/components/ui/ComponentTitle';
interface InlineFormProps {
type: 'purchase' | 'milestone' | 'price' | null;
@ -28,50 +29,50 @@ export default function InlineForm({
return (
<div
className={cn(
"bg-black border-4 border-gray-800 rounded-lg",
"shadow-2xl shadow-red-500/20",
"p-6",
"bg-black p-8",
"transition-all duration-300",
className
)}
>
{/* Header */}
<div className="flex items-center justify-between mb-6">
<h2 className="text-red-500 font-mono tracking-wide text-lg">
{title}
</h2>
<button
onClick={onClose}
className="text-red-400 hover:text-red-300 transition-colors p-1"
aria-label="Close form"
>
<X className="w-5 h-5" />
</button>
</div>
<div className="w-full border-4 border-red-500 p-2 bg-black space-y-4">
<div className="flex items-center justify-between mb-6">
<ComponentTitle>{title}</ComponentTitle>
{/* Form Content */}
<div className="flex justify-center">
{type === 'purchase' ? (
<AddPurchaseForm
onSuccess={() => {
if (onPurchaseSuccess) onPurchaseSuccess();
onClose();
}}
/>
) : type === 'milestone' ? (
<AddMilestoneForm
onSuccess={() => {
if (onMilestoneSuccess) onMilestoneSuccess();
onClose();
}}
/>
) : (
<UpdatePriceForm
onSuccess={() => {
if (onPriceSuccess) onPriceSuccess();
onClose();
}}
/>
)}
<button
onClick={onClose}
className="text-red-400 hover:text-red-300 transition-colors p-1"
aria-label="Close form"
>
<X className="w-5 h-5" />
</button>
</div>
{/* Form Content */}
<div className="flex justify-center">
{type === 'purchase' ? (
<AddPurchaseForm
onSuccess={() => {
if (onPurchaseSuccess) onPurchaseSuccess();
onClose();
}}
/>
) : type === 'milestone' ? (
<AddMilestoneForm
onSuccess={() => {
if (onMilestoneSuccess) onMilestoneSuccess();
onClose();
}}
/>
) : (
<UpdatePriceForm
onSuccess={() => {
if (onPriceSuccess) onPriceSuccess();
onClose();
}}
/>
)}
</div>
</div>
</div>
);

10
resources/js/components/Display/StatsBox.tsx
View file

@ -1,6 +1,7 @@
import { cn } from '@/lib/utils';
import { Plus, ChevronRight } from 'lucide-react';
import { useState } from 'react';
import ComponentTitle from '@/components/ui/ComponentTitle';
interface Milestone {
target: number;
@ -72,9 +73,8 @@ export default function StatsBox({
<div className="w-full border-4 border-red-500 p-2 bg-black space-y-4">
{/* STATS Title and Current Price */}
<div className="flex justify-between items-center mb-6 relative">
<h2 className="text-red-500 text-lg font-mono font-bold tracking-wider">
STATS
</h2>
<ComponentTitle>Stats</ComponentTitle>
<div className="flex items-center space-x-2 relative">
{stats.currentPrice && (
<div className="text-red-500 text-sm font-mono tracking-wider">
@ -185,8 +185,8 @@ export default function StatsBox({
key={index}
className={cn(
isSelectedMilestone
? "text-red-500 font-bold"
: "bg-red-500 text-black"
? "bg-red-500 text-black"
: "text-red-500 font-bold"
)}
>
<td className="py-1 pr-4">

15
resources/js/components/ui/ComponentTitle.tsx Normal file
View file

@ -0,0 +1,15 @@
import { FC, ReactNode } from 'react';
interface ComponentTitleProps {
children: ReactNode;
}
const ComponentTitle: FC<ComponentTitleProps> = ({ children }) => {
return (
<h2 className="text-red-500 text-lg font-mono font-bold tracking-wider uppercase">
{ children }
</h2>
)
}
export default ComponentTitle

7
resources/js/pages/dashboard.tsx
View file

@ -168,6 +168,7 @@ export default function Dashboard() {
const handleProgressClick = () => {
setShowStatsBox(!showStatsBox);
setActiveForm(null)
};
return (
@ -186,7 +187,7 @@ export default function Dashboard() {
</div>
{/* Box 2: Progress Bar (toggleable) */}
<div className="mt-4" style={{ display: showProgressBar ? 'block' : 'none' }}>
<div style={{ display: showProgressBar ? 'block' : 'none' }}>
<ProgressBar
currentShares={purchaseData.total_shares}
milestones={milestones}
@ -196,7 +197,7 @@ export default function Dashboard() {
</div>
{/* Box 3: Stats Box (toggleable) */}
<div className="mt-4" style={{ display: showStatsBox ? 'block' : 'none' }}>
<div style={{ display: showStatsBox ? 'block' : 'none' }}>
<StatsBox
stats={statsData}
milestones={milestones}
@ -209,7 +210,7 @@ export default function Dashboard() {
</div>
{/* Box 4: Forms (only when active form is set) */}
<div className="mt-4" style={{ display: activeForm ? 'block' : 'none' }}>
<div style={{ display: activeForm && showProgressBar && showStatsBox ? 'block' : 'none' }}>
<InlineForm
type={activeForm}
onClose={() => setActiveForm(null)}