Delete tablet mockups page
cgen-6cca2520e5ec4f5e9ed97acff3723e90
This commit is contained in:
Builder.io
parent
7397c2469a
commit
f4e33c7922
1 changed files with 0 additions and 437 deletions
|
|
@ -1,437 +0,0 @@
|
|||
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<string, string> = {
|
||||
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 (
|
||||
<div className="flex h-[600px] gap-0 border border-border/40 rounded-xl overflow-hidden bg-background">
|
||||
{/* Sidebar */}
|
||||
<div className="w-24 bg-gray-900/50 border-r border-border/40 flex flex-col items-center py-4 gap-3">
|
||||
{ARMS.map((arm) => (
|
||||
<button
|
||||
key={arm.id}
|
||||
className={`h-12 w-12 rounded-lg ${arm.bgColor} flex items-center justify-center hover:scale-110 transition-transform duration-200 group`}
|
||||
>
|
||||
<img
|
||||
src={LOGO_URLS[arm.id]}
|
||||
alt={arm.name}
|
||||
className="h-8 w-8 object-contain"
|
||||
/>
|
||||
<div className="absolute left-24 top-1/2 -translate-y-1/2 px-2 py-1 bg-gray-900 rounded text-xs text-white opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap pointer-events-none">
|
||||
{arm.name}
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{/* Content Area */}
|
||||
<div className="flex-1 p-8 flex flex-col items-center justify-center text-center">
|
||||
<h3 className="text-2xl font-bold mb-4">Vertical Sidebar</h3>
|
||||
<p className="text-muted-foreground max-w-xs">
|
||||
Fixed sidebar with arm icons on the left. Tooltips appear on hover. Good for consistent access but takes up screen width.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Mockup 2: Horizontal Scrollable Carousel
|
||||
function HorizontalCarouselMockup() {
|
||||
const [scrollPosition, setScrollPosition] = useState(0);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-[600px] border border-border/40 rounded-xl overflow-hidden bg-background">
|
||||
{/* Header with carousel */}
|
||||
<div className="bg-gray-900/50 border-b border-border/40 p-4 flex items-center gap-2">
|
||||
<button
|
||||
onClick={() =>
|
||||
setScrollPosition(Math.max(0, scrollPosition - 100))
|
||||
}
|
||||
className="p-2 hover:bg-gray-700/50 rounded-lg transition-colors"
|
||||
>
|
||||
<ChevronLeft className="w-5 h-5" />
|
||||
</button>
|
||||
|
||||
<div className="flex-1 overflow-x-auto scrollbar-hide">
|
||||
<div className="flex gap-3 pb-2" style={{ transform: `translateX(-${scrollPosition}px)` }}>
|
||||
{ARMS.map((arm) => (
|
||||
<button
|
||||
key={arm.id}
|
||||
className={`flex-shrink-0 h-12 w-12 rounded-lg ${arm.bgColor} flex items-center justify-center hover:scale-110 transition-transform duration-200`}
|
||||
>
|
||||
<img
|
||||
src={LOGO_URLS[arm.id]}
|
||||
alt={arm.name}
|
||||
className="h-8 w-8 object-contain"
|
||||
/>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => setScrollPosition(scrollPosition + 100)}
|
||||
className="p-2 hover:bg-gray-700/50 rounded-lg transition-colors"
|
||||
>
|
||||
<ChevronRight className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
{/* Content Area */}
|
||||
<div className="flex-1 p-8 flex flex-col items-center justify-center text-center">
|
||||
<h3 className="text-2xl font-bold mb-4">Horizontal Scrollable Carousel</h3>
|
||||
<p className="text-muted-foreground max-w-xs">
|
||||
Carousel with scroll arrows. Good use of horizontal space. Can show all arms at once on wider tablets.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Mockup 3: Compact Horizontal Bar
|
||||
function CompactHorizontalMockup() {
|
||||
return (
|
||||
<div className="flex flex-col h-[600px] border border-border/40 rounded-xl overflow-hidden bg-background">
|
||||
{/* Header with compact bar */}
|
||||
<div className="bg-gray-900/50 border-b border-border/40 p-4 flex items-center justify-center gap-2">
|
||||
{ARMS.map((arm) => (
|
||||
<button
|
||||
key={arm.id}
|
||||
className={`h-10 w-10 rounded-lg ${arm.bgColor} flex items-center justify-center hover:scale-110 transition-transform duration-200 group relative`}
|
||||
>
|
||||
<img
|
||||
src={LOGO_URLS[arm.id]}
|
||||
alt={arm.name}
|
||||
className="h-6 w-6 object-contain"
|
||||
/>
|
||||
<div className="absolute top-full mt-2 px-2 py-1 bg-gray-900 rounded text-xs text-white opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap pointer-events-none">
|
||||
{arm.name}
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{/* Content Area */}
|
||||
<div className="flex-1 p-8 flex flex-col items-center justify-center text-center">
|
||||
<h3 className="text-2xl font-bold mb-4">Compact Horizontal Bar</h3>
|
||||
<p className="text-muted-foreground max-w-xs">
|
||||
Minimalist horizontal bar in header. All arms visible at once. Takes minimal vertical space. Best for standard tablet widths.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Mockup 4: Grid Layout
|
||||
function GridLayoutMockup() {
|
||||
return (
|
||||
<div className="flex flex-col h-[600px] border border-border/40 rounded-xl overflow-hidden bg-background">
|
||||
{/* Header with grid toggle */}
|
||||
<div className="bg-gray-900/50 border-b border-border/40 p-6">
|
||||
<div className="grid grid-cols-5 gap-4 max-w-sm mx-auto">
|
||||
{ARMS.map((arm) => (
|
||||
<button
|
||||
key={arm.id}
|
||||
className={`aspect-square rounded-lg ${arm.bgColor} flex flex-col items-center justify-center gap-2 hover:scale-110 transition-transform duration-200 group`}
|
||||
>
|
||||
<img
|
||||
src={LOGO_URLS[arm.id]}
|
||||
alt={arm.name}
|
||||
className="h-6 w-6 object-contain"
|
||||
/>
|
||||
<span className="text-xs font-semibold text-white truncate">
|
||||
{arm.name}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{/* Content Area */}
|
||||
<div className="flex-1 p-8 flex flex-col items-center justify-center text-center">
|
||||
<h3 className="text-2xl font-bold mb-4">Grid Layout</h3>
|
||||
<p className="text-muted-foreground max-w-xs">
|
||||
Grid display for arm selection. Shows labels below each icon. Works well for modal or expandable menu.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Mockup 5: Segmented Control
|
||||
function SegmentedControlMockup() {
|
||||
const [active, setActive] = useState("labs");
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-[600px] border border-border/40 rounded-xl overflow-hidden bg-background">
|
||||
{/* Header with segmented control */}
|
||||
<div className="bg-gray-900/50 border-b border-border/40 p-4 flex items-center justify-center">
|
||||
<div className="flex items-center gap-1 bg-gray-900 rounded-lg p-1">
|
||||
{ARMS.map((arm) => (
|
||||
<button
|
||||
key={arm.id}
|
||||
onClick={() => setActive(arm.id)}
|
||||
className={`px-3 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
|
||||
active === arm.id
|
||||
? `${arm.bgColor} text-white border border-white/20`
|
||||
: "text-gray-400 hover:text-gray-200"
|
||||
}`}
|
||||
>
|
||||
{arm.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{/* Content Area */}
|
||||
<div className="flex-1 p-8 flex flex-col items-center justify-center text-center">
|
||||
<h3 className="text-2xl font-bold mb-4">Segmented Control</h3>
|
||||
<p className="text-muted-foreground max-w-xs">
|
||||
Mobile-style segmented picker. Clearly shows active arm. Clean and familiar pattern. May overflow on smaller tablets.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Mockup 6: Floating Pill Button
|
||||
function FloatingPillMockup() {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-[600px] border border-border/40 rounded-xl overflow-hidden bg-background relative">
|
||||
{/* Content Area */}
|
||||
<div className="flex-1 p-8 flex flex-col items-center justify-center text-center">
|
||||
<h3 className="text-2xl font-bold mb-4">Floating Pill Button</h3>
|
||||
<p className="text-muted-foreground max-w-xs">
|
||||
FAB-style floating button. Minimalist. Expands when clicked to show options. Doesn't take up header space.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Floating Pill */}
|
||||
<div className="fixed bottom-8 right-8">
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className="h-14 w-14 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center hover:scale-110 transition-transform duration-200 shadow-lg"
|
||||
>
|
||||
<span className="text-white font-bold text-xl">A</span>
|
||||
</button>
|
||||
|
||||
{isOpen && (
|
||||
<>
|
||||
{/* Backdrop */}
|
||||
<div
|
||||
className="fixed inset-0 z-40"
|
||||
onClick={() => setIsOpen(false)}
|
||||
/>
|
||||
{/* Pill Menu */}
|
||||
<div className="absolute bottom-20 right-0 z-50 bg-gray-900/95 backdrop-blur-xl border border-gray-700/50 rounded-full px-4 py-3 flex gap-2 shadow-2xl animate-in fade-in zoom-in-95">
|
||||
{ARMS.map((arm) => (
|
||||
<button
|
||||
key={arm.id}
|
||||
className={`h-10 w-10 rounded-full ${arm.bgColor} flex items-center justify-center hover:scale-110 transition-transform duration-200 group`}
|
||||
>
|
||||
<img
|
||||
src={LOGO_URLS[arm.id]}
|
||||
alt={arm.name}
|
||||
className="h-6 w-6 object-contain"
|
||||
/>
|
||||
<div className="absolute bottom-full mb-2 px-2 py-1 bg-gray-900 rounded text-xs text-white opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap pointer-events-none">
|
||||
{arm.name}
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
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 (
|
||||
<div className="min-h-screen bg-aethex-gradient py-12 px-4">
|
||||
<div className="container mx-auto max-w-6xl">
|
||||
<div className="mb-12 text-center">
|
||||
<h1 className="text-4xl font-bold mb-4">
|
||||
Tablet Arm Switcher Mockups
|
||||
</h1>
|
||||
<p className="text-muted-foreground max-w-2xl mx-auto">
|
||||
Six different navigation patterns for the arm switcher on tablet screens. Click through each mockup to see how they interact.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-12">
|
||||
{mockups.map((mockup) => {
|
||||
const Component = mockup.component;
|
||||
return (
|
||||
<div key={mockup.id} className="space-y-6">
|
||||
{/* Mockup Title */}
|
||||
<div className="text-center">
|
||||
<h2 className="text-2xl font-bold mb-2">
|
||||
{mockup.id}. {mockup.title}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{/* Mockup Display */}
|
||||
<div className="flex justify-center">
|
||||
<Component />
|
||||
</div>
|
||||
|
||||
{/* Pros & Cons */}
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<div className="bg-green-500/10 border border-green-500/30 rounded-lg p-6">
|
||||
<h3 className="font-semibold text-green-400 mb-3">Pros</h3>
|
||||
<ul className="space-y-2 text-sm text-muted-foreground">
|
||||
{mockup.pros.map((pro, idx) => (
|
||||
<li key={idx} className="flex items-start gap-2">
|
||||
<span className="text-green-400 mt-1">✓</span>
|
||||
<span>{pro}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div className="bg-red-500/10 border border-red-500/30 rounded-lg p-6">
|
||||
<h3 className="font-semibold text-red-400 mb-3">Cons</h3>
|
||||
<ul className="space-y-2 text-sm text-muted-foreground">
|
||||
{mockup.cons.map((con, idx) => (
|
||||
<li key={idx} className="flex items-start gap-2">
|
||||
<span className="text-red-400 mt-1">✗</span>
|
||||
<span>{con}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="border-t border-border/20" />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Summary */}
|
||||
<div className="mt-16 bg-gradient-to-r from-purple-500/10 via-pink-500/10 to-cyan-500/10 border border-border/40 rounded-lg p-8 space-y-4">
|
||||
<h2 className="text-2xl font-bold">Recommendation</h2>
|
||||
<p className="text-muted-foreground">
|
||||
<strong className="text-white">Mockup #3: Compact Horizontal Bar</strong> is recommended for tablet sizes. It provides:
|
||||
</p>
|
||||
<ul className="space-y-2 text-muted-foreground list-disc list-inside">
|
||||
<li>All arm logos visible at once without scrolling</li>
|
||||
<li>Minimal header height (perfect for tablets in landscape)</li>
|
||||
<li>Consistent experience with desktop version</li>
|
||||
<li>Smooth transition between breakpoints</li>
|
||||
<li>Touch-friendly spacing and interactions</li>
|
||||
</ul>
|
||||
<p className="text-muted-foreground">
|
||||
This creates a natural progression: Mobile expandable logo → Tablet compact bar → Desktop full horizontal spacing.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue