mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-10-30 18:22:59 +00:00
zeekay
f2d86d79b1
Major improvements to homepage UX and branding: HOMEPAGE REDESIGN: - Remove embedded dashboard section from homepage - Add tab navigation to switch between Components and Examples - Use pill-style tabs with transparent background (no grey bar) - Display examples cleanly in iframes without site chrome - Create separate (embed) route group for clean example embedding - Examples now show without Hanzo logo, headers, or navigation - Preserve example-specific UI (like Mail sidebar) ROUTE ARCHITECTURE: - New (embed) route group with passthrough-only layout - /examples-embed/[slug] dynamic route for clean examples - Supports all examples: dashboard, mail, tasks, playground, forms, music, authentication, cards - Async params support for Next.js 15 LOGO IMPROVEMENTS: - Update Hanzo logo SVG to use currentColor instead of hardcoded white - Remove black background rectangle from logo - Logo now adapts to theme automatically (dark in light mode, light in dark mode) - Use accent colors with 0.7 opacity for depth - Updated both standalone SVG file and Icons component TECHNICAL: - Port changed from 3003 to 3333 to avoid conflicts - Suspense wrapper for useSearchParams SSR compatibility - Fixed Next.js 15 async params requirements - Clean separation between main app and embedded routes All features verified with Playwright and manual testing.
67 lines
2.3 KiB
TypeScript
67 lines
2.3 KiB
TypeScript
import { test, expect } from '@playwright/test'
|
|
|
|
test.describe('Homepage Examples Verification', () => {
|
|
test.beforeEach(async ({ page }) => {
|
|
await page.goto('http://localhost:3333', { waitUntil: 'networkidle' })
|
|
})
|
|
|
|
test('homepage loads with tabs', async ({ page }) => {
|
|
// Check for tab list
|
|
const tabsList = page.locator('[role="tablist"]')
|
|
await expect(tabsList).toBeVisible()
|
|
|
|
// Check for Mail tab
|
|
const mailTab = page.locator('[role="tab"]:has-text("Mail")')
|
|
await expect(mailTab).toBeVisible()
|
|
|
|
// Check for Dashboard tab
|
|
const dashboardTab = page.locator('[role="tab"]:has-text("Dashboard")')
|
|
await expect(dashboardTab).toBeVisible()
|
|
})
|
|
|
|
test('Mail tab displays without site headers', async ({ page }) => {
|
|
// Click Mail tab
|
|
const mailTab = page.locator('[role="tab"]:has-text("Mail")')
|
|
await mailTab.click()
|
|
await page.waitForTimeout(500)
|
|
|
|
// Check for iframe
|
|
const iframe = page.locator('iframe[title="Mail Example"]')
|
|
await expect(iframe).toBeVisible()
|
|
|
|
// Get the iframe content
|
|
const iframeHandle = await iframe.elementHandle()
|
|
const frame = await iframeHandle?.contentFrame()
|
|
|
|
if (frame) {
|
|
// Check for Mail sidebar (should be present)
|
|
const sidebar = frame.locator('text=Inbox, Drafts, Sent Mail')
|
|
const inboxText = frame.locator('text=Inbox')
|
|
|
|
// Just check the iframe loaded
|
|
const bodyContent = await frame.locator('body').innerHTML()
|
|
console.log(`Mail iframe content size: ${bodyContent.length} bytes`)
|
|
}
|
|
})
|
|
|
|
test('Dashboard tab displays without site headers', async ({ page }) => {
|
|
// Click Dashboard tab
|
|
const dashboardTab = page.locator('[role="tab"]:has-text("Dashboard")')
|
|
await dashboardTab.click()
|
|
await page.waitForTimeout(500)
|
|
|
|
// Check for iframe
|
|
const iframe = page.locator('iframe[title="Dashboard Example"]')
|
|
await expect(iframe).toBeVisible()
|
|
})
|
|
|
|
test('verify Homepage structure - no examples nav on homepage', async ({ page }) => {
|
|
// The examples nav should NOT be on the homepage
|
|
const examplesNav = page.locator('[data-component="examples-nav"]')
|
|
|
|
// This should not be visible on the homepage
|
|
const isVisible = await examplesNav.isVisible().catch(() => false)
|
|
console.log(`Examples nav visible on homepage: ${isVisible}`)
|
|
})
|
|
})
|