Open suitedaces opened 6 months ago
Hello @suitedaces 👋,
I have looked into the code of the sales-dashboard
app and from my findings, the dashboard does display "+X% from last month" quite a few times. To make the positive and negative percentages display in different colors, we would need to inspect the code for the value of the percentage and then conditionally apply the relevant class for color styling.
I found few relevant codes in the app/(dashboard)/dashboard/page.tsx
, where the dashboard metrics are rendered. If the value is a percentage and negative, we can add a class that would change the text color to red and vice versa for positive values.
Here's one particularly relevant code snippet found:
<CardContent>
<div className=\"text-2xl font-bold\">+2350</div>
<p className=\"text-xs text-muted-foreground\">
+180.1% from last month
</p>
</CardContent>
Also, I searched the web for resources to aid us in making this change and I found these:
These resources provide helpful insight into changing the color of an HTML element dynamically based on its value using CSS.
Hope these insights are helpful, these updates shouldn't be complex to add. Kindly let me know if you need further help or clarifications. 😊
+20.1% from last month
+180.1% from last month
@devapeai /code
In our dashboard, under revenue, subscription, sales, etc: where you see <+number%> last month, i want the number to be green if it's a positive % change, and red if it's a negative percentage change