Skip to content

Update site, did few ui changes. #69

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
yashdev9274 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update site, did few ui changes. #69

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions components/home/demo/demo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,19 +9,19 @@ import data from "./data.json"

export default function Demo() {
return (
<section className="container mx-auto mt-3 hidden md:block">
<SidebarProvider className="flex flex-1">
<section className="container mx-auto mt-3 px-4 sm:px-6 lg:px-5 ">
<SidebarProvider className="flex flex-1 flex-col sm:flex-row">
<SidebarInset>
<SiteHeader />
<div className="flex flex-1 flex-col">
<div className="flex flex-1 flex-col gap-2">
<div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
<div className="flex flex-wrap sm:grid-cols-2 md:grid-cols-2 gap-4 py-4 md:gap-6 md:py-6">
<SectionCards />
<div className="px-4 lg:px-6">
</div>
<div className="px-4 lg:px-6">
<ChartAreaInteractive />
</div>
{/* <DataTable data={data} /> */}
</div>
</div>
</div>
</SidebarInset>
Expand Down
14 changes: 7 additions & 7 deletions components/home/demo/sectionCards.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,14 @@ import {

export function SectionCards() {
return (
<div className="flex flex-wrap justify-center gap-4 px-4">
<div className="grid grid-cols-2 justify-center md:grid-cols-2 lg:flex-col lg:flex-1 gap-4 px-4">
<Card className="@container/card">
<CardHeader className="relative">
<CardHeader className="relative text-sm lg:text-2xl">
<CardDescription>Total Revenue</CardDescription>
<CardTitle className="@[250px]/card:text-3xl text-2xl font-semibold tabular-nums">
<CardTitle className="@[250px]/card:text-3xl text-sm lg:text-2xl font-semibold tabular-nums">
$1,250.00
</CardTitle>
<div className="absolute right-4 top-4">
<div className="absolute right-4 top-4 ">
<Badge variant="outline" className="flex gap-1 rounded-lg text-xs">
<TrendingUpIcon className="size-3" />
+12.5%
Expand All @@ -37,7 +37,7 @@ export function SectionCards() {
<Card className="@container/card">
<CardHeader className="relative">
<CardDescription>New Customers</CardDescription>
<CardTitle className="@[250px]/card:text-3xl text-2xl font-semibold tabular-nums">
<CardTitle className="@[250px]/card:text-3xl text-sm lg:text-2xl font-semibold tabular-nums">
1,234
</CardTitle>
<div className="absolute right-4 top-4">
Expand All @@ -59,10 +59,10 @@ export function SectionCards() {
<Card className="@container/card">
<CardHeader className="relative">
<CardDescription>Active Accounts</CardDescription>
<CardTitle className="@[250px]/card:text-3xl text-2xl font-semibold tabular-nums">
<CardTitle className="@[250px]/card:text-3xl text-sm lg:text-2xl font-semibold tabular-nums">
45,678
</CardTitle>
<div className="absolute right-4 top-4">
<div className="absolute right-4 top-4 text-sm lg:text-2xl">
Copy link
Copy Markdown

@coderabbitai coderabbitai bot May 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Inconsistent badge container styling

The third card's badge container has responsive text sizing (text-sm lg:text-2xl) added, but this isn't applied to the other cards. This might lead to inconsistent visual appearance of the badges.

Verify if this text sizing should be applied to other badge containers as well for consistency:

🏁 Script executed:

#!/bin/bash
# Check how badge containers are styled across cards
grep -A 3 "absolute right-4 top-4" components/home/demo/sectionCards.tsx

Length of output: 919

Unify badge container text sizing

Only the third card’s badge wrapper includes text-sm lg:text-2xl, while the other three use no text-size classes. This creates inconsistent badge layouts across cards. Please either remove the sizing classes from the third wrapper or apply them uniformly to all four wrappers.

• File: components/home/demo/sectionCards.tsx
• Locations: all <div className="absolute right-4 top-4…"> wrappers for each <Badge>

Suggested diff to remove from just the third card:

-          <div className="absolute right-4 top-4 text-sm lg:text-2xl">
+          <div className="absolute right-4 top-4">

Or, to apply sizing to every badge wrapper, add text-sm lg:text-2xl on each of the four <div> elements.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<div className="absolute right-4 top-4 text-sm lg:text-2xl">
<div className="absolute right-4 top-4">

<Badge variant="outline" className="flex gap-1 rounded-lg text-xs">
<TrendingUpIcon className="size-3" />
+12.5%
Expand Down
6 changes: 3 additions & 3 deletions components/home/demo/siteHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@ export function SiteHeader() {
return (
<header className="group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 flex h-12 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear">
<div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
{/* <SidebarTrigger className="-ml-1" /> */}
{/* <Separator
<SidebarTrigger className="-ml-1" />
<Separator
orientation="vertical"
className="mx-2 data-[orientation=vertical]:h-4"
/> */}
/>
<h1 className="text-base font-medium">Dashboard</h1>
</div>
</header>
Expand Down