Main Components
This section provides usage guidelines for the primary UI components used across the Indian Startup Funding Tracker. These components are designed with a "neo-brutalist" aesthetic, utilizing thick borders and high-contrast elements.
DealCard
The DealCard component provides a concise summary of a specific funding transaction. It is typically used in grids to provide a high-level overview before a user navigates to the full deal details.
Props
| Prop | Type | Description |
| :--- | :--- | :--- |
| deal | Object | The deal object containing company info, amount, and metadata. |
Usage
The component expects a deal object where the amount is an integer representing value in Lakhs (e.g., 100 = 1 Crore).
import { DealCard } from "@/components/deal-card";
const dealData = {
id: "123",
company: "TechFlow",
amount: 500, // ₹5 Crore
stage: "Series A",
sectors: ["SaaS", "Fintech"],
investors: ["Accel", "Tiger Global"],
date: "2024-03-15",
location: "Bengaluru"
};
export default function MyComponent() {
return (
<div className="max-w-md">
<DealCard deal={dealData} />
</div>
);
}
AnalyticsDashboard
The AnalyticsDashboard is a high-level client component that processes raw funding data and renders a suite of visualizations using recharts. It handles data aggregation for monthly trends, sector distribution, and investor rankings internally.
Usage
This component does not require props; it automatically consumes and processes data from @/data/funding-data.
import { AnalyticsDashboard } from "@/components/analytics-dashboard";
export default function AnalyticsPage() {
return (
<section>
<h2>Funding Insights</h2>
<AnalyticsDashboard />
</section>
);
}
Key Features:
- Monetary Normalization: Automatically converts Lakhs to Crores/Billions for chart readability.
- Responsive Containers: Charts scale to fit the parent container's width.
- Disclosed vs. Undisclosed Logic: Specifically filters out deals with
0amount for monetary charts while including them for count-based charts.
FilterPanel
The FilterPanel is a complex state-driven component used to narrow down results in the exploration interface. It supports multi-select checkboxes, dropdowns, and range sliders.
Props
| Prop | Type | Description |
| :--- | :--- | :--- |
| sectors | string[] | List of available sectors to filter by. |
| stages | string[] | List of funding stages (e.g., Seed, Series B). |
| locations | string[] | List of available cities/regions. |
| years | string[] | List of years available in the dataset. |
| selected... | State | Various state variables for active filters. |
| setSelected...| Dispatch | State setter functions for handling user input. |
Usage
The FilterPanel is intended to be used alongside a state-managed list (like DealsList).
import { FilterPanel } from "@/components/filter-panel";
import { useState } from "react";
export function ExploreView() {
const [selectedSectors, setSelectedSectors] = useState<string[]>([]);
const [fundingRange, setFundingRange] = useState<[number, number]>([0, 10000]);
return (
<FilterPanel
sectors={["Fintech", "Healthtech", "Edtech"]}
selectedSectors={selectedSectors}
setSelectedSectors={setSelectedSectors}
fundingRange={fundingRange}
setFundingRange={setFundingRange}
// ... include other required filter props
/>
);
}
HeroStats
The HeroStats component provides an immediate snapshot of the entire dataset. It calculates and displays key performance indicators (KPIs) such as total funding, total deal count, and the most active industry.
Usage
This is a self-contained component that calculates metrics directly from the data source. It is best placed at the top of the landing page.
import { HeroStats } from "@/components/hero-stats";
export default function HomePage() {
return (
<main>
<HeroStats />
{/* Rest of the homepage content */}
</main>
);
}
Displayed Metrics:
- Total Disclosed Funding: Sum of all deals where the amount is > 0.
- Total Deals: Absolute count of entries, including undisclosed amounts.
- Most Active Sector: The sector appearing most frequently across all deals.
- Largest Deal: The single highest disclosed funding amount in the dataset.