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

# Browse tests

export const TestCatalog = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [selectedType, setSelectedType] = useState('all');
  const tests = [{
    title: "LLM-as-a-judge",
    description: "Create tests using an LLM as a judge with descriptive evaluations and scoring.",
    tags: ["USES LLMS", "METRICS", "AGENTIC"],
    href: "/tests/catalog/l-l-m-rubric-threshold",
    icon: "/icons/18-gavel.svg"
  }, {
    title: "Contains PII",
    description: "Detect and validate the presence of personal identifiable information in your data.",
    tags: ["DATA QUALITY", "EU AI ACT", "OWASP", "SAFETY", "AGENTIC"],
    href: "/tests/catalog/contains-p-i-i",
    icon: "/icons/18-password.svg"
  }, {
    title: "Has prompt injection",
    description: "Check for prompt injection, malicious strings and jailbreak attempts in input data.",
    tags: ["DATA QUALITY", "EU AI ACT", "OWASP", "SAFETY", "AGENTIC"],
    href: "/tests/catalog/has-prompt-injection-count",
    icon: "/icons/18-syringe.svg"
  }, {
    title: "Hallucination",
    description: "Measures the extent to which the generated answer contains information that is not supported by or contradicts the given context.",
    tags: ["USES LLMS", "METRICS", "AGENTIC"],
    href: "/tests/catalog/hallucination",
    icon: "/icons/18-ball-crystal.svg"
  }, {
    title: "Answer correctness",
    description: "Measures the accuracy of the generated answer when compared to the ground truth.",
    tags: ["USES LLMS", "METRICS", "AGENTIC"],
    href: "/tests/catalog/answer-correctness",
    icon: "/icons/18-target.svg"
  }, {
    title: "Answer relevancy",
    description: "Assesses how pertinent the generated answer is to the given prompt.",
    tags: ["USES LLMS", "METRICS", "AGENTIC", "EU AI ACT"],
    href: "/tests/catalog/answer-relevancy",
    icon: "/icons/18-radar.svg"
  }, {
    title: "Coherence",
    description: "Does the submission present ideas, information, or arguments in a logical and organized manner?",
    tags: ["USES LLMS", "METRICS", "AGENTIC"],
    href: "/tests/catalog/coherence",
    icon: "/icons/18-grid-layout-11.svg"
  }, {
    title: "Conciseness",
    description: "Does the submission convey information or ideas clearly and efficiently, without unnecessary or redundant details?",
    tags: ["USES LLMS", "METRICS", "AGENTIC"],
    href: "/tests/catalog/conciseness",
    icon: "/icons/18-reduce-2.svg"
  }, {
    title: "Context recall",
    description: "Measures the extent to which the retrieved context aligns with the annotated answer, treated as the ground truth.",
    tags: ["USES LLMS", "METRICS", "AGENTIC"],
    href: "/tests/catalog/context-recall",
    icon: "/icons/18-replace-objs.svg"
  }, {
    title: "Context relevancy",
    description: "Also known as context precision, it measures the relevance of the retrieved context to the given prompt.",
    tags: ["USES LLMS", "METRICS", "AGENTIC"],
    href: "/tests/catalog/context-relevancy",
    icon: "/icons/18-arrows-to-center.svg"
  }, {
    title: "Context utilization",
    description: "Measures the proportion of the retrieved context that is utilized in the generated answer.",
    tags: ["USES LLMS", "METRICS", "AGENTIC"],
    href: "/tests/catalog/context-utilization",
    icon: "/icons/18-folders.svg"
  }, {
    title: "Correctness",
    description: "Is the submission factually accurate and free from errors?",
    tags: ["USES LLMS", "METRICS", "AGENTIC"],
    href: "/tests/catalog/correctness",
    icon: "/icons/18-target.svg"
  }, {
    title: "Faithfulness",
    description: "Measures the factual consistency of the generated answer against the given context.",
    tags: ["USES LLMS", "METRICS", "AGENTIC", "EU AI ACT", "OWASP"],
    href: "/tests/catalog/faithfulness",
    icon: "/icons/18-square-circle-group.svg"
  }, {
    title: "Harmfulness",
    description: "Does the submission cause or have the potential to cause harm to individuals, groups, or society at large?",
    tags: ["USES LLMS", "METRICS", "AGENTIC", "EU AI ACT", "OWASP"],
    href: "/tests/catalog/harmfulness",
    icon: "/icons/18-flask.svg"
  }, {
    title: "Maliciousness",
    description: "Does the submission intend to harm, deceive, or exploit users?",
    tags: ["USES LLMS", "METRICS", "AGENTIC", "EU AI ACT", "OWASP"],
    href: "/tests/catalog/maliciousness",
    icon: "/icons/18-slice.svg"
  }, {
    title: "Toxicity",
    description: "LLM-as-a-judge template that evaluates whether an AI assistant's response contains harmful, toxic, or inappropriate content.",
    tags: ["USES LLMS", "METRICS", "AGENTIC"],
    href: "/tests/catalog/toxicity",
    icon: "/icons/18-gavel.svg"
  }, {
    title: "Groundedness",
    description: "LLM-as-a-judge template that evaluates whether every factual statement in the AI assistant's response is grounded in provided context.",
    tags: ["USES LLMS", "METRICS", "AGENTIC"],
    href: "/tests/catalog/groundedness",
    icon: "/icons/18-gavel.svg"
  }, {
    title: "Recommends competitor",
    description: "LLM-as-a-judge template that evaluates whether an AI assistant's response recommends a competitor.",
    tags: ["USES LLMS", "METRICS", "AGENTIC"],
    href: "/tests/catalog/recommends-competitor",
    icon: "/icons/18-gavel.svg"
  }, {
    title: "Character length",
    description: "Define minimum and/or maximum bounds on the number of characters in a column.",
    tags: ["DATA QUALITY"],
    href: "/tests/catalog/character-length",
    icon: "/icons/18-text-scale-x.svg"
  }, {
    title: "Sentence length",
    description: "Validate text sentence lengths with configurable minimum and maximum bounds.",
    tags: ["DATA QUALITY"],
    href: "/tests/catalog/sentence-length",
    icon: "/icons/18-flask.svg"
  }, {
    title: "Null rows",
    description: "Specify the number or percentage of rows with missing values in your dataset.",
    tags: ["DATA QUALITY"],
    href: "/tests/catalog/null-count",
    icon: "/icons/18-square-dashed.svg"
  }, {
    title: "Number of rows",
    description: "Validate the number of rows in your dataset meets expectations.",
    tags: ["DATA QUALITY"],
    href: "/tests/catalog/row-count",
    icon: "/icons/18-calculator.svg"
  }, {
    title: "Duplicate rows",
    description: "Monitor and control the number of duplicate records in your dataset.",
    tags: ["DATA QUALITY"],
    href: "/tests/catalog/duplicate-count",
    icon: "/icons/18-clone-dashed-2.svg"
  }, {
    title: "Column drift",
    description: "Detect drift in your data by comparing columns with a reference dataset.",
    tags: ["DATA DRIFT"],
    href: "/tests/catalog/column-drift",
    icon: "/icons/18-pivot-table.svg"
  }, {
    title: "Feature drift",
    description: "Detect drift in your data features compared to a reference dataset.",
    tags: ["DATA DRIFT"],
    href: "/tests/catalog/feature-drift-count",
    icon: "/icons/18-chart-stacked-line.svg"
  }, {
    title: "Label drift",
    description: "Monitor drift in your model's labels over time.",
    tags: ["DATA DRIFT"],
    href: "/tests/catalog/label-drift",
    icon: "/icons/18-chart-stacked-line.svg"
  }, {
    title: "SQL query",
    description: "Write custom SQL queries to validate your data and set thresholds on results.",
    tags: ["DATA QUALITY"],
    href: "/tests/catalog/sql-query",
    icon: "/icons/18-database-search.svg"
  }, {
    title: "SQL query return rows",
    description: "Validate that SQL queries return the expected number of rows.",
    tags: ["DATA QUALITY"],
    href: "/tests/catalog/sql-query-return-rows",
    icon: "/icons/18-database-check.svg"
  }, {
    title: "Total cost",
    description: "Ensure that the total request cost (in USD) for the data is within a given range.",
    tags: ["METRICS", "AGENTIC", "USAGE METRICS"],
    href: "/tests/catalog/total-cost",
    icon: "/icons/18-circle-dollar.svg"
  }, {
    title: "Mean cost",
    description: "Monitor the average cost per request to stay within budget constraints.",
    tags: ["METRICS", "AGENTIC", "USAGE METRICS"],
    href: "/tests/catalog/mean-cost",
    icon: "/icons/18-circle-dollar.svg"
  }, {
    title: "Max cost",
    description: "Set maximum cost thresholds for individual requests.",
    tags: ["METRICS", "AGENTIC", "USAGE METRICS", "OWASP"],
    href: "/tests/catalog/max-cost",
    icon: "/icons/18-circle-dollar-up.svg"
  }, {
    title: "Total tokens",
    description: "Monitor the total number of tokens used in your requests.",
    tags: ["METRICS", "AGENTIC", "USAGE METRICS"],
    href: "/tests/catalog/total-tokens",
    icon: "/icons/18-grid.svg"
  }, {
    title: "Mean tokens",
    description: "Track the average number of tokens per request.",
    tags: ["METRICS", "AGENTIC", "USAGE METRICS"],
    href: "/tests/catalog/mean-tokens",
    icon: "/icons/18-grid.svg"
  }, {
    title: "Max tokens",
    description: "Set maximum token limits for individual requests.",
    tags: ["METRICS", "AGENTIC", "USAGE METRICS"],
    href: "/tests/catalog/max-tokens",
    icon: "/icons/18-grid-3.svg"
  }, {
    title: "Min latency",
    description: "Monitor the minimum response time of your requests.",
    tags: ["METRICS", "AGENTIC", "USAGE METRICS"],
    href: "/tests/catalog/min-latency",
    icon: "/icons/18-gauge-4.svg"
  }, {
    title: "Mean latency",
    description: "Monitor the average response time of your requests.",
    tags: ["METRICS", "AGENTIC", "USAGE METRICS"],
    href: "/tests/catalog/mean-latency",
    icon: "/icons/18-gauge-4.svg"
  }, {
    title: "Median latency",
    description: "Monitor the median response time of your requests.",
    tags: ["METRICS", "AGENTIC", "USAGE METRICS"],
    href: "/tests/catalog/median-latency",
    icon: "/icons/18-gauge-4.svg"
  }, {
    title: "Max latency",
    description: "Set maximum latency thresholds for request response times.",
    tags: ["METRICS", "AGENTIC", "USAGE METRICS"],
    href: "/tests/catalog/max-latency",
    icon: "/icons/18-gauge-4.svg"
  }, {
    title: "90th latency percentile",
    description: "Monitor the 90th percentile response time of your requests.",
    tags: ["METRICS", "AGENTIC", "USAGE METRICS"],
    href: "/tests/catalog/p90-latency",
    icon: "/icons/18-bolt-speed.svg"
  }, {
    title: "95th latency percentile",
    description: "Monitor the 95th percentile response time of your requests.",
    tags: ["METRICS", "AGENTIC", "USAGE METRICS"],
    href: "/tests/catalog/p95-latency",
    icon: "/icons/18-bolt-speed.svg"
  }, {
    title: "99th latency percentile",
    description: "Monitor the 99th percentile response time of your requests.",
    tags: ["METRICS", "AGENTIC", "USAGE METRICS"],
    href: "/tests/catalog/p99-latency",
    icon: "/icons/18-bolt-speed.svg"
  }, {
    title: "Aggregate metrics",
    description: "Evaluate your model using various aggregate performance metrics.",
    tags: ["METRICS"],
    href: "/tests/catalog/aggregate-metrics",
    icon: "/icons/18-measure.svg"
  }, {
    title: "Great Expectations",
    description: "Use the Great Expectations library to define and validate data expectations.",
    tags: ["DATA QUALITY"],
    href: "/tests/catalog/great-expectations",
    icon: "/icons/18-gx.svg"
  }, {
    title: "Column statistic",
    description: "Monitor statistical properties of dataset columns.",
    tags: ["DATA QUALITY"],
    href: "/tests/catalog/column-statistic",
    icon: "/icons/18-table-equal.svg"
  }, {
    title: "Group by column statistic",
    description: "Analyze statistical properties grouped by specific column values.",
    tags: ["DATA QUALITY"],
    href: "/tests/catalog/group-by-column-statistic",
    icon: "/icons/18-rect-layout-grid.svg"
  }, {
    title: "Column average",
    description: "Monitor the average values in dataset columns.",
    tags: ["DATA QUALITY"],
    href: "/tests/catalog/column-average",
    icon: "/icons/18-table-sparkle.svg"
  }, {
    title: "Column values match",
    description: "Validate that column values match expected patterns or ranges.",
    tags: ["DATA QUALITY"],
    href: "/tests/catalog/column-values-match",
    icon: "/icons/18-table-success.svg"
  }, {
    title: "Anomalous column count",
    description: "Detect anomalous patterns in column value distributions.",
    tags: ["DATA QUALITY"],
    href: "/tests/catalog/anomalous-column-count",
    icon: "/icons/18-grid-circle-plus.svg"
  }, {
    title: "BLEU score",
    description: "Average BLEU-1,2,3,4 score between generated and reference texts.",
    tags: ["METRICS"],
    href: "/tests/catalog/bleu-score",
    icon: "/icons/18-measure.svg"
  }, {
    title: "Edit distance",
    description: "Average edit distance between generated and reference texts.",
    tags: ["METRICS"],
    href: "/tests/catalog/edit-distance",
    icon: "/icons/18-height-max.svg"
  }, {
    title: "Exact match",
    description: "Average exact match between generated and reference texts.",
    tags: ["METRICS"],
    href: "/tests/catalog/exact-match",
    icon: "/icons/18-grid-layout-rows.svg"
  }, {
    title: "JSON score",
    description: "Average JSON score between generated and reference texts.",
    tags: ["METRICS"],
    href: "/tests/catalog/json-score",
    icon: "/icons/18-brackets-curly-dots.svg"
  }, {
    title: "Quasi-exact match",
    description: "Average quasi-exact match between generated and reference texts.",
    tags: ["METRICS"],
    href: "/tests/catalog/quasi-exact-match",
    icon: "/icons/18-boolean-intersect.svg"
  }, {
    title: "Semantic similarity",
    description: "Average semantic similarity between generated and reference texts.",
    tags: ["METRICS"],
    href: "/tests/catalog/semantic-similarity",
    icon: "/icons/18-spell-check.svg"
  }, {
    title: "Class imbalance ratio",
    description: "Monitor the balance between different classes in your dataset.",
    tags: ["DATA QUALITY"],
    href: "/tests/catalog/class-imbalance-ratio",
    icon: "/icons/18-balance-off.svg"
  }, {
    title: "Conflicting labels",
    description: "Detect conflicting labels in your dataset.",
    tags: ["DATA QUALITY"],
    href: "/tests/catalog/conflicting-label-count",
    icon: "/icons/18-tag-slash.svg"
  }, {
    title: "New categories",
    description: "Monitor the emergence of new categories in your data.",
    tags: ["DATA QUALITY"],
    href: "/tests/catalog/new-category-count",
    icon: "/icons/18-flask.svg"
  }, {
    title: "New labels",
    description: "Track the appearance of new labels in your dataset.",
    tags: ["DATA QUALITY"],
    href: "/tests/catalog/new-label-count",
    icon: "/icons/18-flask.svg"
  }, {
    title: "Empty features",
    description: "Monitor the number of empty features in your dataset.",
    tags: ["DATA QUALITY"],
    href: "/tests/catalog/empty-feature-count",
    icon: "/icons/18-line-dashed.svg"
  }, {
    title: "Empty feature",
    description: "Detect and validate empty features in your data.",
    tags: ["DATA QUALITY"],
    href: "/tests/catalog/empty-feature",
    icon: "/icons/18-line-dashed.svg"
  }, {
    title: "Features missing values",
    description: "Ensure specified features do not have missing values.",
    tags: ["DATA QUALITY"],
    href: "/tests/catalog/features-missing-values",
    icon: "/icons/18-grid-empty-obj-bottom-right.svg"
  }, {
    title: "Feature values",
    description: "Validate feature values against expected ranges or patterns.",
    tags: ["DATA QUALITY"],
    href: "/tests/catalog/feature-values",
    icon: "/icons/18-grid-empty-obj-bottom-right-x.svg"
  }, {
    title: "Correlated features",
    description: "Detect highly correlated features in your dataset.",
    tags: ["DATA QUALITY"],
    href: "/tests/catalog/correlated-feature-count",
    icon: "/icons/18-chart-stacked-area.svg"
  }, {
    title: "Quasi-constant features",
    description: "Identify features with very low variance (quasi-constant).",
    tags: ["DATA QUALITY"],
    href: "/tests/catalog/quasi-constant-feature-count",
    icon: "/icons/18-chart-bar-axis-x.svg"
  }, {
    title: "Quasi-constant feature",
    description: "Detect individual quasi-constant features in your data.",
    tags: ["DATA QUALITY"],
    href: "/tests/catalog/quasi-constant-feature",
    icon: "/icons/18-chart-bar-axis-x.svg"
  }, {
    title: "Training-validation leakage",
    description: "Detect data leakage between training and validation sets.",
    tags: ["DATA QUALITY"],
    href: "/tests/catalog/train-val-leakage-count",
    icon: "/icons/18-flask.svg"
  }, {
    title: "String validation",
    description: "Validate string data against patterns and constraints.",
    tags: ["DATA QUALITY"],
    href: "/tests/catalog/string-validation",
    icon: "/icons/18-string-contains.svg"
  }, {
    title: "Contains valid URL",
    description: "Validate that text contains properly formatted URLs.",
    tags: ["DATA QUALITY"],
    href: "/tests/catalog/contains-valid-url",
    icon: "/icons/18-link.svg"
  }, {
    title: "Is code",
    description: "Detect whether text content contains code snippets.",
    tags: ["DATA QUALITY"],
    href: "/tests/catalog/is-code",
    icon: "/icons/18-code.svg"
  }, {
    title: "Is JSON",
    description: "Validate that text content is properly formatted JSON.",
    tags: ["DATA QUALITY"],
    href: "/tests/catalog/is-json",
    icon: "/icons/18-code.svg"
  }, {
    title: "Ill-formed count",
    description: "Count and monitor ill-formed or malformed data entries.",
    tags: ["DATA QUALITY"],
    href: "/tests/catalog/ill-formed-count",
    icon: "/icons/18-circle-hashtag.svg"
  }, {
    title: "Special characters ratio",
    description: "Monitor the ratio of special characters in text data.",
    tags: ["DATA QUALITY"],
    href: "/tests/catalog/special-characters-ratio",
    icon: "/icons/18-circle-asterisk.svg"
  }, {
    title: "Size ratio",
    description: "Check the ratio between the number of rows in the validation and training datasets.",
    tags: ["DATA DRIFT"],
    href: "/tests/catalog/size-ratio",
    icon: "/icons/18-flask.svg"
  }, {
    title: "Predictive power score value",
    description: "PPS (predictive power score) for a feature must be in specific range.",
    tags: ["DATA QUALITY", "SAFETY"],
    href: "/tests/catalog/pp-score-value-validation",
    icon: "/icons/18-resize-x.svg"
  }, {
    title: "Column B contains column A value",
    description: "Check that values in column A are contained in the lists in column B.",
    tags: ["DATA QUALITY"],
    href: "/tests/catalog/expect-column-a-to-be-in-column-b",
    icon: "/icons/18-table-search.svg"
  }, {
    title: "Accuracy",
    description: "Overall classification correctness.",
    tags: ["METRICS"],
    href: "/tests/catalog/accuracy",
    icon: "/icons/18-bullseye.svg"
  }, {
    title: "F1",
    description: "Harmonic mean of precision and recall.",
    tags: ["METRICS"],
    href: "/tests/catalog/f1",
    icon: "/icons/18-align-2-horizontal.svg"
  }, {
    title: "False positive rate",
    description: "Ratio of false positives to the sum of true negatives and false positives.",
    tags: ["METRICS"],
    href: "/tests/catalog/false-positive-rate",
    icon: "/icons/18-square-dashed-plus.svg"
  }, {
    title: "Geometric mean",
    description: "Square root of the product of the precision and the recall.",
    tags: ["METRICS"],
    href: "/tests/catalog/geometric-mean",
    icon: "/icons/18-equation.svg"
  }, {
    title: "Log loss",
    description: "Also known as logarithmic loss or cross-entropy loss, measures the performance of a classification model that outputs probabilities.",
    tags: ["METRICS"],
    href: "/tests/catalog/log-loss",
    icon: "/icons/18-octagon-question.svg"
  }, {
    title: "Precision",
    description: "Ratio of true positives to the sum of true positives and false positives.",
    tags: ["METRICS"],
    href: "/tests/catalog/precision",
    icon: "/icons/18-crosshairs.svg"
  }, {
    title: "ROC AUC",
    description: "Area under the receiver operating characteristic curve.",
    tags: ["METRICS"],
    href: "/tests/catalog/roc-auc",
    icon: "/icons/18-chart-area.svg"
  }, {
    title: "Recall",
    description: "Ratio of true positives to the sum of true positives and false negatives.",
    tags: ["METRICS"],
    href: "/tests/catalog/recall",
    icon: "/icons/18-circle-percentage.svg"
  }, {
    title: "Mean absolute error (MAE)",
    description: "Average absolute difference between the predicted and actual values.",
    tags: ["METRICS"],
    href: "/tests/catalog/mae",
    icon: "/icons/18-measure.svg"
  }, {
    title: "Mean absolute percentage error (MAPE)",
    description: "Mean absolute percentage error (MAPE) regression loss.",
    tags: ["METRICS"],
    href: "/tests/catalog/mape",
    icon: "/icons/18-measure.svg"
  }, {
    title: "Mean squared error (MSE)",
    description: "Average squared difference between the predicted and actual values.",
    tags: ["METRICS"],
    href: "/tests/catalog/mse",
    icon: "/icons/18-measure.svg"
  }, {
    title: "Root mean squared error (RMSE)",
    description: "Square root of the average squared difference between the predicted and actual values.",
    tags: ["METRICS"],
    href: "/tests/catalog/rmse",
    icon: "/icons/18-measure.svg"
  }, {
    title: "R-squared",
    description: "Coefficient of determination. Measures the proportion of the variance in the dependent variable that is predictable from the independent variables.",
    tags: ["METRICS"],
    href: "/tests/catalog/r2",
    icon: "/icons/18-measure.svg"
  }];
  const filteredTests = tests.filter(test => {
    const matchesSearch = test.title.toLowerCase().includes(searchTerm.toLowerCase()) || test.description.toLowerCase().includes(searchTerm.toLowerCase());
    const matchesTag = selectedType === 'all' || test.tags && test.tags.some(tag => tag.toLowerCase().includes(selectedType.toLowerCase()));
    return matchesSearch && matchesTag;
  });
  const tagOptions = ['all', 'USES LLMS', 'METRICS', 'AGENTIC', 'DATA QUALITY', 'DATA DRIFT', 'EU AI ACT', 'OWASP', 'SAFETY', 'USAGE METRICS'];
  return <div className="px-3 sm:px-5 lg:pr-10 lg:pl-[5.5rem] mx-auto max-w-6xl w-full pt-2 sm:pt-4 lg:pt-8">
<header id="header" className="relative">
<div className="mt-0.5 space-y-2.5">
<div className="eyebrow h-5 text-primary dark:text-primary-light text-sm font-semibold">Catalog</div>
<div className="flex flex-col sm:flex-row items-start sm:items-center relative gap-2">
<h1 id="page-title" className="inline-block text-2xl sm:text-3xl font-bold text-gray-900 tracking-tight dark:text-white">Browse tests</h1>
</div>
</div>
<div className="mt-2 text-lg prose prose-gray dark:prose-invert">
<p>Browse the full test catalog</p>
</div>
</header>

      <div className="flex flex-col gap-8"></div>
      <div className="relative mt-8 mb-14">
        <div className="border border-gray-200 dark:border-gray-800 rounded-lg p-4 sm:p-6 mb-6 sm:mb-8">
          <div className="mb-6">
            <input type="text" placeholder="Search tests by name or description..." value={searchTerm} onChange={e => setSearchTerm(e.target.value)} className="w-full px-3 sm:px-4 py-2 sm:py-3 text-sm sm:text-base border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent bg-transparent text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400" />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">
              Filter by tags
            </label>
            <div className="flex flex-wrap gap-1 sm:gap-2">
              {tagOptions.map(tag => <button key={tag} onClick={() => setSelectedType(tag)} className={`px-3 py-1.5 text-sm font-medium rounded-full transition-colors ${selectedType === tag ? "bg-primary text-white" : "bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"}`}>
                  {tag === 'all' ? 'All Tests' : tag}
                </button>)}
            </div>
          </div>
        </div>

        <div className={`space-y-4 ${filteredTests.length === 0 ? 'min-h-[400px] flex items-center justify-center' : 'min-h-[800px]'}`}>
          {filteredTests.length > 0 ? filteredTests.map((test, index) => <a key={index} href={test.href} className="flex flex-col sm:flex-row sm:items-start p-4 sm:p-6 border border-gray-200 dark:border-gray-800 hover:border-gray-300 dark:hover:border-gray-700 transition-all duration-200 rounded-lg cursor-pointer group gap-3 sm:gap-0">
                <div className="flex items-start gap-2 sm:gap-4 flex-1">
                  <div className="flex-shrink-0 mt-1">
                    <div className="w-8 h-8 sm:w-10 sm:h-10 bg-gray-50/50 dark:bg-gray-800/100 border border-gray-200/50 dark:border-gray-700/50 rounded-lg flex items-center justify-center">
                        <img src={typeof window !== 'undefined' && window.location.hostname === 'www.openlayer.com' ? `/docs${test.icon}` : test.icon} alt="" className="w-4 h-4 sm:w-5 sm:h-5 dark:brightness-0 dark:invert" />
                    </div>
                  </div>
                  <div className="flex-1 min-w-0">
                    <h3 className="text-sm sm:text-base font-medium text-gray-900 dark:text-white mb-1 sm:mb-2 group-hover:text-primary dark:group-hover:text-primary-light transition-colors">
                      {test.title}
                    </h3>
                    <p className="text-xs sm:text-sm text-gray-600 dark:text-gray-400 leading-relaxed mb-0 sm:mb-0">
                      {test.description}
                    </p>
                  </div>
                </div>
                <div className="flex flex-wrap gap-1 items-start sm:flex-shrink-0 sm:ml-4">
                  {test.tags && test.tags.map((tag, tagIndex) => <span key={tagIndex} className="px-1 py-0.5 text-xs font-medium rounded bg-gray-50 text-gray-700 border border-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-700">
                        {tag}
                      </span>)}
                </div>
              </a>) : <div className="text-center py-12">
              <h3 className="text-xl font-semibold text-gray-900 dark:text-gray-200 mb-2">
                No tests found
              </h3>
              <p className="text-gray-600 dark:text-gray-400">
                Try adjusting your search terms or filters to find what you're looking for.
              </p>
            </div>}
        </div>
      </div>
    </div>;
};

<TestCatalog />