feat: application card components

components/AppCard/AppCard.tsx

@@ -0,0 +1,50 @@
+import { ExternalLink } from "lucide-react";
+import Image from "next/image";
+import { App } from "../../data/appData";
+
+interface AppCardProps {
+  app: App;
+}
+const AppCard = ({ app }: AppCardProps) => {
+  if (!app) return null;
+  const { title, description, href, image } = app;
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="group flex flex-col"
+    >
+      <div className="border dark:border-gray-800 rounded-lg  overflow-hidden flex flex-row lg:flex-col grow h-ull">
+        <div className="relative overflow-hidden grid place-items-center aspect-square lg:aspect-video border-r lg:border-b lg:border-r-0 dark:border-gray-800">
+          <div className="absolute z-10">
+            <Image
+              src={image}
+              alt={title}
+              width={200}
+              height={200}
+              className="group-hover:scale-[0.85] scale-75 transition-all"
+            />
+          </div>
+          <div className="bg-gray-400 dark:bg-gray-800 opacity-50 h-full w-full blur-3xl overflow-hidden">
+            <Image
+              src={image}
+              alt={title}
+              width={100}
+              height={100}
+              className="object-cover w-full h-full"
+            />
+          </div>
+        </div>
+        <div className="p-4 bg-gray-100 dark:bg-gray-800 w-full flex flex-col grow">
+          <h3 className="text-lg font-semibold mb-2 inline-flex items-center gap-2">
+            {title} <ExternalLink className="inline-block w-4  h-4" />
+          </h3>
+          <p className="opacity-75">{description}</p>
+        </div>
+      </div>
+    </a>
+  );
+};
+
+export default AppCard;

components/AppCard/AppCardsGrid.tsx

@@ -0,0 +1,30 @@
+import { Callout } from "nextra-theme-docs";
+import { Tag, appData } from "../../data/appData";
+import AppCard from "./AppCard";
+
+const AppCardsGrid = ({ tags }: { tags?: Tag[] }) => {
+  const filteredData = (() => {
+    if (!tags) return appData;
+
+    return appData.filter((app) => tags.some((tag) => app.tags.includes(tag)));
+  })();
+
+  return (
+    <div>
+      <Callout type="info">
+        <p>
+          Projects listed here are developed by the Sei community. Inclusion on
+          this site does not constitute endorsement. For questions related to
+          each, please contact the project directly.
+        </p>
+      </Callout>
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 my-4">
+        {filteredData.map((app, index) => (
+          <AppCard key={index} app={app} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default AppCardsGrid;

components/AppCard/index.ts

@@ -0,0 +1,2 @@
+export { default as AppCard } from './AppCard';
+export { default as AppCardsGrid } from './AppCardsGrid';

components/EcosystemApps/EcosystemApps.tsx

@@ -1,6 +1,6 @@
-import React, { useState, useMemo, useEffect } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import { appData, tagPrettyNames } from '../../data/appData';
 import { EcosystemCard, EcosystemCards } from '../EcosystemCard';
-import appData, { Tag, tagPrettyNames } from '../../data/appData';
 
 const EcosystemApps = () => {
   const [searchTerm, setSearchTerm] = useState('');

components/index.ts

@@ -1,3 +1,4 @@
+export * from "./AppCard";
 export * from './APIEndpoint';
 export * from './APIEndpointRoute';
 export * from './APIModule';