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

fix: use @comment field instead of title field from krakend.json #8

Open
wants to merge 2 commits into
base: redesign
Choose a base branch
from
Open

fix: use @comment field instead of title field from krakend.json #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
637e3fc
fix: home grid layout
arpban Oct 28, 2024
eac4174
fix: use @comment field instead of title property from krakend.json
anshpayal Oct 28, 2024
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
77 changes: 40 additions & 37 deletions config/krakend/demo-redesign/src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,47 +43,50 @@ const Page: FC<any> = () => {

<main className="section--xl bg-brand-neutral-900 relative">
<div className="container--boxed">
<div className="flex flex-col md:flex-row items-stretch gap-8 justify-between">
<div className="md:w-1/3 ">
<div className="flex items-center gap-1.5 mb-2.5">
<button
className={`px-4 py-2 font-medium rounded-md rounded-l-full ${
currentTab === "use-cases"
? "bg-white text-brand-neutral-900"
: "bg-brand-neutral-600 text-brand-neutral-300"
}`}
onClick={() => setCurrentTab("use-cases")}
>
Use-cases
</button>
<button
className={`px-4 py-2 font-medium rounded-r-full rounded-l-md ${
currentTab === "integrations"
? "bg-white text-brand-neutral-900"
: "bg-brand-neutral-600 text-brand-neutral-300"
}`}
onClick={() => setCurrentTab("integrations")}
>
Integrations
</button>
<div className="grid grid-cols-12 w-full gap-8">
<div className="col-span-12 md:col-span-5 lg:col-span-4 flex">
<div className="max-w-full">
<div className="flex items-center gap-1.5 mb-2.5">
<button
className={`px-4 py-2 font-medium rounded-md rounded-l-full ${
currentTab === "use-cases"
? "bg-white text-brand-neutral-900"
: "bg-brand-neutral-600 text-brand-neutral-300"
}`}
onClick={() => setCurrentTab("use-cases")}
>
Use-cases
</button>
<button
className={`px-4 py-2 font-medium rounded-r-full rounded-l-md ${
currentTab === "integrations"
? "bg-white text-brand-neutral-900"
: "bg-brand-neutral-600 text-brand-neutral-300"
}`}
onClick={() => setCurrentTab("integrations")}
>
Integrations
</button>
</div>
{currentTab === "use-cases" && <UseCases />}
{currentTab === "integrations" && <Integration />}
</div>
{currentTab === "use-cases" && <UseCases />}
{currentTab === "integrations" && <Integration />}
</div>

{/* Line */}
<div
className="h-auto"
style={{
width: "1px",
backgroundImage:
"linear-gradient(to bottom, #0b0c10 0%, #545d78 25%, #545d78 51%, #545d78 75%, #0b0c10 100%)",
}}
/>
{/* Line */}
{/* <div
className="h-auto ml-8 shrink-0"
style={{
width: "1px",
minWidth: 1,
backgroundImage:
"linear-gradient(to bottom, #0b0c10 0%, #545d78 25%, #545d78 51%, #545d78 75%, #0b0c10 100%)",
}}
/> */}
</div>

{/* Diagram */}
<div className="flex-1 flex items-start">
<div className="sticky top-4 w-full max-h-full h-[95vh] flex items-center justify-center">
<div className="col-span-12 md:col-span-7 lg:col-span-8 ">
<div className="sticky top-0 h-screen flex items-center justify-center">
<Architecture />
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion config/krakend/demo-redesign/src/components/Architecture/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ const Architecture = () => (
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 715 910"
fill="none"
className="h-full w-auto"
className=""
>
<rect
width={229}
Expand Down
9 changes: 5 additions & 4 deletions config/krakend/demo-redesign/src/components/Home/UseCases/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import userCases from "@/data/krakend.json";
import Link from "next/link";
import { useEffect, useState } from "react";

const UseCases = () => {
const [useCases, setUseCases] = useState<any>({});

Expand Down Expand Up @@ -52,11 +53,11 @@ const UseCases = () => {
return (
<Link
href={`/use-cases/${useCase.custom_fields.slug}`}
className="text-white text-base p-3 rounded-md hover:outline hover:outline-brand-neutral-300 transition-colors shadow-md"
className="text-white text-base p-3 rounded-md hover:outline hover:outline-brand-neutral-300 transition-colors shadow-md break-words"
key={`${useCase.custom_fields.slug}-${index}`}
style={{ background: "#272B3A" }}
>
{useCase.title}
{useCase["@comment"]}
</Link>
);
})}
Expand All @@ -73,10 +74,10 @@ const UseCases = () => {
<Link
href={`/use-cases/${useCase.custom_fields.slug}`}
key={`others-${useCase.custom_fields.slug}-${index}`}
className="text-white text-base p-3 rounded-md hover:outline hover:outline-brand-neutral-300 transition-colors shadow-md"
className="text-white text-base p-3 rounded-md hover:outline hover:outline-brand-neutral-300 transition-colors shadow-md break-words"
style={{ background: "#272B3A" }}
>
{useCase.title}
{useCase["@comment"]}
</Link>
);
})}
Expand Down