From f81d595bfa7ac24db2878a39babd5ca16b6cf5a0 Mon Sep 17 00:00:00 2001 From: "Builder.io" Date: Fri, 7 Nov 2025 21:11:28 +0000 Subject: [PATCH] Create tablet arm switcher mockups page cgen-8518f0cbdd274056a3c6f0e078c899eb --- client/pages/TabletArmMockups.tsx | 437 ++++++++++++++++++++++++++++++ 1 file changed, 437 insertions(+) create mode 100644 client/pages/TabletArmMockups.tsx diff --git a/client/pages/TabletArmMockups.tsx b/client/pages/TabletArmMockups.tsx new file mode 100644 index 00000000..b2b33cfb --- /dev/null +++ b/client/pages/TabletArmMockups.tsx @@ -0,0 +1,437 @@ +import { useState } from "react"; +import { ChevronLeft, ChevronRight } from "lucide-react"; + +const ARMS = [ + { + id: "labs", + name: "Labs", + color: "#FBBF24", + bgColor: "bg-yellow-500/20", + textColor: "text-yellow-400", + }, + { + id: "gameforge", + name: "GameForge", + color: "#22C55E", + bgColor: "bg-green-500/20", + textColor: "text-green-400", + }, + { + id: "corp", + name: "Corp", + color: "#3B82F6", + bgColor: "bg-blue-500/20", + textColor: "text-blue-400", + }, + { + id: "foundation", + name: "Foundation", + color: "#EF4444", + bgColor: "bg-red-500/20", + textColor: "text-red-400", + }, + { + id: "devlink", + name: "Dev-Link", + color: "#06B6D4", + bgColor: "bg-cyan-500/20", + textColor: "text-cyan-400", + }, +]; + +const LOGO_URLS: Record = { + labs: "https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2F85fe7910cff6483db1ea99c154684844?format=webp&width=800", + gameforge: + "https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2Fcd3534c1caa0497abfd44224040c6059?format=webp&width=800", + corp: "https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2Fae654ecc18b241bdab273893e8231970?format=webp&width=800", + foundation: + "https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2Fc02cb1bf5056479bbb3ea4bd91f0d472?format=webp&width=800", + devlink: + "https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2F9a96b43cbd7b49bb9d5434580319c793?format=webp&width=800", +}; + +// Mockup 1: Vertical Sidebar +function VerticalSidebarMockup() { + return ( +
+ {/* Sidebar */} +
+ {ARMS.map((arm) => ( + + ))} +
+ {/* Content Area */} +
+

Vertical Sidebar

+

+ Fixed sidebar with arm icons on the left. Tooltips appear on hover. Good for consistent access but takes up screen width. +

+
+
+ ); +} + +// Mockup 2: Horizontal Scrollable Carousel +function HorizontalCarouselMockup() { + const [scrollPosition, setScrollPosition] = useState(0); + + return ( +
+ {/* Header with carousel */} +
+ + +
+
+ {ARMS.map((arm) => ( + + ))} +
+
+ + +
+ {/* Content Area */} +
+

Horizontal Scrollable Carousel

+

+ Carousel with scroll arrows. Good use of horizontal space. Can show all arms at once on wider tablets. +

+
+
+ ); +} + +// Mockup 3: Compact Horizontal Bar +function CompactHorizontalMockup() { + return ( +
+ {/* Header with compact bar */} +
+ {ARMS.map((arm) => ( + + ))} +
+ {/* Content Area */} +
+

Compact Horizontal Bar

+

+ Minimalist horizontal bar in header. All arms visible at once. Takes minimal vertical space. Best for standard tablet widths. +

+
+
+ ); +} + +// Mockup 4: Grid Layout +function GridLayoutMockup() { + return ( +
+ {/* Header with grid toggle */} +
+
+ {ARMS.map((arm) => ( + + ))} +
+
+ {/* Content Area */} +
+

Grid Layout

+

+ Grid display for arm selection. Shows labels below each icon. Works well for modal or expandable menu. +

+
+
+ ); +} + +// Mockup 5: Segmented Control +function SegmentedControlMockup() { + const [active, setActive] = useState("labs"); + + return ( +
+ {/* Header with segmented control */} +
+
+ {ARMS.map((arm) => ( + + ))} +
+
+ {/* Content Area */} +
+

Segmented Control

+

+ Mobile-style segmented picker. Clearly shows active arm. Clean and familiar pattern. May overflow on smaller tablets. +

+
+
+ ); +} + +// Mockup 6: Floating Pill Button +function FloatingPillMockup() { + const [isOpen, setIsOpen] = useState(false); + + return ( +
+ {/* Content Area */} +
+

Floating Pill Button

+

+ FAB-style floating button. Minimalist. Expands when clicked to show options. Doesn't take up header space. +

+
+ + {/* Floating Pill */} +
+ + + {isOpen && ( + <> + {/* Backdrop */} +
setIsOpen(false)} + /> + {/* Pill Menu */} +
+ {ARMS.map((arm) => ( + + ))} +
+ + )} +
+
+ ); +} + +export default function TabletArmMockups() { + const mockups = [ + { + id: 1, + title: "Vertical Sidebar", + component: VerticalSidebarMockup, + pros: [ + "Always visible", + "Takes minimal horizontal space", + "Tooltips for labels", + ], + cons: ["Uses vertical header space", "Reduced content area"], + }, + { + id: 2, + title: "Horizontal Scrollable Carousel", + component: HorizontalCarouselMockup, + pros: ["Scrollable", "All arms accessible", "Clean header"], + cons: ["Needs scroll controls", "Not all visible at once"], + }, + { + id: 3, + title: "Compact Horizontal Bar", + component: CompactHorizontalMockup, + pros: [ + "All arms visible", + "Minimal space", + "Clean aesthetic", + "Works like desktop", + ], + cons: ["May crowd on very narrow tablets"], + }, + { + id: 4, + title: "Grid Layout", + component: GridLayoutMockup, + pros: ["Shows labels", "Visual clarity", "Expandable"], + cons: ["Takes more space", "Requires menu or modal"], + }, + { + id: 5, + title: "Segmented Control", + component: SegmentedControlMockup, + pros: ["Familiar pattern", "Clear active state", "Mobile-friendly"], + cons: ["May overflow on small tablets", "Less visual variety"], + }, + { + id: 6, + title: "Floating Pill Button", + component: FloatingPillMockup, + pros: [ + "Doesn't take header space", + "Minimalist", + "Always accessible", + ], + cons: ["Hidden by default", "Overlaps content when open"], + }, + ]; + + return ( +
+
+
+

+ Tablet Arm Switcher Mockups +

+

+ Six different navigation patterns for the arm switcher on tablet screens. Click through each mockup to see how they interact. +

+
+ +
+ {mockups.map((mockup) => { + const Component = mockup.component; + return ( +
+ {/* Mockup Title */} +
+

+ {mockup.id}. {mockup.title} +

+
+ + {/* Mockup Display */} +
+ +
+ + {/* Pros & Cons */} +
+
+

Pros

+
    + {mockup.pros.map((pro, idx) => ( +
  • + ✓ + {pro} +
    • + ))} +
+
+
+

Cons

+
    + {mockup.cons.map((con, idx) => ( +
  • + ✗ + {con} +
    • + ))} +
+
+
+ + {/* Divider */} +
+
+ ); + })} +
+ + {/* Summary */} +
+

Recommendation

+

+ Mockup #3: Compact Horizontal Bar is recommended for tablet sizes. It provides: +

+
    +
  • All arm logos visible at once without scrolling
    • +
  • Minimal header height (perfect for tablets in landscape)
    • +
  • Consistent experience with desktop version
    • +
  • Smooth transition between breakpoints
    • +
  • Touch-friendly spacing and interactions
    • +
+

+ This creates a natural progression: Mobile expandable logo → Tablet compact bar → Desktop full horizontal spacing. +

+
+
+
+ ); +}