mirror of
https://github.com/Sosokker/B2D-Ventures.git
synced 2025-12-18 21:44:06 +01:00
Enhance Portfolio component with new card layout and tooltips for business investment insights; update QuestionMarkIcon for better accessibility
This commit is contained in:
THIS ONE IS A LITTLE BIT TRICKY KRUB
parent
e8de157612
commit
9182b168e1
@ -13,6 +13,12 @@ import {
|
||||
checkForInvest,
|
||||
} from "./hook";
|
||||
import CountUpComponent from "@/components/countUp";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
import { RecentFunds } from "@/components/recent-funds";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import QuestionMarkIcon from "@/components/icon/questionMark";
|
||||
@ -66,18 +72,57 @@ export default async function Portfolio({
|
||||
<div>{totalInvest}</div>
|
||||
</div> */}
|
||||
{/* <CountUpComponent end={100} duration={3} /> */}
|
||||
<div className="flex w-full gap-10">
|
||||
<Overview graphType="line" data={overAllData}></Overview>
|
||||
<Overview graphType="bar" data={fourYearData}></Overview>
|
||||
<Overview graphType="bar" data={dayOfWeekData}></Overview>
|
||||
<div className="flex flew-rows-3 gap-10 mt-5">
|
||||
<Card className="w-[500px]">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-md font-bold">
|
||||
Types of Businesses Invested In
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="mt-5">
|
||||
<Overview graphType="line" data={overAllData}></Overview>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="w-[500px]">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-md font-bold">
|
||||
Types of Businesses Invested In
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="mt-5">
|
||||
<Overview graphType="bar" data={fourYearData}></Overview>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="w-[500px]">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-md font-bold">
|
||||
Types of Businesses Invested In
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="mt-5">
|
||||
<Overview graphType="bar" data={dayOfWeekData}></Overview>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="flex flex-cols-3 w-96 gap-5">
|
||||
<div className="flex flex-cols-3 w-96 gap-5 mt-5">
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-md font-bold">
|
||||
Categories of Invested Projects
|
||||
</CardTitle>
|
||||
<QuestionMarkIcon />
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
<QuestionMarkIcon />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>
|
||||
Displays the distribution of project tags in your <br />
|
||||
investments, highlighting areas of interest.
|
||||
</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</CardHeader>
|
||||
<CardContent className="mt-5">
|
||||
<PieChart
|
||||
@ -94,9 +139,22 @@ export default async function Portfolio({
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-md font-bold">
|
||||
Categories of Invested Projects
|
||||
Types of Businesses Invested In
|
||||
</CardTitle>
|
||||
<QuestionMarkIcon />
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
<QuestionMarkIcon />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>
|
||||
Shows the breakdown of business types in your portfolio,{" "}
|
||||
<br />
|
||||
illustrating sector diversity.
|
||||
</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</CardHeader>
|
||||
<CardContent className="mt-5">
|
||||
<PieChart
|
||||
@ -106,7 +164,16 @@ export default async function Portfolio({
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<RecentFunds />
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-md font-bold">
|
||||
Recent investment
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="mt-5">
|
||||
<RecentFunds />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -7,6 +7,7 @@ export default function QuestionMarkIcon() {
|
||||
version="1.1"
|
||||
id="_x32_"
|
||||
viewBox="0 0 512 512"
|
||||
fill="currentColor"
|
||||
>
|
||||
<g>
|
||||
<path d="M256,0C114.616,0,0,114.612,0,256s114.616,256,256,256s256-114.612,256-256S397.385,0,256,0z M207.678,378.794 c0-17.612,14.281-31.893,31.893-31.893c17.599,0,31.88,14.281,31.88,31.893c0,17.595-14.281,31.884-31.88,31.884 C221.959,410.678,207.678,396.389,207.678,378.794z M343.625,218.852c-3.596,9.793-8.802,18.289-14.695,25.356 c-11.847,14.148-25.888,22.718-37.442,29.041c-7.719,4.174-14.533,7.389-18.769,9.769c-2.905,1.604-4.479,2.95-5.256,3.826 c-0.768,0.926-1.029,1.306-1.496,2.826c-0.273,1.009-0.558,2.612-0.558,5.091c0,6.868,0,12.512,0,12.512 c0,6.472-5.248,11.728-11.723,11.728h-28.252c-6.475,0-11.732-5.256-11.732-11.728c0,0,0-5.645,0-12.512 c0-6.438,0.752-12.744,2.405-18.777c1.636-6.008,4.215-11.718,7.508-16.694c6.599-10.083,15.542-16.802,23.984-21.48 c7.401-4.074,14.723-7.455,21.516-11.281c6.789-3.793,12.843-7.91,17.302-12.372c2.988-2.975,5.31-6.05,7.087-9.52 c2.335-4.628,3.955-10.067,3.992-18.389c0.012-2.463-0.698-5.702-2.632-9.405c-1.926-3.686-5.066-7.694-9.264-11.29 c-8.45-7.248-20.843-12.545-35.054-12.521c-16.285,0.058-27.186,3.876-35.587,8.62c-8.36,4.776-11.029,9.595-11.029,9.595 c-4.268,3.718-10.603,3.85-15.025,0.314l-21.71-17.397c-2.719-2.173-4.322-5.438-4.396-8.926c-0.063-3.479,1.425-6.81,4.061-9.099 c0,0,6.765-10.43,22.451-19.38c15.62-8.992,36.322-15.488,61.236-15.429c20.215,0,38.839,5.562,54.268,14.661 c15.434,9.148,27.897,21.744,35.851,36.876c5.281,10.074,8.525,21.43,8.533,33.38C349.211,198.042,347.248,209.058,343.625,218.852 z" />
|
||||
|
||||
Loading…
Reference in New Issue
Block a user