diff --git a/.gitignore b/.gitignore index 1868bb9..ff45eea 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ .next node_modules .idea/* -.DS_Store \ No newline at end of file +.DS_Store +.vscode \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..a6a3f3b --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,55 @@ +{ + "files.associations": { + "*.mdx": "markdown", + "*.md": "markdown" + }, + "markdown.mdxParser": "gatsby", + "markdown.preview.mdxExtensions": true, + "markdown.preview.mdxOptions": { + "remarkPlugins": [ + "remark-slug", + "remark-autolink-headings" + ], + "rehypePlugins": [ + "rehype-slug", + "rehype-autolink-headings" + ] + }, + "emmet.includeLanguages": { + "mdx": "javascriptreact" + }, + "emmet.syntaxProfiles": { + "mdx": "jsx" + }, + "emmet.triggerExpansionOnTab": true, + "emmet.showSuggestionsAsSnippets": true, + "emmet.showExpandedAbbreviation": "always", + "emmet.optimizeStylesheetParsing": true, + "emmet.preferences": { + "jsx.singleQuote": true + }, + "eslint.validate": [ + "javascript", + "javascriptreact", + "typescript", + "typescriptreact", + "mdx" + ], + "eslint.options": { + "extensions": [".js", ".jsx", ".ts", ".tsx", ".mdx"] + }, + "eslint.workingDirectories": [ + "./src", + "./pages" + ], + "prettier.requireConfig": true, + "editor.formatOnSave": true, + "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.codeActionsOnSave": { + "source.fixAll.eslint": "never" + }, + "nextjs-intellisense.includePaths": [ + "./src", + "./pages" + ] +} \ No newline at end of file diff --git a/components/Card/Card.tsx b/components/Card/Card.tsx index 710e837..d41509e 100644 --- a/components/Card/Card.tsx +++ b/components/Card/Card.tsx @@ -1,5 +1,4 @@ import Image, { StaticImageData } from "next/image"; - interface CardProps { image: StaticImageData; title: string; @@ -17,10 +16,10 @@ function Card({ image, title, description, href }: CardProps) { className="flex flex-col border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden hover:opacity-80" href={href} target="_blank" - rel="noopener" + rel="noopener noreferrer" > -
{title}
diff --git a/components/EcosystemApps/EcosystemApps.tsx b/components/EcosystemApps/EcosystemApps.tsx index 10583ba..dcd2f39 100644 --- a/components/EcosystemApps/EcosystemApps.tsx +++ b/components/EcosystemApps/EcosystemApps.tsx @@ -1,172 +1,53 @@ -import { StaticImageData } from "next/image"; -import { Card, Cards } from "../../components"; +import React, { useState, useMemo, useEffect } from 'react'; +import { Card, Cards } from '../../components/Card'; +import appData from '../../data/appData'; // Ensure this import is correct -import camelLogo from "../../public/assets/ecosystem/camel.png"; -import gamblinoLogo from "../../public/assets/ecosystem/gamblino.jpeg"; -import dragonswapLogo from "../../public/assets/ecosystem/dragonswap.jpeg"; -import fluidLogo from "../../public/assets/ecosystem/fluid.png"; -import belugasLogo from "../../public/assets/ecosystem/belugas.png"; -import squaredLabsLogo from "../../public/assets/ecosystem/squared-labs.jpeg"; -import seijinLogo from "../../public/assets/ecosystem/seijin.png"; -import predxLogo from "../../public/assets/ecosystem/predx.jpeg"; -import yakaLogo from "../../public/assets/ecosystem/yaka.jpeg"; -import webumpLogo from "../../public/assets/ecosystem/webump.jpeg"; -import accumulatedLogo from "../../public/assets/ecosystem/accumulated.jpeg"; -import mambaLogo from "../../public/assets/ecosystem/mamba.png"; -import jellyverseLogo from "../../public/assets/ecosystem/jellyverse.png"; -import seicasinoLogo from "../../public/assets/ecosystem/seicasino.png"; -import hoyuLogo from "../../public/assets/ecosystem/hoyu.jpeg"; -import superSeiyanBotLogo from "../../public/assets/ecosystem/superseiyanbot.jpeg"; -import nfts2meLogo from "../../public/assets/ecosystem/nfts2me.png"; -import stafiLogo from "../../public/assets/ecosystem/stafi.png"; -import siloLogo from "../../public/assets/ecosystem/silo.jpeg"; -import vermillionLogo from "../../public/assets/ecosystem/vermillion.jpeg"; - -interface App { - title: string; - description: string; - href: string; - image: StaticImageData; -} +const EcosystemApps = () => { + const [searchTerm, setSearchTerm] = useState(''); + const [allTags, setAllTags] = useState([]); -const APPS: App[] = [ - { - title: "DragonSwap", - description: "The native DEX on SEI", - href: "https://test.dragonswap.app/", - image: dragonswapLogo, - }, - { - title: "SeiCasino", - description: "Full-featured casino built natively on Sei", - href: "https://seicasino.io", - image: seicasinoLogo, - }, - { - title: "WeBump", - description: "Sei native NFT launchpad", - href: "https://webump.xyz/", - image: webumpLogo, - }, - { - title: "Seijin", - description: "Launchpad on Sei", - href: "https://seijin.app/staking", - image: seijinLogo, - }, - { - title: "Squared Labs", - description: "Quadratic price exposure on perpetual futures", - href: "https://squaredlabs.io/app/btc", - image: squaredLabsLogo, - }, - { - title: "PredX", - description: "Prediction market", - href: "https://events.predx.ai/", - image: predxLogo, - }, - { - title: "Gamblino", - description: - "GambleFi protocol covering crypto, sportsbook and classic games of chance", - href: "https://test.gamblino.app/", - image: gamblinoLogo, - }, - { - title: "Silo", - description: "Liquid staking and MEV on Sei", - href: "https://silo-evm.dc37hw5o72ljt.amplifyapp.com/", - image: siloLogo, - }, - { - title: "Camel", - description: "Sei's liquidity oasis", - href: "https://camel.money", - image: camelLogo, - }, - { - title: "Fluid", - description: "Interest free loans, backed by Sei", - href: "https://fluidex.metabest.tech/", - image: fluidLogo, - }, - { - title: "Belugas", - description: "Decentralized marketplace for lenders and borrowers", - href: "https://www.belugas.io/", - image: belugasLogo, - }, - { - title: "Yaka", - description: "Algebra Integral fork on Sei", - href: "https://test.yaka.finance/", - image: yakaLogo, - }, - { - title: "Accumulated", - description: "Liquid staking protocol", - href: "https://testnet.accumulated.finance/stake/sei", - image: accumulatedLogo, - }, - { - title: "Mamba Defi", - description: "Defi and memecoin ecosystem", - href: "https://www.mambaswap.io/", - image: mambaLogo, - }, - { - title: "JellyVerse", - description: "Smart order router", - href: "https://jelly-verse-sei.vercel.app/jellyswap", - image: jellyverseLogo, - }, - { - title: "Hoyu", - description: - "DeFi protocol uniting lending and trading markets to give every token new utility as safe collateral", - href: "https://arctic.hoyu.io", - image: hoyuLogo, - }, - { - title: "Super Seiyan Bot", - description: "Sei native telegram trading bot", - href: "https://t.me/SSeiyanEvmBot", - image: superSeiyanBotLogo, - }, - { - title: "NFTs2ME", - description: "No-code NFT creation tool", - href: "https://nfts2me.com/app/sei-devnet/", - image: nfts2meLogo, - }, - { - title: "Stafi", - description: "LST protocol", - href: "https://test-app.stafi.io/gallery/evm/SEI/?net=SEI", - image: stafiLogo, - }, - { - title: "Vermillion", - description: "Next-gen AMM and stablecoin", - href: "https://app.vermillion.finance/swap", - image: vermillionLogo, - }, -]; + // Extract unique tags from appData + useEffect(() => { + const tags = new Set(); + appData.forEach(app => app.tags.forEach(tag => tags.add(tag))); + setAllTags(Array.from(tags)); + }, []); + // Filter by "title" and "tag" fields from appData.ts // Filter by "title" and "tag" fields from appData.ts + const filteredApps = useMemo(() => ( + appData.filter(app => + app.title.toLowerCase().includes(searchTerm.toLowerCase()) || + app.tags.some(tag => tag.toLowerCase().includes(searchTerm.toLowerCase())) + ) + ), [searchTerm]); -const EcosystemApps = () => { return ( -