Skip to content

Commit b6cd98e

Browse files
seiyan-writerseiyan-writer
authored
Merge pull request #146 from sei-protocol/feat/docs-revamp-layout
feat: new docs structure (1/n)
2 parents 4611a5c + d8fa607 commit b6cd98e

File tree

520 files changed

+966
-368
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

520 files changed

+966
-368
lines changed

‎components/DocCard/DocCard.tsx

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { ExternalLinkIcon } from 'lucide-react';
2+
import Image from 'next/image';
3+
4+
interface DocCardProps {
5+
doc: {
6+
name: string;
7+
logo?: {
8+
url: string;
9+
alt: string;
10+
};
11+
link: string;
12+
'short-description': string;
13+
};
14+
}
15+
16+
const DocCard = ({ doc }: DocCardProps) => {
17+
const { name, logo, link, 'short-description': shortDescription } = doc;
18+
19+
return (
20+
<div className="group flex flex-col bg-gray-50 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300">
21+
<div className="relative w-full h-48 bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
22+
{logo ? (
23+
<Image src={logo.url} alt={logo.alt} layout="fill" objectFit="cover" className="transition-all duration-300 ease-in-out group-hover:scale-110" />
24+
) : (
25+
<span className="text-gray-400">No image available</span>
26+
)}
27+
</div>
28+
<div className="p-4 flex flex-col flex-grow">
29+
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">{name}</h3>
30+
<p className="text-sm text-gray-600 dark:text-gray-400 mb-4">{shortDescription}</p>
31+
<div className="mt-auto">
32+
<a
33+
href={link}
34+
target="_blank"
35+
rel="noopener noreferrer"
36+
className="text-blue-600 dark:text-blue-400 inline-flex items-center font-medium hover:underline"
37+
>
38+
Learn more <ExternalLinkIcon className="ml-2 w-4 h-4" />
39+
</a>
40+
</div>
41+
</div>
42+
</div>
43+
);
44+
};
45+
46+
export default DocCard;

‎components/DocCard/DocCardsGrid.tsx

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import DocCard from './DocCard';
2+
3+
const DocCardsGrid = ({ data = [] }) => {
4+
if (!Array.isArray(data)) {
5+
console.error("Expected an array for data but received:", data);
6+
return null;
7+
}
8+
9+
return (
10+
<div className="container mx-auto px-4">
11+
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">
12+
{data.map((doc) => (
13+
<DocCard key={doc.id} doc={doc} />
14+
))}
15+
</div>
16+
</div>
17+
);
18+
};
19+
20+
export default DocCardsGrid;

‎data/advancedData.ts

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
export const advancedData = [
2+
{
3+
id: 1,
4+
name: "foo",
5+
link: "#",
6+
'short-description': "Learn how to.",
7+
logo: {
8+
url: "/assets/sei_symbol_gradient.png",
9+
},
10+
},
11+
{
12+
id: 2,
13+
name: "bar",
14+
link: "#",
15+
'short-description': "Learn how to.",
16+
logo: {
17+
url: "/assets/sei_symbol_gradient.png",
18+
},
19+
},
20+
{
21+
id: 3,
22+
name: "baz",
23+
link: "#",
24+
'short-description': "Learn how to.",
25+
logo: {
26+
url: "/assets/sei_symbol_gradient.png",
27+
},
28+
},
29+
{
30+
id: 4,
31+
name: "foo",
32+
link: "#",
33+
'short-description': "Learn how to.",
34+
logo: {
35+
url: "/assets/sei_symbol_gradient.png",
36+
},
37+
},
38+
{
39+
id: 5,
40+
name: "bar",
41+
link: "#",
42+
'short-description': "Learn how to.",
43+
logo: {
44+
url: "/assets/sei_symbol_gradient.png",
45+
},
46+
},
47+
{
48+
id: 6,
49+
name: "baz",
50+
link: "#",
51+
'short-description': "Learn how to.",
52+
logo: {
53+
url: "/assets/sei_symbol_gradient.png",
54+
},
55+
},
56+
{
57+
id: 7,
58+
name: "foo",
59+
link: "#",
60+
'short-description': "Learn how to.",
61+
logo: {
62+
url: "/assets/sei_symbol_gradient.png",
63+
},
64+
},
65+
{
66+
id: 8,
67+
name: "bar",
68+
link: "#",
69+
'short-description': "Learn how to.",
70+
logo: {
71+
url: "/assets/sei_symbol_gradient.png",
72+
},
73+
},
74+
{
75+
id: 9,
76+
name: "baz",
77+
link: "#",
78+
'short-description': "Learn how to.",
79+
logo: {
80+
url: "/assets/sei_symbol_gradient.png",
81+
},
82+
},
83+
];

‎data/beginnerData.ts

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
export const beginnerData = [
2+
{
3+
id: 1,
4+
name: "1. Overview",
5+
link: "/start/overview",
6+
'short-description': "Learn about the basics of the Sei Network.",
7+
logo: {
8+
url: "/assets/sei_symbol_gradient.png",
9+
},
10+
},
11+
{
12+
id: 2,
13+
name: "2. Connect to Sei",
14+
link: "/start/user-quickstart",
15+
'short-description': "Quickly get started with the Sei Network.",
16+
logo: {
17+
url: "/assets/sei_symbol_gradient.png",
18+
},
19+
},
20+
{
21+
id: 3,
22+
name: "3. Installing seid CLI",
23+
link: "/build/installing-seid",
24+
'short-description': "Set up the seid CLI to interact with the Sei Network.",
25+
logo: {
26+
url: "/assets/sei_symbol_gradient.png",
27+
},
28+
},
29+
{
30+
id: 4,
31+
name: "4. Setting Up Local Chains",
32+
link: "/start/dev-chains",
33+
'short-description': "Instructions on setting up local chains for development.",
34+
logo: {
35+
url: "/assets/sei_symbol_gradient.png",
36+
},
37+
},
38+
{
39+
id: 5,
40+
name: "5. Understanding Token Standards",
41+
link: "/start/dev-token-standards",
42+
'short-description': "Dive into token standards on the Sei Network.",
43+
logo: {
44+
url: "/assets/sei_symbol_gradient.png",
45+
},
46+
},
47+
{
48+
id: 6,
49+
name: "6. Understanding Gas",
50+
link: "/start/dev-gas",
51+
'short-description': "Learn about gas and how it works in Sei.",
52+
logo: {
53+
url: "/assets/sei_symbol_gradient.png",
54+
},
55+
},
56+
{
57+
id: 7,
58+
name: "7. Deploying Your First Smart Contract",
59+
link: "/start/dev-smart-contracts",
60+
'short-description': "Step-by-step guide to deploying a smart contract.",
61+
logo: {
62+
url: "/assets/sei_symbol_gradient.png",
63+
},
64+
},
65+
{
66+
id: 8,
67+
name: "8. Building a Simple Frontend",
68+
link: "/build/building-a-frontend",
69+
'short-description': "Learn how to build a simple frontend for your dApp.",
70+
logo: {
71+
url: "/assets/sei_symbol_gradient.png",
72+
},
73+
},
74+
{
75+
id: 9,
76+
name: "9. Testing and Debugging Smart Contracts",
77+
link: "/start/dev-testing-debugging",
78+
'short-description': "Learn how to test and debug your smart contracts.",
79+
logo: {
80+
url: "/assets/sei_symbol_gradient.png",
81+
},
82+
}
83+
];

‎data/docsData.ts

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
export const docsData = [
2+
{
3+
id: 1,
4+
name: "foo",
5+
logo: {
6+
url: "/assets/sei_symbol_gradient.png",
7+
},
8+
link: "/docs/deploy-contract",
9+
'short-description': "Learn how to.",
10+
},
11+
{
12+
id: 2,
13+
name: "bar",
14+
logo: {
15+
url: "/assets/sei_symbol_gradient.png",
16+
},
17+
link: "/docs/setup-node",
18+
'short-description': "Learn how to.",
19+
},
20+
{
21+
id: 3,
22+
name: "baz",
23+
logo: {
24+
url: "/assets/sei_symbol_gradient.png",
25+
},
26+
link: "/docs/stake-tokens",
27+
'short-description': "Learn how to.",
28+
},
29+
{
30+
id: 4,
31+
name: "foo",
32+
logo: {
33+
url: "/assets/sei_symbol_gradient.png",
34+
},
35+
link: "/docs/deploy-contract",
36+
'short-description': "Learn how to.",
37+
},
38+
{
39+
id: 5,
40+
name: "bar",
41+
logo: {
42+
url: "/assets/sei_symbol_gradient.png",
43+
},
44+
link: "/docs/setup-node",
45+
'short-description': "Learn how to.",
46+
},
47+
{
48+
id: 6,
49+
name: "baz",
50+
logo: {
51+
url: "/assets/sei_symbol_gradient.png",
52+
},
53+
link: "/docs/stake-tokens",
54+
'short-description': "Learn how to.",
55+
},
56+
];

‎data/intermediateData.ts

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
export const intermediateData = [
2+
{
3+
id: 1,
4+
name: "1. Working with EVM Contracts",
5+
link: "/build/evm-general",
6+
'short-description': "Discover how to interact with EVM contracts on the Sei Network.",
7+
logo: {
8+
url: "/assets/sei_symbol_gradient.png",
9+
},
10+
},
11+
{
12+
id: 2,
13+
name: "2. Working with CosmWasm Contracts",
14+
link: "/build/cosmwasm-general",
15+
'short-description': "Learn how to work with CosmWasm contracts on the Sei Network.",
16+
logo: {
17+
url: "/assets/sei_symbol_gradient.png",
18+
},
19+
},
20+
{
21+
id: 3,
22+
name: "3. Setting Up Multi-Sig Accounts",
23+
link: "/build/multi-sig-accounts",
24+
'short-description': "Learn how to set up multi-sig accounts for secure operations.",
25+
logo: {
26+
url: "/assets/sei_symbol_gradient.png",
27+
},
28+
},
29+
{
30+
id: 4,
31+
name: "4. Achieving Interoperability Between VMs",
32+
link: "/start/dev-interoperability",
33+
'short-description': "Guide to interoperability between VMs on the Sei Network.",
34+
logo: {
35+
url: "/assets/sei_symbol_gradient.png",
36+
},
37+
},
38+
{
39+
id: 5,
40+
name: "5. Interoperability with IBC",
41+
link: "/build/ibc-protocol",
42+
'short-description': "Learn how to achieve interoperability with the IBC protocol.",
43+
logo: {
44+
url: "/assets/sei_symbol_gradient.png",
45+
},
46+
},
47+
{
48+
id: 6,
49+
name: "6. Managing Transactions",
50+
link: "/start/dev-transactions",
51+
'short-description': "Learn about managing and optimizing transactions.",
52+
logo: {
53+
url: "/assets/sei_symbol_gradient.png",
54+
},
55+
},
56+
{
57+
id: 7,
58+
name: "7. Configuring a Node",
59+
link: "/node/node-configuration",
60+
'short-description': "Instructions on setting up and configuring a developer node.",
61+
logo: {
62+
url: "/assets/sei_symbol_gradient.png",
63+
},
64+
},
65+
{
66+
id: 8,
67+
name: "8. Advanced Querying and State Management",
68+
link: "/start/dev-querying-state",
69+
'short-description': "Guide to querying and managing state efficiently.",
70+
logo: {
71+
url: "/assets/sei_symbol_gradient.png",
72+
},
73+
},
74+
{
75+
id: 9,
76+
name: "9. Deploying and Testing Smart Contracts",
77+
link: "/build/smart-contract-deployment-testing",
78+
'short-description': "Learn how to deploy and test smart contracts effectively.",
79+
logo: {
80+
url: "/assets/sei_symbol_gradient.png",
81+
},
82+
}
83+
];

0 commit comments

Comments
 (0)