Skip to content

Commit 7c14cb6

Browse files
nidhi-singh02nidhi-singh02
committed
create integration card component and use it
1 parent fe21a0c commit 7c14cb6

File tree

3 files changed

+89
-33
lines changed

3 files changed

+89
-33
lines changed

‎apps/developer-hub/content/docs/express-relay/index.mdx‎

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -20,45 +20,45 @@ Express Relay is a priority auction which enables better orderflow mechanisms th
2020
To integrate with Express Relay, you can integrate as a protocol (to power token swaps) or as a searcher.
2121

2222
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8">
23-
<a href="./integrate-as-protocol" className="block group bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-6 hover:border-gray-300 dark:hover:border-gray-600 transition-colors">
24-
<div className="flex items-center gap-3 mb-3">
25-
<div className="w-8 h-8 rounded-lg bg-blue-100 dark:bg-blue-900 flex items-center justify-center">
26-
<svg className="w-4 h-4 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
27-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
28-
</svg>
29-
</div>
30-
<h3 className="text-lg font-semibold text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400">Integrate as a Protocol</h3>
31-
</div>
32-
<p className="text-gray-600 dark:text-gray-400">Power token swaps and recapture MEV with Express Relay integration</p>
33-
</a>
23+
<IntegrationCard
24+
href="./integrate-as-protocol"
25+
colorScheme="blue"
26+
title="Integrate as a Protocol"
27+
description="Power token swaps and recapture MEV with Express Relay integration"
28+
icon={
29+
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
30+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
31+
</svg>
32+
}
33+
/>
3434

35-
<a href="./integrate-as-searcher" className="block group bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-6 hover:border-gray-300 dark:hover:border-gray-600 transition-colors">
36-
<div className="flex items-center gap-3 mb-3">
37-
<div className="w-8 h-8 rounded-lg bg-green-100 dark:bg-green-900 flex items-center justify-center">
38-
<svg className="w-4 h-4 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
39-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
40-
</svg>
41-
</div>
42-
<h3 className="text-lg font-semibold text-gray-900 dark:text-white group-hover:text-green-600 dark:group-hover:text-green-400">Integrate as a Searcher</h3>
43-
</div>
44-
<p className="text-gray-600 dark:text-gray-400">Access unified orderflow opportunities across DeFi protocols</p>
45-
</a>
35+
<IntegrationCard
36+
href="./integrate-as-searcher"
37+
colorScheme="green"
38+
title="Integrate as a Searcher"
39+
description="Access unified orderflow opportunities across DeFi protocols"
40+
icon={
41+
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
42+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
43+
</svg>
44+
}
45+
/>
4646
</div>
4747

4848
## Learn
4949

5050
To learn more about Express Relay, refer to the following resources:
5151

5252
<div className="mt-8">
53-
<a href="./how-express-relay-works" className="block group bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-6 hover:border-gray-300 dark:hover:border-gray-600 transition-colors">
54-
<div className="flex items-center gap-3 mb-3">
55-
<div className="w-8 h-8 rounded-lg bg-purple-100 dark:bg-purple-900 flex items-center justify-center">
56-
<svg className="w-4 h-4 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
57-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
58-
</svg>
59-
</div>
60-
<h3 className="text-lg font-semibold text-gray-900 dark:text-white group-hover:text-purple-600 dark:group-hover:text-purple-400">How Express Relay Works</h3>
61-
</div>
62-
<p className="text-gray-600 dark:text-gray-400">Understand the mechanics behind Express Relay's priority auction system</p>
63-
</a>
53+
<IntegrationCard
54+
href="./how-express-relay-works"
55+
colorScheme="purple"
56+
title="How Express Relay Works"
57+
description="Understand the mechanics behind Express Relay's priority auction system"
58+
icon={
59+
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
60+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
61+
</svg>
62+
}
63+
/>
6464
</div>

‎apps/developer-hub/src/components/IntegrationCard/index.tsx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
interface IntegrationCardProps {
2+
href: string;
3+
icon: React.ReactNode;
4+
title: string;
5+
description: string;
6+
colorScheme?: 'blue' | 'green' | 'purple';
7+
}
8+
9+
export const IntegrationCard = ({
10+
href,
11+
icon,
12+
title,
13+
description,
14+
colorScheme = 'blue'
15+
}: IntegrationCardProps) => {
16+
const colorClasses = {
17+
blue: {
18+
bg: 'bg-blue-100 dark:bg-blue-900',
19+
text: 'text-blue-600 dark:text-blue-400',
20+
hoverText: 'group-hover:text-blue-600 dark:group-hover:text-blue-400'
21+
},
22+
green: {
23+
bg: 'bg-green-100 dark:bg-green-900',
24+
text: 'text-green-600 dark:text-green-400',
25+
hoverText: 'group-hover:text-green-600 dark:group-hover:text-green-400'
26+
},
27+
purple: {
28+
bg: 'bg-purple-100 dark:bg-purple-900',
29+
text: 'text-purple-600 dark:text-purple-400',
30+
hoverText: 'group-hover:text-purple-600 dark:group-hover:text-purple-400'
31+
}
32+
};
33+
34+
const colors = colorClasses[colorScheme];
35+
36+
return (
37+
<a
38+
href={href}
39+
className="block group bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-6 hover:border-gray-300 dark:hover:border-gray-600 transition-colors"
40+
>
41+
<div className="flex items-center gap-3 mb-3">
42+
<div className={`w-8 h-8 rounded-lg ${colors.bg} flex items-center justify-center`}>
43+
<div className={`w-4 h-4 ${colors.text}`}>
44+
{icon}
45+
</div>
46+
</div>
47+
<h3 className={`text-lg font-semibold text-gray-900 dark:text-white ${colors.hoverText}`}>
48+
{title}
49+
</h3>
50+
</div>
51+
<p className="text-gray-600 dark:text-gray-400">{description}</p>
52+
</a>
53+
);
54+
};

‎apps/developer-hub/src/mdx-components.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { InfoBox } from "@pythnetwork/component-library/InfoBox";
22
import { Tab, Tabs } from "fumadocs-ui/components/tabs";
33
import defaultMdxComponents from "fumadocs-ui/mdx";
44
import type { MDXComponents } from "mdx/types";
5+
import { IntegrationCard } from "./components/IntegrationCard";
56

67
export function getMDXComponents(components?: MDXComponents): MDXComponents {
78
return {
@@ -12,5 +13,6 @@ export function getMDXComponents(components?: MDXComponents): MDXComponents {
1213
InfoBox: InfoBox,
1314
// Fuma has a Callout component in `defaultMdxComponents` which we still want to overwrite
1415
Callout: InfoBox,
16+
IntegrationCard,
1517
};
1618
}

0 commit comments

Comments
 (0)