mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-11-03 03:18:52 +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.
68 lines
2.0 KiB
TypeScript
68 lines
2.0 KiB
TypeScript
import { test, expect } from '@playwright/test'
|
|
|
|
// Configure to not use webServer since we have one running
|
|
test.use({
|
|
baseURL: 'http://localhost:3333',
|
|
})
|
|
|
|
test.describe('Homepage Examples Verification', () => {
|
|
test('homepage loads with tabs', async ({ page }) => {
|
|
await page.goto('/')
|
|
|
|
// 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()
|
|
|
|
console.log('✓ Homepage loads with tabs')
|
|
})
|
|
|
|
test('Mail tab displays correctly', async ({ page }) => {
|
|
await page.goto('/')
|
|
|
|
// Click Mail tab
|
|
const mailTab = page.locator('[role="tab"]:has-text("Mail")')
|
|
await mailTab.click()
|
|
await page.waitForTimeout(1000)
|
|
|
|
// Check for iframe
|
|
const iframe = page.locator('iframe[title="Mail Example"]')
|
|
await expect(iframe).toBeVisible()
|
|
|
|
const src = await iframe.getAttribute('src')
|
|
console.log(`✓ Mail iframe src: ${src}`)
|
|
|
|
// Try to access iframe content
|
|
const iframeLocator = page.frameLocator('iframe[title="Mail Example"]')
|
|
const body = iframeLocator.locator('body')
|
|
await expect(body).toBeVisible()
|
|
|
|
console.log('✓ Mail tab displays with iframe')
|
|
})
|
|
|
|
test('Dashboard tab displays correctly', async ({ page }) => {
|
|
await page.goto('/')
|
|
|
|
// Click Dashboard tab
|
|
const dashboardTab = page.locator('[role="tab"]:has-text("Dashboard")')
|
|
await dashboardTab.click()
|
|
await page.waitForTimeout(1000)
|
|
|
|
// Check for iframe
|
|
const iframe = page.locator('iframe[title="Dashboard Example"]')
|
|
await expect(iframe).toBeVisible()
|
|
|
|
const src = await iframe.getAttribute('src')
|
|
console.log(`✓ Dashboard iframe src: ${src}`)
|
|
|
|
console.log('✓ Dashboard tab displays with iframe')
|
|
})
|
|
})
|