knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[site][showcases][s] Merge examples into Showcases tab

Browse Source
This commit is contained in:
lucasmbispo
2024-10-01 11:07:33 -03:00
parent 86834fd1a6
commit a5d87712e0
9 changed files with 72 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
site/components/Showcases.tsx
View File

@@ -22,11 +22,20 @@ const items = [
sourceUrl: 'https://github.com/FCSCOpendata/frontend',
},
{
title: 'Datahub Open Data',
href: 'https://opendata.datahub.io/',
image: '/images/showcases/datahub.webp',
description: 'Demo Data Portal by DataHub',
title: 'Frictionless Data',
href: 'https://frictionlessdata.io',
repository: 'https://github.com/datopian/datahub/tree/main/examples/dataset-frictionless',
image: '/images/showcases/frictionless-capture.png',
description: 'Open-source toolkit that brings simplicity to the data experience',
},
{
title: "OpenSpending",
image: "/images/showcases/openspending.png",
href: "https://www.openspending.org",
repository: 'https://github.com/datopian/datahub/tree/main/examples/openspending',
description: "Public Financial Data Portal"
},
];
export default function Showcases() {

54
site/components/ShowcasesItem.tsx
View File

@@ -1,10 +1,6 @@
export default function ShowcasesItem({ item }) {
return (
<a
className="rounded overflow-hidden group relative border-1 shadow-lg"
target="_blank"
href={item.href}
>
<div className="rounded overflow-hidden group relative border-1 shadow-lg">
<div
className="bg-cover bg-no-repeat bg-top aspect-video w-full group-hover:blur-sm group-hover:scale-105 transition-all duration-200"
style={{ backgroundImage: `url(${item.image})` }}
@@ -16,9 +12,55 @@ export default function ShowcasesItem({ item }) {
<div className="text-center text-primary-dark">
<span className="text-xl font-semibold">{item.title}</span>
<p className="text-base font-medium">{item.description}</p>
<div className="flex justify-center mt-2 gap-2 ">
{item.repository &&
<a
target="_blank"
rel="noreferrer"
className="w-8 h-8 bg-secondary rounded-full p-1 hover:scale-110 transition cursor-pointer z-50"
href={item.repository}
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
className="w-6 h-6"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23-.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0112 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5"
/>
</svg>
</a>
}
{item.href && (
<a
target="_blank"
className=" text-white w-8 h-8 p-1 bg-primary rounded-full hover:scale-110 transition cursor-pointer z-50"
rel="noreferrer"
href={item.href}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 420 420"
stroke="white"
fill="none"
>
<path stroke-width="26" d="M209,15a195,195 0 1,0 2,0z" />
<path
stroke-width="18"
d="m210,15v390m195-195H15M59,90a260,260 0 0,0 302,0 m0,240 a260,260 0 0,0-302,0M195,20a250,250 0 0,0 0,382 m30,0 a250,250 0 0,0 0-382"
/>
</svg>
</a>
)}
</div>
</div>
</div>
</div>
</a>
</div>
);
}