soconnor/lewisburg-coffee
1
0
Fork 0
mirror of https://github.com/soconnor0919/lewisburg-coffee.git synced 2026-02-04 23:56:32 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: Add a close button to the Drawer component and enhance the discovery panel hint's onboarding behavior.

Browse Source
This commit is contained in:
Sean O'Connor
2025-12-05 02:33:49 -05:00
parent 64d76f8347
commit 2294f0a631
2 changed files with 36 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Drawer.tsx
View File

@@ -145,7 +145,15 @@ export default function Drawer({ shop, shops, onSelect, onClose, isOpen }: Drawe
) : ( ) : (
// List View // List View
<div className="flex flex-col h-full"> <div className="flex flex-col h-full">
<div className="p-4 border-b border-border/50 bg-background/40 backdrop-blur-md"> <div className="p-4 border-b border-border/50 bg-background/40 backdrop-blur-md relative">
<Button
variant="ghost"
size="icon"
onClick={onClose}
className="absolute top-4 right-4 bg-background/20 hover:bg-background/40 text-foreground rounded-full h-8 w-8 backdrop-blur-md border border-border/50"
>
<X className="w-4 h-4" />
</Button>
<h2 className="text-xl font-bold font-serif mb-4 text-primary">Discover Coffee</h2> <h2 className="text-xl font-bold font-serif mb-4 text-primary">Discover Coffee</h2>
<div className="relative"> <div className="relative">
<Search className="absolute left-3 top-2.5 h-4 w-4 text-muted-foreground" /> <Search className="absolute left-3 top-2.5 h-4 w-4 text-muted-foreground" />

41
src/components/Navbar.tsx
View File

@@ -11,6 +11,7 @@ interface NavbarProps {
export default function Navbar({ isDiscoveryOpen, onToggleDiscovery }: NavbarProps) { export default function Navbar({ isDiscoveryOpen, onToggleDiscovery }: NavbarProps) {
const [showAbout, setShowAbout] = useState(false); const [showAbout, setShowAbout] = useState(false);
const [showTooltip, setShowTooltip] = useState(false); const [showTooltip, setShowTooltip] = useState(false);
const [isOnboarding, setIsOnboarding] = useState(false);
const handleHeaderClick = () => { const handleHeaderClick = () => {
const event = new CustomEvent('show-welcome-modal'); const event = new CustomEvent('show-welcome-modal');
@@ -23,11 +24,13 @@ export default function Navbar({ isDiscoveryOpen, onToggleDiscovery }: NavbarPro
const isMobile = window.innerWidth < 640; const isMobile = window.innerWidth < 640;
if (!hasSeenHint && isMobile) { if (!hasSeenHint && isMobile) {
setIsOnboarding(true);
const timer = setTimeout(() => { const timer = setTimeout(() => {
setShowTooltip(true); setShowTooltip(true);
// Auto-hide after 5 seconds // Auto-hide after 5 seconds
setTimeout(() => { setTimeout(() => {
setShowTooltip(false); setShowTooltip(false);
setIsOnboarding(false);
localStorage.setItem('discovery-panel-hint-seen', 'true'); localStorage.setItem('discovery-panel-hint-seen', 'true');
}, 5000); }, 5000);
}, 1000); }, 1000);
@@ -40,8 +43,8 @@ export default function Navbar({ isDiscoveryOpen, onToggleDiscovery }: NavbarPro
<div className="absolute top-4 left-4 right-4 z-[1000] flex justify-center pointer-events-none"> <div className="absolute top-4 left-4 right-4 z-[1000] flex justify-center pointer-events-none">
<div className="bg-background/60 backdrop-blur-2xl border border-border/50 shadow-2xl rounded-xl p-2 flex items-center justify-between w-full pointer-events-auto"> <div className="bg-background/60 backdrop-blur-2xl border border-border/50 shadow-2xl rounded-xl p-2 flex items-center justify-between w-full pointer-events-auto">
<div className="flex items-center gap-2 relative"> <div className="flex items-center gap-2 relative">
{/* Pulsing indicator ring */} {/* Pulsing indicator ring - only during onboarding */}
{showTooltip && ( {isOnboarding && showTooltip && (
<div className="absolute inset-0 rounded-lg animate-ping bg-primary/30 pointer-events-none" /> <div className="absolute inset-0 rounded-lg animate-ping bg-primary/30 pointer-events-none" />
)} )}
<TooltipProvider> <TooltipProvider>
@@ -53,6 +56,7 @@ export default function Navbar({ isDiscoveryOpen, onToggleDiscovery }: NavbarPro
onClick={() => { onClick={() => {
onToggleDiscovery(); onToggleDiscovery();
setShowTooltip(false); setShowTooltip(false);
setIsOnboarding(false);
localStorage.setItem('discovery-panel-hint-seen', 'true'); localStorage.setItem('discovery-panel-hint-seen', 'true');
}} }}
className={`h-10 w-10 rounded-lg hover:bg-background/40 transition-colors ${isDiscoveryOpen ? 'bg-background/40 text-primary' : 'text-muted-foreground'}`} className={`h-10 w-10 rounded-lg hover:bg-background/40 transition-colors ${isDiscoveryOpen ? 'bg-background/40 text-primary' : 'text-muted-foreground'}`}
@@ -68,18 +72,27 @@ export default function Navbar({ isDiscoveryOpen, onToggleDiscovery }: NavbarPro
</TooltipProvider> </TooltipProvider>
</div> </div>
<div <TooltipProvider>
className="flex items-center gap-3 px-2 cursor-pointer group absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" <Tooltip>
onClick={handleHeaderClick} <TooltipTrigger asChild>
> <div
<div className="bg-primary/10 p-2 rounded-lg group-hover:bg-primary/20 transition-colors"> className="flex items-center gap-3 px-2 cursor-pointer group absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
<Coffee className="h-6 w-6 text-primary" /> onClick={handleHeaderClick}
</div> >
<div> <div className="p-2 rounded-lg group-hover:bg-primary/10 transition-colors">
<h1 className="text-lg font-bold font-serif text-foreground leading-none">Lewisburg&nbsp;Coffee&nbsp;Map</h1> <Coffee className="h-6 w-6 text-primary" />
<p className="text-xs text-muted-foreground font-serif mt-0.5">Find&nbsp;your&nbsp;perfect&nbsp;brew</p> </div>
</div> <div>
</div> <h1 className="text-lg font-bold font-serif text-foreground leading-none">Lewisburg&nbsp;Coffee&nbsp;Map</h1>
<p className="text-xs text-muted-foreground font-serif mt-0.5">Find&nbsp;your&nbsp;perfect&nbsp;brew</p>
</div>
</div>
</TooltipTrigger>
<TooltipContent side="bottom" className="bg-background/80 backdrop-blur-xl border-border/50 text-foreground font-semibold shadow-2xl">
<p>About This Map</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<div className="w-10" /> {/* Spacer to balance the toggle button */} <div className="w-10" /> {/* Spacer to balance the toggle button */}
</div> </div>