refactor: update Dashboard components for improved layout and integration
CI / changes (push) Successful in 9s
CI / commitlint (push) Has been skipped
CI / openapi (push) Has been skipped
CI / web (push) Successful in 52s
CI / go (push) Successful in 59s
CI / bird2 (push) Successful in 15s
CI / release (push) Successful in 4m20s
CI / changes (push) Successful in 9s
CI / commitlint (push) Has been skipped
CI / openapi (push) Has been skipped
CI / web (push) Successful in 52s
CI / go (push) Successful in 59s
CI / bird2 (push) Successful in 15s
CI / release (push) Successful in 4m20s
Refactored the DashboardQuickLinkCard to enhance its structure and presentation by integrating FramePanel. Updated the DashboardQuickLinks component to utilize Frame for better organization, including a header and description. Removed the previous DashboardFramePanel integration in the DashboardComponent to streamline the layout, ensuring a more cohesive user experience.
This commit is contained in:
@@ -12,3 +12,5 @@
|
|||||||
{"sessionId":"c10bcb","runId":"post-fix","hypothesisId":"H1","location":"badge-tabs.tsx:useEffect","message":"BadgeTabs layout metrics","data":{"flexDirection":"column","orientation":"horizontal","listLeft":280,"panelLeft":280,"stacked":true},"timestamp":1783605819320}
|
{"sessionId":"c10bcb","runId":"post-fix","hypothesisId":"H1","location":"badge-tabs.tsx:useEffect","message":"BadgeTabs layout metrics","data":{"flexDirection":"column","orientation":"horizontal","listLeft":280,"panelLeft":280,"stacked":true},"timestamp":1783605819320}
|
||||||
{"sessionId":"c10bcb","runId":"post-fix","hypothesisId":"H1","location":"badge-tabs.tsx:useEffect","message":"BadgeTabs layout metrics","data":{"flexDirection":"column","orientation":"horizontal","listLeft":280,"panelLeft":280,"stacked":true},"timestamp":1783605827145}
|
{"sessionId":"c10bcb","runId":"post-fix","hypothesisId":"H1","location":"badge-tabs.tsx:useEffect","message":"BadgeTabs layout metrics","data":{"flexDirection":"column","orientation":"horizontal","listLeft":280,"panelLeft":280,"stacked":true},"timestamp":1783605827145}
|
||||||
{"sessionId":"c10bcb","runId":"post-fix","hypothesisId":"H1","location":"badge-tabs.tsx:useEffect","message":"BadgeTabs layout metrics","data":{"flexDirection":"column","orientation":"horizontal","listLeft":280,"panelLeft":280,"stacked":true},"timestamp":1783605864391}
|
{"sessionId":"c10bcb","runId":"post-fix","hypothesisId":"H1","location":"badge-tabs.tsx:useEffect","message":"BadgeTabs layout metrics","data":{"flexDirection":"column","orientation":"horizontal","listLeft":280,"panelLeft":280,"stacked":true},"timestamp":1783605864391}
|
||||||
|
{"sessionId":"c10bcb","runId":"post-fix","hypothesisId":"H1","location":"badge-tabs.tsx:useEffect","message":"BadgeTabs layout metrics","data":{"flexDirection":"column","orientation":"horizontal","listLeft":280,"panelLeft":280,"stacked":true},"timestamp":1783606471768}
|
||||||
|
{"sessionId":"c10bcb","runId":"post-fix","hypothesisId":"H1","location":"badge-tabs.tsx:useEffect","message":"BadgeTabs layout metrics","data":{"flexDirection":"column","orientation":"horizontal","listLeft":280,"panelLeft":280,"stacked":true},"timestamp":1783606472923}
|
||||||
|
|||||||
@@ -2,8 +2,8 @@ import { Link } from '@tanstack/react-router'
|
|||||||
import { ChevronRight } from 'lucide-react'
|
import { ChevronRight } from 'lucide-react'
|
||||||
import type { ReactNode } from 'react'
|
import type { ReactNode } from 'react'
|
||||||
|
|
||||||
import { Frame, FramePanel } from '@/components/reui/frame'
|
|
||||||
import { CardDotField } from '@/components/dashboard/card-dot-field'
|
import { CardDotField } from '@/components/dashboard/card-dot-field'
|
||||||
|
import { FramePanel } from '@/components/reui/frame'
|
||||||
import { cn } from '@evobgp/ui/lib/utils'
|
import { cn } from '@evobgp/ui/lib/utils'
|
||||||
import { Item, ItemMedia } from '@evobgp/ui/components/item'
|
import { Item, ItemMedia } from '@evobgp/ui/components/item'
|
||||||
|
|
||||||
@@ -25,7 +25,6 @@ export function DashboardQuickLinkCard({
|
|||||||
iconClass,
|
iconClass,
|
||||||
}: QuickLinkCardProps) {
|
}: QuickLinkCardProps) {
|
||||||
return (
|
return (
|
||||||
<Frame className="h-full">
|
|
||||||
<Link
|
<Link
|
||||||
to={to}
|
to={to}
|
||||||
search={search}
|
search={search}
|
||||||
@@ -65,6 +64,5 @@ export function DashboardQuickLinkCard({
|
|||||||
</div>
|
</div>
|
||||||
</FramePanel>
|
</FramePanel>
|
||||||
</Link>
|
</Link>
|
||||||
</Frame>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,6 +2,12 @@ import { Gauge, Network, Play, Plus, Share2, Tags } from 'lucide-react'
|
|||||||
import type { ReactNode } from 'react'
|
import type { ReactNode } from 'react'
|
||||||
|
|
||||||
import { DashboardQuickLinkCard } from '@/components/dashboard/dashboard-quick-link-card'
|
import { DashboardQuickLinkCard } from '@/components/dashboard/dashboard-quick-link-card'
|
||||||
|
import {
|
||||||
|
Frame,
|
||||||
|
FrameDescription,
|
||||||
|
FrameHeader,
|
||||||
|
FrameTitle,
|
||||||
|
} from '@/components/reui/frame'
|
||||||
|
|
||||||
type QuickLink = {
|
type QuickLink = {
|
||||||
icon: ReactNode
|
icon: ReactNode
|
||||||
@@ -63,12 +69,16 @@ const LINKS: QuickLink[] = [
|
|||||||
|
|
||||||
export function DashboardQuickLinks() {
|
export function DashboardQuickLinks() {
|
||||||
return (
|
return (
|
||||||
<div className="@container w-full">
|
<Frame className="@container w-full">
|
||||||
<div className="grid gap-3 sm:grid-cols-2 @2xl:grid-cols-3">
|
<FrameHeader>
|
||||||
|
<FrameTitle>Быстрые действия</FrameTitle>
|
||||||
|
<FrameDescription>Частые переходы к настройке и деплою</FrameDescription>
|
||||||
|
</FrameHeader>
|
||||||
|
<div className="grid gap-1 sm:grid-cols-2 xl:grid-cols-3">
|
||||||
{LINKS.map((link) => (
|
{LINKS.map((link) => (
|
||||||
<DashboardQuickLinkCard key={link.label} {...link} />
|
<DashboardQuickLinkCard key={link.label} {...link} />
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Frame>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -85,6 +85,8 @@ function DashboardComponent() {
|
|||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<DashboardQuickLinks />
|
||||||
|
|
||||||
{initialLoading ? (
|
{initialLoading ? (
|
||||||
<AnalyticsDashboardSkeleton />
|
<AnalyticsDashboardSkeleton />
|
||||||
) : (
|
) : (
|
||||||
@@ -142,14 +144,6 @@ function DashboardComponent() {
|
|||||||
)}
|
)}
|
||||||
</DashboardFramePanel>
|
</DashboardFramePanel>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<DashboardFramePanel
|
|
||||||
title="Быстрые действия"
|
|
||||||
description="Частые переходы к настройке и деплою"
|
|
||||||
contentClassName="p-4"
|
|
||||||
>
|
|
||||||
<DashboardQuickLinks />
|
|
||||||
</DashboardFramePanel>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user