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.

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

awm -> icm #1971

Merged
merged 3 commits into from
Dec 16, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
255 changes: 141 additions & 114 deletions components/navigation/navigation.tsx
Original file line number Diff line number Diff line change
@@ -1,249 +1,276 @@
import { IndentDecrease, Layers, MailIcon, MonitorCheck, Settings, SproutIcon, SquareGanttChart, TerminalIcon, Webhook, SquareIcon, ArrowLeftRight, Coins, SquareCode, SquareStackIcon, Triangle, ChevronDownIcon, Pyramid, HandCoins, Server, Code, TrendingUp, ScanFace, Telescope, LayoutTemplate, Building2, BookOpen, Podcast, Wallet } from 'lucide-react';
import { RootToggle } from 'fumadocs-ui/components/layout/root-toggle';
import {
IndentDecrease,
Layers,
MailIcon,
MonitorCheck,
Settings,
SproutIcon,
SquareGanttChart,
TerminalIcon,
Webhook,
SquareIcon,
ArrowLeftRight,
Coins,
SquareCode,
SquareStackIcon,
Triangle,
ChevronDownIcon,
Pyramid,
HandCoins,
Server,
Code,
TrendingUp,
ScanFace,
Telescope,
LayoutTemplate,
Building2,
BookOpen,
Podcast,
Wallet,
} from "lucide-react";
import { RootToggle } from "fumadocs-ui/components/layout/root-toggle";

interface Option {
title: string
description: string
icon: React.ReactNode
url: string
title: string;
description: string;
icon: React.ReactNode;
url: string;
}

interface DocsDropdownProps {
buttonStyle?: "Docs" | "currentElement";
}

export function DocsDropdown({ buttonStyle = "Docs" }: DocsDropdownProps): React.ReactElement {
export function DocsDropdown({
buttonStyle = "Docs",
}: DocsDropdownProps): React.ReactElement {
const options: Option[] = [
...(buttonStyle === "Docs" ? [{
title: 'Docs',
description: '',
icon: <></>,
url: '',
}] : []),
{
title: 'Avalanche Protocol',
description: 'Learn about Avalanche',
...(buttonStyle === "Docs"
? [
{
title: "Docs",
description: "",
icon: <></>,
url: "",
},
]
: []),
{
title: "Avalanche Protocol",
description: "Learn about Avalanche",
icon: <SproutIcon />,
url: '/learn',
url: "/learn",
},
{
title: 'Smart Contracts',
description: 'Build Apps on Avalanche',
title: "Smart Contracts",
description: "Build Apps on Avalanche",
icon: <SquareGanttChart />,
url: '/dapps',
url: "/dapps",
},
{
title: 'Avalanche L1s',
description: 'Build Your L1 Blockchain',
title: "Avalanche L1s",
description: "Build Your L1 Blockchain",
icon: <Layers />,
url: '/avalanche-l1s',
url: "/avalanche-l1s",
},
{
title: 'EVM Customization',
description: 'Customize the Ethereum VM',
title: "EVM Customization",
description: "Customize the Ethereum VM",
icon: <Pyramid />,
url: '/evm-l1s',
url: "/evm-l1s",
},
{
title: 'Custom Virtual Machines',
description: 'Customize Your Execution Layer',
title: "Custom Virtual Machines",
description: "Customize Your Execution Layer",
icon: <IndentDecrease />,
url: '/virtual-machines',
url: "/virtual-machines",
},
{
title: 'Nodes & Validators',
description: 'Participate in the Network',
title: "Nodes & Validators",
description: "Participate in the Network",
icon: <MonitorCheck />,
url: '/nodes',
url: "/nodes",
},
{
title: 'Interoperability',
description: 'AWM and Teleporter',
title: "Interoperability",
description: "ICM and ICM Contracts",
icon: <MailIcon />,
url: '/cross-chain',
url: "/cross-chain",
},
{
title: 'Tooling',
description: 'CLI, Scripts, and More',
title: "Tooling",
description: "CLI, Scripts, and More",
icon: <Settings />,
url: '/tooling',
url: "/tooling",
},
{
title: 'API Docs',
description: 'Avalanche API References',
title: "API Docs",
description: "Avalanche API References",
icon: <Webhook />,
url: '/api-reference',
}
url: "/api-reference",
},
];

return (
<RootToggle options={options} />
);

return <RootToggle options={options} />;
}

export function AcademyDropdown() {
const options: Option[] = [
{
title: 'Courses',
description: '',
title: "Courses",
description: "",
icon: <></>,
url: '',
url: "",
},
{
title: 'Blockchain Fundamentals',
description: 'Understand fundamental blockchain concepts.',
title: "Blockchain Fundamentals",
description: "Understand fundamental blockchain concepts.",
icon: <SquareIcon className="w-5 h-5" />,
url: 'https://academy.avax.network/course/blockchain-fundamentals',
url: "https://academy.avax.network/course/blockchain-fundamentals",
},
{
title: 'Avalanche Fundamentals',
description: 'Overview of Avalanche Consensus, L1s, and VMs.',
title: "Avalanche Fundamentals",
description: "Overview of Avalanche Consensus, L1s, and VMs.",
icon: <Triangle className="w-5 h-5" />,
url: 'https://academy.avax.network/course/avalanche-fundamentals',
url: "https://academy.avax.network/course/avalanche-fundamentals",
},
{
title: "Multi-Chain Architecture",
description: 'Deploy your own blockchain with multi-chain architecture.',
description: "Deploy your own blockchain with multi-chain architecture.",
icon: <SquareStackIcon className="w-5 h-5" />,
url: 'https://academy.avax.network/course/multi-chain-architecture',
url: "https://academy.avax.network/course/multi-chain-architecture",
},
{
title: "Interchain Messaging",
description: 'Build cross-chain dApps on Avalanche.',
description: "Build cross-chain dApps on Avalanche.",
icon: <MailIcon className="w-5 h-5" />,
url: 'https://academy.avax.network/course/interchain-messaging',
url: "https://academy.avax.network/course/interchain-messaging",
},
{
title: "Interchain Token Transfer",
description: 'Transfer assets between Avalanche blockchains.',
description: "Transfer assets between Avalanche blockchains.",
icon: <ArrowLeftRight className="w-5 h-5" />,
url: 'https://academy.avax.network/course/interchain-token-transfer',
url: "https://academy.avax.network/course/interchain-token-transfer",
},
{
title: "Customizing the EVM",
description: 'Add custom precompiles to the EVM.',
description: "Add custom precompiles to the EVM.",
icon: <SquareCode className="w-5 h-5" />,
url: 'https://academy.avax.network/course/customizing-evm',
url: "https://academy.avax.network/course/customizing-evm",
},
{
title: "Layer 1 Tokenomics",
description: 'Design tokenomics for your Avalanche L1.',
description: "Design tokenomics for your Avalanche L1.",
icon: <Coins className="w-5 h-5" />,
url: 'https://academy.avax.network/course/l1-tokenomics',
url: "https://academy.avax.network/course/l1-tokenomics",
},
{
title: "AvaCloud APIs",
description: 'Use AvaCloud APIs to build web apps.',
description: "Use AvaCloud APIs to build web apps.",
icon: <Webhook className="w-5 h-5" />,
url: 'https://academy.avax.network/course/avacloudapis',
url: "https://academy.avax.network/course/avacloudapis",
},
{
title: "HyperSDK",
description: 'Build high-performance blockchains with HyperSDK.',
description: "Build high-performance blockchains with HyperSDK.",
icon: <TerminalIcon className="w-5 h-5" />,
url: 'https://academy.avax.network/course/hypersdk',
}
url: "https://academy.avax.network/course/hypersdk",
},
];
return (
<RootToggle options={options} />
)
return <RootToggle options={options} />;
}

export function GrantsDropdown() {
const options: Option[] = [
{
title: 'Grants & Programs',
description: '',
title: "Grants & Programs",
description: "",
icon: <></>,
url: '/grants',
url: "/grants",
},
{
title: 'Retro9000',
description: 'Build publicly and get rewarded.',
title: "Retro9000",
description: "Build publicly and get rewarded.",
icon: <HandCoins className="w-5 h-5" />,
url: 'https://www.avax.network/retro9000',
url: "https://www.avax.network/retro9000",
},
{
title: 'infraBUIDL()',
description: 'Infrastructure projects that enhance user and developer experience',
title: "infraBUIDL()",
description:
"Infrastructure projects that enhance user and developer experience",
icon: <Server className="w-5 h-5" />,
url: 'https://www.avax.network/infrabuidl-program',
url: "https://www.avax.network/infrabuidl-program",
},
{
title: 'Codebase',
description: 'Transforming ambitious builders into extraordinary founders',
title: "Codebase",
description:
"Transforming ambitious builders into extraordinary founders",
icon: <Code className="w-5 h-5" />,
url: 'https://codebase.avax.network/',
url: "https://codebase.avax.network/",
},
{
title: 'Blizzard Fund',
description: 'VC fund investing in innovative entrepreneurs driving growth on Avalanche',
title: "Blizzard Fund",
description:
"VC fund investing in innovative entrepreneurs driving growth on Avalanche",
icon: <TrendingUp className="w-5 h-5" />,
url: 'https://www.blizzard.fund/',
url: "https://www.blizzard.fund/",
},

];
return (
<RootToggle options={options} />
)
return <RootToggle options={options} />;
}

export function IntegrationsDropdown() {
const options: Option[] = [
{
title: 'Integrations',
description: '',
title: "Integrations",
description: "",
icon: <></>,
url: '/integrations',
url: "/integrations",
},
{
title: 'Account Abstraction',
title: "Account Abstraction",
description: "",
icon: <ScanFace className="w-5 h-5" />,
url: '/integrations#Account%20Abstraction',
url: "/integrations#Account%20Abstraction",
},
{
title: 'Block Explorers',
title: "Block Explorers",
description: "",
icon: <Telescope className="w-5 h-5" />,
url: '/integrations#Block%20Explorers',
url: "/integrations#Block%20Explorers",
},
{
title: 'Blockchain as a Service',
title: "Blockchain as a Service",
description: "",
icon: <LayoutTemplate className="w-5 h-5" />,
url: '/integrations#Blockchain%20as%20a%20Service',
url: "/integrations#Blockchain%20as%20a%20Service",
},
{
title: 'Enterprise Solutions',
title: "Enterprise Solutions",
description: "",
icon: <Building2 className="w-5 h-5" />,
url: '/integrations#Enterprise%20Solutions',
url: "/integrations#Enterprise%20Solutions",
},
{
title: 'Indexers',
title: "Indexers",
description: "",
icon: <BookOpen className="w-5 h-5" />,
url: '/integrations#Indexers',
url: "/integrations#Indexers",
},
{
title: 'Oracles',
title: "Oracles",
description: "",
icon: <Podcast className="w-5 h-5" />,
url: '/integrations#Oracles',
url: "/integrations#Oracles",
},
{
title: 'Wallets',
title: "Wallets",
description: "",
icon: <Wallet className="w-5 h-5" />,
url: '/integrations#Wallet%20SDKs',
url: "/integrations#Wallet%20SDKs",
},

];
return (
<RootToggle options={options} />
)
return <RootToggle options={options} />;
}

export function DropDownBar(): React.ReactElement {
Expand All @@ -263,4 +290,4 @@ export function DropDownBar(): React.ReactElement {
</div>
</div>
);
}
}
Loading
Loading