Skip to content

feat(use-cases): homepage and showcase improvements #857

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
CGQAQ wants to merge 4 commits into from
Closed

feat(use-cases): homepage and showcase improvements #857

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3559977
fix(use-cases): fix quick start cards layout with horizontal scroll
CGQAQ Feb 11, 2026
695f5f7
feat(use-cases): enable all shadcn component demos
CGQAQ Feb 11, 2026
108dd46
fix(use-cases): allow quick start cards to expand when few items
CGQAQ Feb 11, 2026
ce319fb
feat(use-cases): hide Shadcn UI quick start card in production
CGQAQ Feb 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 15 additions & 5 deletions use_cases/src/pages/HomePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,7 @@ type QuickStartItem = {
to: string;
icon: LucideIcons;
gradient: string;
hidden?: boolean;
};

const quickStart: QuickStartItem[] = [
Expand All @@ -142,6 +143,14 @@ const quickStart: QuickStartItem[] = [
icon: LucideIcons.sparkles,
gradient: 'linear-gradient(135deg, #f97316, #f59e0b)',
},
{
title: 'Shadcn UI',
desc: 'Popular React component library',
to: '/shadcn-showcase',
icon: LucideIcons.box,
gradient: 'linear-gradient(135deg, #8b5cf6, #ec4899)',
hidden: !import.meta.env.DEV,
}
];

export const HomePage: React.FC = () => {
Expand All @@ -152,10 +161,10 @@ export const HomePage: React.FC = () => {
style={{
background: item.gradient,
borderRadius: '16px',
padding: '20px 16px',
padding: '14px 12px',
cursor: 'pointer',
flex: '1',
minWidth: '0',
minWidth: '130px',
display: 'flex',
flexDirection: 'column',
gap: '10px',
Expand All @@ -175,7 +184,7 @@ export const HomePage: React.FC = () => {
</div>
<div>
<div style={{
fontSize: '16px',
fontSize: '15px',
fontWeight: 700,
color: '#fff',
marginBottom: '2px',
Expand Down Expand Up @@ -348,9 +357,10 @@ export const HomePage: React.FC = () => {
}}>Quick Start</div>
<div style={{
display: 'flex',
gap: '12px',
gap: '10px',
overflowX: 'auto' as const,
}}>
{quickStart.map((qs) => (
{quickStart.filter((qs) => !qs.hidden).map((qs) => (
<QuickStartCard key={qs.to} item={qs} />
))}
</div>
Expand Down
20 changes: 10 additions & 10 deletions use_cases/src/pages/ShadcnShowcasePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,42 +33,42 @@ export const ShadcnShowcasePage: React.FC = () => {
<div className="mb-5 bg-surface-secondary rounded-xl shadow overflow-hidden border border-line">
<Item label="Buttons" desc="Primary, secondary, destructive, outline, ghost variants" to="/shadcn/buttons" />
<Item label="Icon Button" desc="Icon-only buttons with Lucide icons" to="/shadcn/icon-button" />
{/*<Item label="Input" desc="Text input with various types and states" to="/shadcn/input" />*/}
<Item label="Input" desc="Text input with various types and states" to="/shadcn/input" />
<Item label="Checkbox & Switch" desc="Toggle controls for forms" to="/shadcn/checkbox-switch" />
{/*<Item label="Select & Combobox" desc="Dropdown selection components" to="/shadcn/select" />*/}
{/*<Item label="Slider" desc="Range selection slider" to="/shadcn/slider" />*/}
{/*<Item label="Radio Group" desc="Single selection from multiple options" to="/shadcn/radio" />*/}
{/*<Item label="Form" desc="Form state management with validation" to="/shadcn/form" />*/}
<Item label="Select & Combobox" desc="Dropdown selection components" to="/shadcn/select" />
<Item label="Slider" desc="Range selection slider" to="/shadcn/slider" />
<Item label="Radio Group" desc="Single selection from multiple options" to="/shadcn/radio" />
<Item label="Form" desc="Form state management with validation" to="/shadcn/form" />
</div>

<h2 className="text-lg font-semibold text-fg-primary mb-3 pl-3 border-l-4 border-zinc-500">Display Components</h2>
<div className="mb-5 bg-surface-secondary rounded-xl shadow overflow-hidden border border-line">
<Item label="Card" desc="Container with header, content, and footer" to="/shadcn/card" />
<Item label="Alert & Badge" desc="Notifications and status indicators" to="/shadcn/alert-badge" />
<Item label="Avatar" desc="User profile images" to="/shadcn/avatar" />
{/*<Item label="Progress" desc="Loading and progress indicators" to="/shadcn/progress" />*/}
{/*<Item label="Skeleton" desc="Loading placeholder animations" to="/shadcn/skeleton" />*/}
<Item label="Progress" desc="Loading and progress indicators" to="/shadcn/progress" />
<Item label="Skeleton" desc="Loading placeholder animations" to="/shadcn/skeleton" />
</div>

<h2 className="text-lg font-semibold text-fg-primary mb-3 pl-3 border-l-4 border-zinc-500">Navigation & Layout</h2>
<div className="mb-5 bg-surface-secondary rounded-xl shadow overflow-hidden border border-line">
{/*<Item label="Tabs" desc="Tabbed content navigation" to="/shadcn/tabs" />*/}
<Item label="Tabs" desc="Tabbed content navigation" to="/shadcn/tabs" />
<Item label="Accordion" desc="Collapsible content sections" to="/shadcn/accordion" />
<Item label="Dialog & Sheet" desc="Modal dialogs and bottom sheets" to="/shadcn/dialog" />
<Item label="Breadcrumb" desc="Navigation hierarchy" to="/shadcn/breadcrumb" />
</div>

<h2 className="text-lg font-semibold text-fg-primary mb-3 pl-3 border-l-4 border-zinc-500">Data & Pickers</h2>
<div className="mb-5 bg-surface-secondary rounded-xl shadow overflow-hidden border border-line">
{/*<Item label="Table" desc="Data table with headers and rows" to="/shadcn/table" />*/}
<Item label="Table" desc="Data table with headers and rows" to="/shadcn/table" />
<Item label="Calendar & Date Picker" desc="Date selection components" to="/shadcn/calendar" />
</div>

<h2 className="text-lg font-semibold text-fg-primary mb-3 pl-3 border-l-4 border-zinc-500">Menus & Overlays</h2>
<div className="mb-5 bg-surface-secondary rounded-xl shadow overflow-hidden border border-line">
<Item label="Dropdown Menu" desc="Action menu dropdowns" to="/shadcn/dropdown" />
<Item label="Context Menu" desc="Right-click context menus" to="/shadcn/context-menu" />
{/*<Item label="Popover & Tooltip" desc="Floating content and hints" to="/shadcn/popover" />*/}
<Item label="Popover & Tooltip" desc="Floating content and hints" to="/shadcn/popover" />
</div>
</div>
</WebFListView>
Expand Down
Loading