Skip to content
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

added new layout for projects page #658

Merged
merged 1 commit into from
Feb 5, 2025
Merged

added new layout for projects page #658

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
2 changes: 2 additions & 0 deletions insights-ui/src/app/crowd-funding/projects/[projectId]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import React from 'react';
import Breadcrumbs from '@/components/ui/Breadcrumbs';
import PageWrapper from '@dodao/web-core/components/core/page/PageWrapper';
import ProjectDetailPage from '@/components/projects/ProjectDetailPage';
import NewProjectDetailPage from '@/components/projects/NewProductDeatilPage';

export default async function ProjectDetailPageWrapper({ params }: { params: Promise<{ projectId: string }> }) {
const { projectId } = await params;
Expand All @@ -25,6 +26,7 @@ export default async function ProjectDetailPageWrapper({ params }: { params: Pro
return (
<PageWrapper>
<Breadcrumbs breadcrumbs={breadcrumbs} />
<NewProjectDetailPage projectId={projectId} initialProjectDetails={data.projectDetails} spiderGraph={spiderGraph} />
<ProjectDetailPage projectId={projectId} initialProjectDetails={data.projectDetails} spiderGraph={spiderGraph} />
</PageWrapper>
);
Expand Down
103 changes: 103 additions & 0 deletions insights-ui/src/components/projects/NewProductDeatilPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
import { ArrowPathIcon, CloudArrowUpIcon, FingerPrintIcon, LockClosedIcon } from '@heroicons/react/24/outline';
import RadarChart from '../ui/RadarChart';
import { ProjectDetails, SpiderGraph } from '@/types/project/project';

const features = [
{
name: 'Push to deploy',
description: 'Morbi viverra dui mi arcu sed. Tellus semper adipiscing suspendisse semper morbi. Odio urna massa nunc massa.',
icon: CloudArrowUpIcon,
},
{
name: 'SSL certificates',
description: 'Sit quis amet rutrum tellus ullamcorper ultricies libero dolor eget. Sem sodales gravida quam turpis enim lacus amet.',
icon: LockClosedIcon,
},
{
name: 'Simple queues',
description: 'Quisque est vel vulputate cursus. Risus proin diam nunc commodo. Lobortis auctor congue commodo diam neque.',
icon: ArrowPathIcon,
},
{
name: 'Advanced security',
description: 'Arcu egestas dolor vel iaculis in ipsum mauris. Tincidunt mattis aliquet hac quis. Id hac maecenas ac donec pharetra eget.',
icon: FingerPrintIcon,
},
];
interface ProjectDetailPageProps {
projectId: string;
initialProjectDetails: ProjectDetails;
spiderGraph: SpiderGraph | null;
}

export default function NewProjectDetailPage({ projectId, initialProjectDetails, spiderGraph }: ProjectDetailPageProps) {
return (
<div className="py-24 sm:py-32 text-color">
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<div className="mx-auto lg:text-center">
<p className="mt-2 text-pretty text-4xl font-semibold tracking-tight sm:text-5xl lg:text-balance">{initialProjectDetails.name}</p>
{spiderGraph && (
<>
<div className="max-w-lg mx-auto">
<RadarChart data={spiderGraph} />
</div>
<div className="mt-6 border-t border-gray-100">
<dl className="divide-y text-color">
<div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt className="text-sm/6 font-medium ">Crowd Funding Link</dt>
<dd className="mt-1 text-sm/6 sm:col-span-2 sm:mt-0">{initialProjectDetails.projectInfoInput.crowdFundingUrl}</dd>
</div>
<div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt className="text-sm/6 font-medium ">Website Link</dt>
<dd className="mt-1 text-sm/6 sm:col-span-2 sm:mt-0">{initialProjectDetails.projectInfoInput.websiteUrl}</dd>
</div>
<div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt className="text-sm/6 font-medium ">SEC Filing Link</dt>
<dd className="mt-1 text-sm/6 sm:col-span-2 sm:mt-0">{initialProjectDetails.projectInfoInput.secFilingUrl}</dd>
</div>
{initialProjectDetails.projectInfoInput.additionalUrls && (
<div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt className="text-sm/6 font-medium ">Additional Links</dt>
{initialProjectDetails.projectInfoInput.additionalUrls.map((url, index) => (
<dd key={index} className="mt-1 text-sm/6 sm:col-span-2 sm:mt-0">
{url}
</dd>
))}
</div>
)}
</dl>
</div>
<div className="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-4xl">
<dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-10 lg:max-w-none lg:grid-cols-2 lg:gap-y-16">
{Object.entries(spiderGraph).map(([key, values]) => (
<div key={key} className="relative pl-16">
<dt className="text-base/7 font-semibold">
<div className="absolute left-0 top-0 flex size-10 items-center justify-center heading-color rounded-lg">
{/* Placeholder for Icon (you can replace with actual icons) */}
<span aria-hidden="true" className="size-6">
📊
</span>
</div>
{key.replace(/([A-Z])/g, ' $1').replace(/^./, (str) => str.toUpperCase())}
</dt>
<dd className="mt-2 text-base/7 text-color">
<ul className="list-disc pl-5">
{values.map((item, index) => (
<li key={index} className="mb-1 flex items-start">
<span className="mr-2">{item.score === 1 ? '✅' : '❌'}</span>
<span>{item.comment}</span>
</li>
))}
</ul>
</dd>
</div>
))}
</dl>
</div>
</>
)}
</div>
</div>
</div>
);
}