# Tenant Explorer

return (
  );
}

  const { colorMode } = useColorMode();
  const dark = colorMode === 'dark';
  return (
    <a
      href={href}
        display: 'flex',
        flexDirection: 'column',
        padding: '24px',
        borderRadius: '10px',
        textDecoration: 'none',
        border: `1px solid ${dark ? 'rgba(255,255,255,0.08)' : '#e2e8f0'}`,
        background: dark ? 'rgba(255,255,255,0.02)' : '#fff',
        transition: 'background 0.15s, transform 0.15s',
      }}
      {Icon && <Icon size={22} color={dark ? '#8b949e' : '#6b7280'} style={{ marginBottom: 10 }} />}
      <span style={{ fontSize: '13px', color: '#009BDE', fontWeight: 500 }}>
        {action} &rarr;
      </span>
    </a>
  );
}

Browse and explore the EaaS tenant configuration schema interactively.

  <ToolCard
    href="/tenant-schema.html"
    action="Open Schema Viewer"
    Icon={BookOpen}
  />
  <ToolCard
    href="/validator"
    action="Open Validator"
    Icon={CheckCircle}
  />
  <ToolCard
    href="/tenant-builder"
    action="Open Builder"
    Icon={Wrench}
  />
  <ToolCard
    href="/examples"
    action="Browse Examples"
    Icon={FileText}
  />