mazyar/tm_panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(tender-details): update ShowcaseSection styling for improved layout consistency

Browse Source 
- Replaced TIMELINE_SHOWCASE with SHOWCASE_CENTERED_BODY for better vertical alignment of content in ShowcaseSection components.
- Ensured consistent styling across various sections including Tender ID, Buyer organization, and timeline details.
This commit is contained in:
AmirReza Jamali
2026-05-02 13:04:56 +03:30
parent 88f9605748
commit 04bdb7bf0d
1 changed files with 21 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/tenders/[details]/page.tsx
+21 -13
View File
@@ -49,10 +49,11 @@ function ExternalLinkIcon({ className }: { className?: string }) {
);
}
/** Grid row stretch: center value vertically under the title */
const TIMELINE_SHOWCASE = {
/** Body area only: center content in the card; ShowcaseSection `title` is unchanged */
const SHOWCASE_CENTERED_BODY = {
rootClassName: "flex h-full min-h-0 flex-col",
className: "flex min-h-0 flex-1 flex-col justify-center",
className:
"flex min-h-0 flex-1 flex-col items-center justify-center text-center",
} as const;
const TenderDetails = ({ params }: IProps) => {
@@ -134,23 +135,30 @@ const TenderDetails = ({ params }: IProps) => {
<div>
<SectionHeading>Procurement</SectionHeading>
<div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5">
<ShowcaseSection title="Tender ID">
<ShowcaseSection title="Tender ID" {...SHOWCASE_CENTERED_BODY}>
<span className="font-medium text-dark dark:text-white">{tender.tender_id}</span>
</ShowcaseSection>
<ShowcaseSection title="Buyer organization" className="sm:col-span-2 xl:col-span-1 2xl:col-span-2">
<ShowcaseSection
title="Buyer organization"
rootClassName={SHOWCASE_CENTERED_BODY.rootClassName}
className={cn(
"sm:col-span-2 xl:col-span-1 2xl:col-span-2",
SHOWCASE_CENTERED_BODY.className,
)}
>
<span className="font-medium text-dark dark:text-white">
{tender.buyer_organization.name}
</span>
</ShowcaseSection>
<ShowcaseSection title="Notice publication ID">
<ShowcaseSection title="Notice publication ID" {...SHOWCASE_CENTERED_BODY}>
<span className="font-medium text-dark dark:text-white">
{tender.notice_publication_id}
</span>
</ShowcaseSection>
<ShowcaseSection title="Procedure code">
<ShowcaseSection title="Procedure code" {...SHOWCASE_CENTERED_BODY}>
<span className="font-medium text-dark dark:text-white">{tender.procedure_code}</span>
</ShowcaseSection>
<ShowcaseSection title="Procurement type">
<ShowcaseSection title="Procurement type" {...SHOWCASE_CENTERED_BODY}>
<span className="font-medium text-dark dark:text-white">
{tender.procurement_type_code}
</span>
@@ -161,28 +169,28 @@ const TenderDetails = ({ params }: IProps) => {
<div>
<SectionHeading>Timeline</SectionHeading>
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5">
<ShowcaseSection title="Application deadline" {...TIMELINE_SHOWCASE}>
<ShowcaseSection title="Application deadline" {...SHOWCASE_CENTERED_BODY}>
<time className="font-medium tabular-nums text-dark dark:text-white">
{msToDate(tender.application_deadline ?? 0)}
</time>
</ShowcaseSection>
<ShowcaseSection title="Publication date" {...TIMELINE_SHOWCASE}>
<ShowcaseSection title="Publication date" {...SHOWCASE_CENTERED_BODY}>
<time className="font-medium tabular-nums text-dark dark:text-white">
{msToDate(tender.publication_date ?? 0)}
</time>
</ShowcaseSection>
<ShowcaseSection title="Submission deadline" {...TIMELINE_SHOWCASE}>
<ShowcaseSection title="Submission deadline" {...SHOWCASE_CENTERED_BODY}>
<time className="font-medium tabular-nums text-dark dark:text-white">
{msToDate(tender.submission_deadline ?? 0)}
</time>
</ShowcaseSection>
<ShowcaseSection title="Tender deadline" {...TIMELINE_SHOWCASE}>
<ShowcaseSection title="Tender deadline" {...SHOWCASE_CENTERED_BODY}>
<time className="font-medium tabular-nums text-dark dark:text-white">
{msToDate(tender.tender_deadline ?? 0)}
</time>
</ShowcaseSection>
{submissionUrl && (
<ShowcaseSection title="Submission URL" {...TIMELINE_SHOWCASE}>
<ShowcaseSection title="Submission URL" {...SHOWCASE_CENTERED_BODY}>
<Link
href={submissionUrl}
target="_blank"