> ## Documentation Index
> Fetch the complete documentation index at: https://developer.box.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Sample Code Catalog

> Explore sample code and demo applications for Box APIs, SDKs, and UI Elements

export const SampleCodeCatalog = () => {
  const [selectedLanguage, setSelectedLanguage] = useState("All languages");
  const [selectedTag, setSelectedTag] = useState("All tags");
  const [languageDropdownOpen, setLanguageDropdownOpen] = useState(false);
  const [tagDropdownOpen, setTagDropdownOpen] = useState(false);
  const sampleData = [{
    title: translate("Box AI Python Workshop"),
    href: "https://github.com/barduinor/box-python-gen-workshop/blob/main/workshops/intelligence/intelligence.md",
    icon: "/static/samples/python.svg",
    languages: ["Python"],
    tags: [translate("API")]
  }, {
    title: translate("Box Custom Portal Demo"),
    href: "https://github.com/box-community/box-custom-portal-demo",
    icon: "/static/samples/react.svg",
    languages: ["React", "JavaScript"],
    tags: translate(["UI ELEMENTS", "FRONTEND"])
  }, {
    title: translate("Box Web App Integration Demo with Vercel"),
    href: "https://github.com/box-community/box-web-app-integration-demo",
    icon: "/static/samples/javascript.svg",
    languages: ["JavaScript"],
    tags: translate(["FRONTEND", "API"])
  }, {
    title: translate("Metadata view in Content Explorer"),
    href: "https://github.com/box-community/content-explorer-metadata",
    icon: "/static/samples/nodejs.svg",
    languages: ["Node", "React", "JavaScript"],
    tags: [translate("UI ELEMENTS"), translate("FRONTEND")]
  }, {
    title: translate("Video Bookmarking Demo"),
    href: "https://github.com/pchristensenB/box-videobookmarking-demo",
    icon: "/static/samples/nodejs.svg",
    languages: ["Node", "JavaScript"],
    tags: [translate("API")]
  }, {
    title: translate("Typescript SDK"),
    href: "https://github.com/box-community/box-ts-sdk-react",
    icon: "/static/samples/typescript.svg",
    languages: ["TypeScript"],
    tags: [translate("SDK")]
  }, {
    title: translate(".NET SDK Generated"),
    href: "https://github.com/box/box-dotnet-sdk-gen?tab=readme-ov-file#box-dotnet-sdk-generated",
    icon: "/static/samples/dotnet.svg",
    languages: [".NET"],
    tags: [translate("SDK")]
  }, {
    title: translate("Box TypeScript SDK GENERATED (beta)"),
    href: "https://github.com/box/box-typescript-sdk-gen#box-typescript-sdk-generated",
    icon: "/static/samples/typescript.svg",
    languages: ["TypeScript"],
    tags: [translate("SDK")]
  }, {
    title: translate("Get started: Box Node.js SDK & OAuth 2.0"),
    href: "https://github.com/box-community/Box-node.js-SKD-with-OAuth-2.0",
    icon: "/static/samples/nodejs.svg",
    languages: ["Node"],
    tags: [translate("SDK")]
  }, {
    title: translate("Vercel Serverless Demo"),
    href: "https://github.com/box-community/box-vercel-serverless-demo",
    icon: "/static/samples/nodejs.svg",
    languages: ["Node"],
    tags: [translate("API"), translate("WEBHOOKS")]
  }, {
    title: translate("Mini Box Mediainfo Video Metadata Uploader"),
    href: "https://github.com/box-community/mini-box-mediaInfo-video-metadata-uploader",
    icon: "/static/samples/python.svg",
    languages: ["Python"],
    tags: [translate("API")]
  }, {
    title: translate("Diver Portal Demo"),
    href: "https://github.com/box-community/ui-elements-sample-app",
    icon: "/static/samples/react.svg",
    languages: ["React", "JavaScript"],
    tags: [translate("UI ELEMENTS"), translate("FRONTEND")]
  }, {
    title: translate("Angular Box UI Elements Quickstart"),
    href: "https://github.com/SowaProgramuje/angular-box-ui-elements-cdn",
    icon: "/static/samples/angular.svg",
    languages: ["Angular", "JavaScript"],
    tags: [translate("UI ELEMENTS"), translate("FRONTEND")]
  }, {
    title: translate("UI Elements Demo"),
    href: "https://github.com/box-community/ui-elements-demo",
    icon: "/static/samples/react.svg",
    languages: ["React", "JavaScript"],
    tags: [translate("UI ELEMENTS"), translate("FRONTEND")]
  }, {
    title: translate("UI Elements Demo with JWT"),
    href: "https://github.com/box-community/ui-elements-jwt",
    icon: "/static/samples/react.svg",
    languages: ["React", "JavaScript"],
    tags: [translate("UI ELEMENTS"), translate("FRONTEND")]
  }, {
    title: translate("UI Elements Demo using Python"),
    href: "https://github.com/box-community/ui-elements-python",
    icon: "/static/samples/react.svg",
    languages: ["React", "JavaScript", "Python"],
    tags: [translate("UI ELEMENTS"), translate("FRONTEND")]
  }, {
    title: translate("UI Elements Demo with OAuth 2.0"),
    href: "https://github.com/box-community/ui-elements-oauth",
    icon: "/static/samples/react.svg",
    languages: ["React", "JavaScript", "Python"],
    tags: [translate("UI ELEMENTS"), translate("FRONTEND")]
  }, {
    title: translate("Sharing Folders using the Box CLI"),
    href: "https://github.com/box-community/box-cli-100k/tree/main",
    icon: "/static/samples/powershell.svg",
    languages: ["PowerShell"],
    tags: [translate("CLI"), translate("API")]
  }, {
    title: translate("Box Metadata Media Uploader"),
    href: "https://github.com/box-community/box-metadata-media/tree/main",
    icon: "/static/samples/python.svg",
    languages: ["Python"],
    tags: [translate("API")]
  }, {
    title: translate("Vue.js Box UI Elements Quickstart"),
    href: "https://github.com/SowaProgramuje/vue3-box-ui-elements-cdn",
    icon: "/static/samples/vue.js.svg",
    languages: ["Vue.js", "JavaScript"],
    tags: [translate("UI ELEMENTS"), translate("FRONTEND")]
  }, {
    title: translate("Java SDK"),
    href: "https://github.com/box/box-java-sdk/tree/main/src/example",
    icon: "/static/samples/java.svg",
    languages: ["Java"],
    tags: [translate("SDK")]
  }, {
    title: translate("Box CLI"),
    href: "https://github.com/box/boxcli/tree/main/examples",
    icon: "/static/samples/powershell.svg",
    languages: ["PowerShell"],
    tags: [translate("CLI"), translate("PROVISIONING")]
  }, {
    title: translate("Box UI Elements"),
    href: "https://github.com/box/box-ui-elements/tree/master/examples",
    icon: "/static/samples/react.svg",
    languages: ["React", "JavaScript"],
    tags: [translate("UI ELEMENTS"), translate("FRONTEND")]
  }, {
    title: translate(".NET SDK"),
    href: "https://github.com/box/box-windows-sdk-v2/tree/main/docs",
    icon: "/static/samples/dotnet.svg",
    languages: [".NET"],
    tags: [translate("SDK")]
  }, {
    title: translate("Box Annotations"),
    href: "https://github.com/box/box-annotations/tree/master/docs",
    icon: "/static/samples/javascript.svg",
    languages: ["JavaScript"],
    tags: [translate("FRONTEND")]
  }, {
    title: translate("iOS SDK"),
    href: "https://github.com/box/box-ios-sdk/tree/main/docs/usage",
    icon: "/static/samples/swift.svg",
    languages: ["Swift"],
    tags: [translate("SDK"), translate("MOBILE")]
  }, {
    title: translate("Node SDK"),
    href: "https://github.com/box/box-node-sdk/tree/main/docs",
    icon: "/static/samples/nodejs.svg",
    languages: ["Node"],
    tags: [translate("SDK")]
  }, {
    title: translate("Box Python SDK GENERATED (beta)"),
    href: "https://github.com/box/box-python-sdk-gen",
    icon: "/static/samples/python.svg",
    languages: ["Python"],
    tags: [translate("SDK")]
  }, {
    title: translate("Box Python SDK"),
    href: "https://github.com/box/box-python-sdk/tree/main/docs/usage",
    icon: "/static/samples/python.svg",
    languages: ["Python"],
    tags: [translate("SDK")]
  }, {
    title: translate("Android Browse SDK"),
    href: "https://github.com/box/box-android-browse-sdk",
    icon: "/static/samples/android.svg",
    languages: ["Android", "Java"],
    tags: [translate("SDK"), translate("MOBILE")]
  }, {
    title: translate("Android Share SDK"),
    href: "https://github.com/box/box-android-share-sdk",
    icon: "/static/samples/java.svg",
    languages: ["Java", "Android"],
    tags: [translate("SDK"), translate("MOBILE")]
  }, {
    title: translate("Content Preview"),
    href: "https://github.com/box/box-content-preview",
    icon: "/static/samples/javascript.svg",
    languages: ["JavaScript"],
    tags: [translate("FRONTEND")]
  }, {
    title: translate("UI Elements Demo"),
    href: "https://github.com/box/box-ui-elements-demo",
    icon: "/static/samples/react.svg",
    languages: ["React", "JavaScript"],
    tags: [translate("UI ELEMENTS"), translate("FRONTEND")]
  }, {
    title: translate("Skills Kit Nodejs"),
    href: "https://github.com/box/box-skills-kit-nodejs",
    icon: "/static/samples/nodejs.svg",
    languages: ["Node"],
    tags: [translate("SKILLS")]
  }, {
    title: translate("Salesforce SDK"),
    href: "https://github.com/box/box-salesforce-sdk/tree/master/doc",
    icon: "/static/samples/apex.svg",
    languages: ["APEX"],
    tags: [translate("SALESFORCE"), translate("SDK")]
  }, {
    title: translate("Android SDK (deprecated)"),
    href: "https://github.com/box/box-android-sdk/tree/master/doc",
    icon: "/static/samples/android.svg",
    languages: ["Android", "Java"],
    tags: [translate("SDK"), translate("MOBILE")]
  }, {
    title: translate("iOS Preview SDK"),
    href: "https://github.com/box/box-ios-preview-sdk",
    icon: "/static/samples/swift.svg",
    languages: ["Swift"],
    tags: [translate("SDK"), translate("MOBILE")]
  }, {
    title: translate("OpenAI Skill Demo"),
    href: "https://github.com/box-community/box-open-ai-skill-demo",
    icon: "/static/samples/nodejs.svg",
    languages: ["Node"],
    tags: [translate("SKILLS")]
  }, {
    title: translate("cURL Samples"),
    href: "https://github.com/box-community/box-curl-samples",
    icon: "/static/samples/curl.svg",
    languages: ["cURL"],
    tags: [translate("API")]
  }, {
    title: translate("Box Skills Starter Kit"),
    href: "https://github.com/box-community/Box-Custom-Skills-Starter",
    icon: "/static/samples/nodejs.svg",
    languages: ["Node"],
    tags: [translate("SKILLS")]
  }, {
    title: translate("Authenticate with JWT Demo"),
    href: "https://github.com/box-community/samples-docs-authenticate-with-jwt-api/blob/master/sample.js",
    icon: "/static/samples/nodejs.svg",
    languages: ["Node"],
    tags: [translate("API")]
  }, {
    title: translate("JavaScript SDK"),
    href: "https://github.com/box-community/box-javascript-sdk",
    icon: "/static/samples/javascript.svg",
    languages: ["JavaScript"],
    tags: [translate("SDK"), translate("FRONTEND")]
  }, {
    title: translate("Box for Salesforce Demo"),
    href: "https://github.com/box-community/box-salesforce-demo",
    icon: "/static/samples/apex.svg",
    languages: ["APEX"],
    tags: [translate("SALESFORCE")]
  }, {
    title: translate("JSON Ref Resolver"),
    href: "https://github.com/box-community/json-ref-resolver",
    icon: "/static/samples/javascript.svg",
    languages: ["JavaScript"],
    tags: [translate("API"), translate("FRONTEND")]
  }, {
    title: translate("Python Administration Kit"),
    href: "https://github.com/box-community/tool-python-admin-kit",
    icon: "/static/samples/python.svg",
    languages: ["Python"],
    tags: [translate("API")]
  }, {
    title: translate("Sample JWT App Primer"),
    href: "https://github.com/box-community/sample-jwt-app-primer",
    icon: "/static/samples/universal.svg",
    languages: ["Universal"],
    tags: [translate("API")]
  }, {
    title: translate("Splunk Dashboards"),
    href: "https://github.com/box-community/splunk-dashboards",
    icon: "/static/samples/universal.svg",
    languages: ["Universal"],
    tags: [translate("API")]
  }, {
    title: translate("PowerShell SDK"),
    href: "https://github.com/box-community/sdk-powershell-api-v2",
    icon: "/static/samples/powershell.svg",
    languages: ["PowerShell"],
    tags: [translate("SDK")]
  }, {
    title: translate("Python Batch Folder Tree Rename"),
    href: "https://github.com/box-community/tool-python-batch-folder-tree-rename",
    icon: "/static/samples/python.svg",
    languages: ["Python"],
    tags: [translate("API")]
  }, {
    title: translate("Python Move Folder to Account"),
    href: "https://github.com/box-community/tool-python-move-folder-to-account",
    icon: "/static/samples/python.svg",
    languages: ["Python"],
    tags: [translate("API")]
  }, {
    title: translate("PHP Simple User Reports"),
    href: "https://github.com/box-community/tool-php-simple-user-reports",
    icon: "/static/samples/php.svg",
    languages: ["PHP"],
    tags: [translate("API")]
  }, {
    title: translate("Perl Folder IDs to Paths"),
    href: "https://github.com/box-community/tool-perl-folderids-to-paths",
    icon: "/static/samples/perl.svg",
    languages: ["Perl"],
    tags: [translate("API")]
  }, {
    title: translate("iOS Browse SDK"),
    href: "https://github.com/box/box-ios-browse-sdk",
    icon: "/static/samples/swift.svg",
    languages: ["Swift"],
    tags: [translate("SDK"), translate("MOBILE")]
  }, {
    title: translate("iOS Share SDK"),
    href: "https://github.com/box/box-ios-share-sdk",
    icon: "/static/samples/swift.svg",
    languages: ["Swift"],
    tags: [translate("SDK"), translate("MOBILE")]
  }, {
    title: translate("Android Preview SDK"),
    href: "https://github.com/box/box-android-preview-sdk",
    icon: "/static/samples/android.svg",
    languages: ["Android", "Java"],
    tags: [translate("SDK"), translate("MOBILE")]
  }, {
    title: translate("Android Simple Tooltip"),
    href: "https://github.com/box/android-simple-tooltip",
    icon: "/static/samples/android.svg",
    languages: ["Android", "Java"],
    tags: [translate("MOBILE")]
  }, {
    title: translate("Box Content Preview Demo"),
    href: "https://github.com/box/box-content-preview-demo",
    icon: "/static/samples/react.svg",
    languages: ["React", "JavaScript"],
    tags: [translate("FRONTEND")]
  }, {
    title: translate("Java SDK Samples"),
    href: "https://github.com/box/box-java-sdk-samples",
    icon: "/static/samples/java.svg",
    languages: ["Java"],
    tags: [translate("API")]
  }, {
    title: translate(".NET Metadata SDK V2"),
    href: "https://github.com/box/box-windows-metadata-sdk-v2",
    icon: "/static/samples/dotnet.svg",
    languages: [".NET"],
    tags: [translate("SDK"), translate("API")]
  }, {
    title: translate("Android App to App SDK"),
    href: "https://github.com/box/box-android-apptoapp-sdk",
    icon: "/static/samples/android.svg",
    languages: ["Android", "Java"],
    tags: [translate("SDK"), translate("MOBILE")]
  }, {
    title: translate("Ruby SDK"),
    href: "https://github.com/cburnette/boxr",
    icon: "/static/samples/ruby.svg",
    languages: ["Ruby"],
    tags: [translate("SDK")]
  }, {
    title: translate("R SDK"),
    href: "https://github.com/r-box/boxr",
    icon: "/static/samples/r.svg",
    languages: ["R"],
    tags: [translate("SDK")]
  }, {
    title: translate("Box Jira Etsi Document Control"),
    href: "https://github.com/goodgrid/etsi-document-control",
    icon: "/static/samples/javascript.svg",
    languages: ["JavaScript"],
    tags: [translate("API"), translate("FRONTEND")]
  }, {
    title: translate("Box PowerShell Automations"),
    href: "https://github.com/kylefernandadams/box-powershell-automations",
    icon: "/static/samples/powershell.svg",
    languages: ["PowerShell"],
    tags: [translate("API"), translate("PROVISIONING")]
  }, {
    title: translate("Microsoft Azure Media Services Box Skill"),
    href: "https://github.com/box-community/sample-video-skills/tree/master/microsoft-azure-faces-transcript-topics-detection",
    icon: "/static/samples/nodejs.svg",
    languages: ["Node"],
    tags: [translate("SKILLS")]
  }, {
    title: translate("Postman Collection"),
    href: "https://developer.box.com/guides/tooling/postman/",
    icon: "/static/samples/universal.svg",
    languages: ["Universal"],
    tags: [translate("API")]
  }, {
    title: translate("AWS Lambda Function to Save Logs"),
    href: "https://github.com/kenji-toforone/box-auditlogs-node-es",
    icon: "/static/samples/nodejs.svg",
    languages: ["Node"],
    tags: [translate("API")]
  }, {
    title: translate("Python Async Rate Limiter"),
    href: "https://github.com/jmfrank63/box-python-async-rate-limiter",
    icon: "/static/samples/python.svg",
    languages: ["Python"],
    tags: [translate("API")]
  }, {
    title: translate("Box for Salesforce Blueprints"),
    href: "https://github.com/kylefernandadams/box-for-salesforce-blueprints",
    icon: "/static/samples/apex.svg",
    languages: ["APEX"],
    tags: [translate("SALESFORCE")]
  }, {
    title: translate("Leverton Lease Extraction"),
    href: "https://github.com/box-community/sample-document-skills/tree/master/leverton-lease-extraction",
    icon: "/static/samples/nodejs.svg",
    languages: ["Node"],
    tags: [translate("SKILLS")]
  }, {
    title: translate("Rossum Invoice Intelligence"),
    href: "https://github.com/box-community/sample-document-skills/tree/master/rossum-invoice-intelligence",
    icon: "/static/samples/nodejs.svg",
    languages: ["Node"],
    tags: [translate("SKILLS")]
  }, {
    title: translate("IBM Watson Audio Transcript Extraction"),
    href: "https://github.com/box-community/sample-audio-skills/tree/master/ibm-watson-transcript-extraction",
    icon: "/static/samples/nodejs.svg",
    languages: ["Node"],
    tags: [translate("SKILLS")]
  }, {
    title: translate("Microsoft Azure Audio Transcript Extraction"),
    href: "https://github.com/box-community/sample-audio-skills/tree/master/microsoft-azure-transcript-topics-detection",
    icon: "/static/samples/nodejs.svg",
    languages: ["Node"],
    tags: [translate("SKILLS")]
  }, {
    title: translate("VoiceBase Dual Channel Audio Analysis"),
    href: "https://github.com/box-community/sample-audio-skills/tree/master/voicebase-callcenter-audio-analysis",
    icon: "/static/samples/nodejs.svg",
    languages: ["Node"],
    tags: [translate("SKILLS")]
  }, {
    title: translate("Acuant AssureID Box Skill"),
    href: "https://github.com/box-community/sample-image-skills/tree/master/acuant-assureid-goverment-id-data-extraction",
    icon: "/static/samples/nodejs.svg",
    languages: ["Node"],
    tags: [translate("SKILLS")]
  }, {
    title: translate("Amazon Rekognition Label Extraction"),
    href: "https://github.com/box-community/sample-image-skills/tree/master/amazon-rekognition-labels-detection",
    icon: "/static/samples/nodejs.svg",
    languages: ["Node"],
    tags: [translate("SKILLS")]
  }, {
    title: translate("EXIF/XMP MetaInfo Extraction"),
    href: "https://github.com/box-community/sample-image-skills/tree/master/exiftool-metainfo-extraction",
    icon: "/static/samples/nodejs.svg",
    languages: ["Node"],
    tags: [translate("SKILLS")]
  }, {
    title: translate("Google Cloud Vision Product Search"),
    href: "https://github.com/box-community/sample-image-skills/tree/master/google-product-search-integration",
    icon: "/static/samples/nodejs.svg",
    languages: ["Node"],
    tags: [translate("SKILLS")]
  }, {
    title: translate("Google Vision Image Extraction"),
    href: "https://github.com/box-community/sample-image-skills/tree/master/google-vision-text-topics-detection",
    icon: "/static/samples/nodejs.svg",
    languages: ["Node"],
    tags: [translate("SKILLS")]
  }, {
    title: translate("Hive Predict Face Recognition"),
    href: "https://github.com/box-community/sample-image-skills/tree/master/hive-predict-face-recognition",
    icon: "/static/samples/nodejs.svg",
    languages: ["Node"],
    tags: [translate("SKILLS")]
  }, {
    title: translate("Microsoft Vision Image Extraction"),
    href: "https://github.com/box-community/sample-image-skills/tree/master/microsoft-vision-text-topics-detection",
    icon: "/static/samples/nodejs.svg",
    languages: ["Node"],
    tags: [translate("SKILLS")]
  }, {
    title: translate("ASP.NET MVC Skeleton App"),
    href: "https://github.com/box/samples/tree/master/box-aspnet-mvc-sk",
    icon: "/static/samples/dotnet.svg",
    languages: [".NET"],
    tags: [translate("API")]
  }, {
    title: translate("Auth0 Angular 1 Skeleton App"),
    href: "https://github.com/box/samples/tree/master/box-auth0-angular1-skeleton-app-sample",
    icon: "/static/samples/angularjs.svg",
    languages: ["AngularJS", "JavaScript"],
    tags: [translate("API"), translate("FRONTEND")]
  }, {
    title: translate("Auth0 Angular 2 Skeleton App"),
    href: "https://github.com/box/samples/tree/master/box-auth0-angular2-skeleton-app-sample",
    icon: "/static/samples/angular.svg",
    languages: ["Angular", "JavaScript"],
    tags: [translate("API"), translate("FRONTEND")]
  }, {
    title: translate("Auth0 Swift Skeleton App"),
    href: "https://github.com/box/samples/tree/master/box-auth0-swift-skeleton-app-sample",
    icon: "/static/samples/swift.svg",
    languages: ["Swift"],
    tags: [translate("API"), translate("MOBILE")]
  }, {
    title: translate("AWS Cognito Angular 2 Skeleton App"),
    href: "https://github.com/box/samples/tree/master/box-aws-cognito-angular2-skeleton-app-sample",
    icon: "/static/samples/angular.svg",
    languages: ["Angular", "JavaScript"],
    tags: [translate("API"), translate("FRONTEND")]
  }, {
    title: translate("Java Servlet Skeleton App"),
    href: "https://github.com/box/samples/tree/master/box-java-servlet-skeleton-app",
    icon: "/static/samples/java.svg",
    languages: ["Java"],
    tags: [translate("API")]
  }, {
    title: translate("Node Cognito Lambdas Sample"),
    href: "https://github.com/box/samples/tree/master/box-node-cognito-lambdas-sample",
    icon: "/static/samples/nodejs.svg",
    languages: ["Node"],
    tags: [translate("API")]
  }, {
    title: translate("Node Custom Skills Sample"),
    href: "https://github.com/box/samples/tree/master/box-node-custom-skills-sample",
    icon: "/static/samples/nodejs.svg",
    languages: ["Node"],
    tags: [translate("SKILLS")]
  }, {
    title: translate("Node Express Skeleton App"),
    href: "https://github.com/box/samples/tree/master/box-node-express-skeleton-app",
    icon: "/static/samples/nodejs.svg",
    languages: ["Node"],
    tags: [translate("API")]
  }, {
    title: translate("Node Lambda Sample"),
    href: "https://github.com/box/samples/tree/master/box-node-lambda-sample",
    icon: "/static/samples/nodejs.svg",
    languages: ["Node"],
    tags: [translate("API")]
  }, {
    title: translate("Node Rekognition Lambda Sample"),
    href: "https://github.com/box/samples/tree/master/box-node-rekognition-lambdas-sample",
    icon: "/static/samples/nodejs.svg",
    languages: ["Node"],
    tags: [translate("API")]
  }, {
    title: translate("Node Webhook to Lambda Sample"),
    href: "https://github.com/box/samples/tree/master/box-node-webhook-to-lambda-sample",
    icon: "/static/samples/nodejs.svg",
    languages: ["Node"],
    tags: [translate("API"), translate("WEBHOOKS")]
  }];
  const allLanguages = useMemo(() => {
    const languageSet = new Set();
    sampleData.forEach(sample => {
      sample.languages.forEach(lang => languageSet.add(lang));
    });
    return ["All languages", ...Array.from(languageSet).sort()];
  }, []);
  const allTags = useMemo(() => {
    const tagSet = new Set();
    sampleData.forEach(sample => {
      sample.tags.forEach(tag => tagSet.add(tag));
    });
    return ["All tags", ...Array.from(tagSet).sort()];
  }, []);
  const filteredSamples = useMemo(() => {
    return sampleData.filter(sample => {
      const languageMatch = selectedLanguage === "All languages" || sample.languages.includes(selectedLanguage);
      const tagMatch = selectedTag === "All tags" || sample.tags.includes(selectedTag);
      return languageMatch && tagMatch;
    });
  }, [selectedLanguage, selectedTag]);
  const resetFilters = () => {
    setSelectedLanguage("All languages");
    setSelectedTag("All tags");
  };
  const hasActiveFilters = selectedLanguage !== "All languages" || selectedTag !== "All tags";
  return <div className="w-full max-w-[1400px] mx-auto">
      {}
      <div className="flex flex-wrap gap-3 mb-8 items-center">
        {}
        <div className="relative">
          <button onClick={() => {
    setLanguageDropdownOpen(!languageDropdownOpen);
    setTagDropdownOpen(false);
  }} className="flex items-center justify-between gap-3 px-4 py-2.5 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:border-gray-400 dark:hover:border-gray-500 transition-colors min-w-[180px]">
            <span className="text-sm text-gray-700 dark:text-gray-200">{selectedLanguage}</span>
            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" fill="none" className={`transition-transform ${languageDropdownOpen ? "rotate-180" : ""}`}>
              <path fill="currentColor" fillRule="evenodd" d="m6.644 5.76808 4.34-3.766.75-.651996c.08352-.067492.15088-.152810.19716-.249704.04628-.096896.07030-.202916.07030-.310296 0-.107379-.02402-.213399-.07030-.310295C11.88488.382894 11.81752.297576 11.734.230084c-.18088-.151486-.41008-.233093-.646-.22999963H.912C.408.00008474 0 .354084 0 .790084c0 .21.096.412.266.56l.77.667996 4.32 3.75c.18130.14956.40898.23136.644.23136s.46270-.0818.644-.23136Z" clipRule="evenodd" />
            </svg>
          </button>

          {languageDropdownOpen && <div className="absolute top-full left-0 mt-2 w-full bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg z-10 max-h-64 overflow-y-auto">
              {allLanguages.map(lang => <button key={lang} onClick={() => {
    setSelectedLanguage(lang);
    setLanguageDropdownOpen(false);
  }} className={`w-full text-left px-4 py-2.5 text-sm hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors ${selectedLanguage === lang ? "bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 font-medium" : "text-gray-700 dark:text-gray-200"}`}>
                  {lang}
                </button>)}
            </div>}
        </div>

        {}
        <div className="relative">
          <button onClick={() => {
    setTagDropdownOpen(!tagDropdownOpen);
    setLanguageDropdownOpen(false);
  }} className="flex items-center justify-between gap-3 px-4 py-2.5 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:border-gray-400 dark:hover:border-gray-500 transition-colors min-w-[180px]">
            <span className="text-sm text-gray-700 dark:text-gray-200">{selectedTag}</span>
            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" fill="none" className={`transition-transform ${tagDropdownOpen ? "rotate-180" : ""}`}>
              <path fill="currentColor" fillRule="evenodd" d="m6.644 5.76808 4.34-3.766.75-.651996c.08352-.067492.15088-.152810.19716-.249704.04628-.096896.07030-.202916.07030-.310296 0-.107379-.02402-.213399-.07030-.310295C11.88488.382894 11.81752.297576 11.734.230084c-.18088-.151486-.41008-.233093-.646-.22999963H.912C.408.00008474 0 .354084 0 .790084c0 .21.096.412.266.56l.77.667996 4.32 3.75c.18130.14956.40898.23136.644.23136s.46270-.0818.644-.23136Z" clipRule="evenodd" />
            </svg>
          </button>

          {tagDropdownOpen && <div className="absolute top-full left-0 mt-2 w-full bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg z-10 max-h-64 overflow-y-auto">
              {allTags.map(tag => <button key={tag} onClick={() => {
    setSelectedTag(tag);
    setTagDropdownOpen(false);
  }} className={`w-full text-left px-4 py-2.5 text-sm hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors ${selectedTag === tag ? "bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 font-medium" : "text-gray-700 dark:text-gray-200"}`}>
                  {tag}
                </button>)}
            </div>}
        </div>

        {}
        {hasActiveFilters && <button onClick={resetFilters} className="px-4 py-2.5 text-sm text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-medium transition-colors">
            Reset filters
          </button>}
      </div>

      {}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {filteredSamples.map((sample, index) => <a key={index} href={sample.href} target="_blank" rel="noreferrer noopener" className="flex flex-col p-6 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 hover:border-blue-500 dark:hover:border-blue-400 hover:shadow-lg transition-all duration-200 cursor-pointer">
            {}
            <div className="w-12 h-12 rounded-lg flex items-center justify-center mb-4">
              <img src={sample.icon} alt={sample.languages.join(", ")} className="w-12 h-12 my-0" />
            </div>

            {}
            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">{sample.title}</h3>

            {}
            <div className="flex flex-wrap gap-2 mt-auto">
              {sample.tags.map((tag, tagIndex) => <span key={tagIndex} className="px-2.5 py-1 rounded-full text-xs font-semibold uppercase tracking-wide text-gray-900 bg-gray-200 dark:bg-gray-700 dark:text-gray-100">
                  {tag}
                </span>)}
            </div>
          </a>)}
      </div>

      {}
      {filteredSamples.length === 0 && <div className="text-center py-12">
          <p className="text-gray-600 dark:text-gray-400 text-lg">No samples found matching your filters.</p>
          <button onClick={resetFilters} className="mt-4 px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-colors">
            Clear filters
          </button>
        </div>}
    </div>;
};

<SampleCodeCatalog />