Skip to content

Commit 0a0370e

Browse files
lassejacolassejaco
committed
new drawer component
1 parent fcfab6b commit 0a0370e

8 files changed

Lines changed: 339 additions & 199 deletions

File tree

‎devconnect-app/src/app/map/venue-map/VenueMap2.tsx‎

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import css from './map.module.scss';
2222
import { X } from 'lucide-react';
2323
import { useSearchParams, useRouter } from 'next/navigation';
2424
import { getViewportPosition } from './utils/svgToLookup';
25+
import FlexibleDrawer from 'lib/components/flexible-drawer';
2526

2627
const MapPane = (props: {
2728
selection: string | null;
@@ -39,23 +40,17 @@ const MapPane = (props: {
3940
window.location.href = '/quests/app-showcase#14';
4041
};
4142

43+
const paneOpen = !!selection;
44+
4245
return (
43-
<div
44-
className={cn(
45-
'absolute z-[1] bottom-0 left-0 right-0 transition-all duration-300 translate-y-[100%] opacity-0',
46-
selection && '!translate-y-[0%] opacity-100',
47-
css['map']
48-
)}
49-
// Don't let the click/touch events bubble up to the panzoom container
50-
onClick={(e) => {
51-
e.stopPropagation();
52-
}}
53-
onTouchEnd={(e) => {
54-
e.stopPropagation();
55-
}}
46+
<FlexibleDrawer
47+
open={paneOpen}
48+
onOpenChange={() => setCurrentFilters(initialFilters)}
49+
className="bg-gradient-to-t from-[#F6B40E] to-[#AAA7FF] bg-white/70 bg-blend-normal"
50+
hideHandle={true}
5651
>
5752
<SupporterInfo onClose={handleClose} onBack={handleBack} />
58-
</div>
53+
</FlexibleDrawer>
5954
);
6055
};
6156

‎devconnect-app/src/app/onboarding/WalletTab.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -30,17 +30,17 @@ export default function HomePage() {
3030
}
3131
}, [isConnected, address, isPara]);
3232

33-
useEffect(() => {
34-
console.log('🔄 [ONBOARDING] Connection status:', address);
35-
if (
36-
typeof window !== 'undefined' &&
37-
window.location.pathname === '/onboarding' &&
38-
address
39-
) {
40-
console.log('🔄 [ONBOARDING] Redirecting to wallet');
41-
router.push('/wallet');
42-
}
43-
}, [address]);
33+
// useEffect(() => {
34+
// console.log('🔄 [ONBOARDING] Connection status:', address);
35+
// if (
36+
// typeof window !== 'undefined' &&
37+
// window.location.pathname === '/onboarding' &&
38+
// address
39+
// ) {
40+
// console.log('🔄 [ONBOARDING] Redirecting to wallet');
41+
// router.push('/wallet');
42+
// }
43+
// }, [address]);
4444

4545
return (
4646
<>

‎devconnect-app/src/app/page-content.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -35,17 +35,17 @@ export default function HomePageContent({
3535
}: {
3636
atprotoEvents: any[];
3737
}) {
38-
const router = useRouter();
39-
const { address } = useUnifiedConnection();
38+
// const router = useRouter();
39+
// const { address } = useUnifiedConnection();
4040

41-
useEffect(() => {
42-
const isSkipped = localStorage.getItem('loginIsSkipped');
41+
// useEffect(() => {
42+
// const isSkipped = localStorage.getItem('loginIsSkipped');
4343

44-
if (!isSkipped && address) {
45-
console.log('🔄 [HOME] Redirecting to onboarding');
46-
router.push('/onboarding');
47-
}
48-
}, [router, address]);
44+
// if (!isSkipped && address) {
45+
// console.log('🔄 [HOME] Redirecting to onboarding');
46+
// router.push('/onboarding');
47+
// }
48+
// }, [router, address]);
4949

5050
return (
5151
<PageLayout title="Ethereum World's Fair" tabs={homeTabs()}>

‎devconnect-app/src/config/nav-items.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@ export const NAV_ITEMS: NavItem[] = [
2828
icon: ProgrammeIcon,
2929
backgroundColor: 'rgba(255, 133, 166, 0.15)',
3030
isActive: (pathname) => {
31-
console.log('pathname', pathname);
3231
return (
3332
pathname === '/' ||
3433
pathname.split('/').pop() === 'schedule' ||

‎lib/components/flexible-drawer/index.tsx‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
"use client";
2+
3+
import * as React from "react";
4+
import { Drawer, DrawerContent } from "lib/components/ui/drawer";
5+
import cn from "classnames";
6+
7+
function useMediaQuery(query: string) {
8+
const [matches, setMatches] = React.useState(false);
9+
10+
React.useEffect(() => {
11+
const media = window.matchMedia(query);
12+
if (media.matches !== matches) {
13+
setMatches(media.matches);
14+
}
15+
const listener = () => setMatches(media.matches);
16+
media.addEventListener("change", listener);
17+
return () => media.removeEventListener("change", listener);
18+
}, [matches, query]);
19+
20+
return matches;
21+
}
22+
23+
const FlexibleDrawer = ({
24+
children,
25+
open,
26+
onOpenChange,
27+
className,
28+
hideHandle = false,
29+
}: {
30+
children: React.ReactNode;
31+
open: boolean;
32+
onOpenChange: (open: boolean) => void;
33+
className?: string;
34+
hideHandle?: boolean;
35+
}) => {
36+
const isMd = useMediaQuery("(min-width: 768px)");
37+
38+
// Desktop: inline absolutely positioned drawer
39+
if (isMd) {
40+
return (
41+
<>
42+
{/* Backdrop */}
43+
{/* <div
44+
className="fixed inset-0 bg-black/50 z-40"
45+
onClick={() => onOpenChange(false)}
46+
/> */}
47+
{/* Drawer content */}
48+
<div
49+
className={cn(
50+
"absolute left-0 bottom-0 right-0 w-full bg-white shadow-xl z-50 overflow-auto transition-transform duration-300 ease-in-out",
51+
open ? "translate-y-0" : "translate-y-full",
52+
className
53+
)}
54+
onClick={(e) => e.stopPropagation()}
55+
onTouchEnd={(e) => e.stopPropagation()}
56+
>
57+
{children}
58+
</div>
59+
</>
60+
);
61+
}
62+
63+
// Mobile: shadcn drawer (bottom sheet)
64+
return (
65+
<Drawer open={open} onOpenChange={onOpenChange}>
66+
<DrawerContent
67+
className={className}
68+
hideHandle={hideHandle}
69+
onClick={(e: React.MouseEvent) => e.stopPropagation()}
70+
onTouchEnd={(e: React.TouchEvent) => e.stopPropagation()}
71+
>
72+
{children}
73+
</DrawerContent>
74+
</Drawer>
75+
);
76+
};
77+
78+
export default FlexibleDrawer;
79+
80+
/*
81+
<FlexibleDrawer
82+
83+
84+
open={open}
85+
onOpenChange={onOpenChange}
86+
>
87+
<div>
88+
Anything goes here - the drawer is just a white container
89+
</div>
90+
</FlexibleDrawer>
91+
*/

‎lib/components/ui/drawer.tsx‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
import * as React from "react";
2+
import { Drawer as DrawerPrimitive } from "vaul";
3+
4+
import { cn } from "lib/shadcn/lib/utils";
5+
6+
const Drawer = ({
7+
shouldScaleBackground = true,
8+
...props
9+
}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
10+
<DrawerPrimitive.Root
11+
shouldScaleBackground={shouldScaleBackground}
12+
{...props}
13+
/>
14+
);
15+
Drawer.displayName = "Drawer";
16+
17+
const DrawerTrigger = DrawerPrimitive.Trigger;
18+
19+
const DrawerPortal = DrawerPrimitive.Portal;
20+
21+
const DrawerClose = DrawerPrimitive.Close;
22+
23+
const DrawerOverlay = React.forwardRef<
24+
React.ElementRef<typeof DrawerPrimitive.Overlay>,
25+
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
26+
>(({ className, ...props }, ref) => (
27+
<DrawerPrimitive.Overlay
28+
ref={ref}
29+
className={cn("fixed inset-0 z-50 bg-black/80", className)}
30+
{...props}
31+
/>
32+
));
33+
DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
34+
35+
const DrawerContent = React.forwardRef<
36+
React.ElementRef<typeof DrawerPrimitive.Content>,
37+
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> & { hideHandle?: boolean }
38+
>(({ className, children, hideHandle = false, ...props }, ref) => (
39+
<DrawerPortal>
40+
<DrawerOverlay />
41+
<DrawerPrimitive.Content
42+
ref={ref}
43+
className={cn(
44+
"fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col border border-neutral-200 bg-white dark:border-neutral-800 dark:bg-neutral-950",
45+
className
46+
)}
47+
{...props}
48+
>
49+
{!hideHandle && (
50+
<div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-neutral-100 dark:bg-neutral-800" />
51+
)}
52+
{children}
53+
</DrawerPrimitive.Content>
54+
</DrawerPortal>
55+
));
56+
DrawerContent.displayName = "DrawerContent";
57+
58+
const DrawerHeader = ({
59+
className,
60+
...props
61+
}: React.HTMLAttributes<HTMLDivElement>) => (
62+
<div
63+
className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
64+
{...props}
65+
/>
66+
);
67+
DrawerHeader.displayName = "DrawerHeader";
68+
69+
const DrawerFooter = ({
70+
className,
71+
...props
72+
}: React.HTMLAttributes<HTMLDivElement>) => (
73+
<div
74+
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
75+
{...props}
76+
/>
77+
);
78+
DrawerFooter.displayName = "DrawerFooter";
79+
80+
const DrawerTitle = React.forwardRef<
81+
React.ElementRef<typeof DrawerPrimitive.Title>,
82+
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
83+
>(({ className, ...props }, ref) => (
84+
<DrawerPrimitive.Title
85+
ref={ref}
86+
className={cn(
87+
"text-lg font-semibold leading-none tracking-tight",
88+
className
89+
)}
90+
{...props}
91+
/>
92+
));
93+
DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
94+
95+
const DrawerDescription = React.forwardRef<
96+
React.ElementRef<typeof DrawerPrimitive.Description>,
97+
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
98+
>(({ className, ...props }, ref) => (
99+
<DrawerPrimitive.Description
100+
ref={ref}
101+
className={cn("text-sm text-neutral-500 dark:text-neutral-400", className)}
102+
{...props}
103+
/>
104+
));
105+
DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
106+
107+
export {
108+
Drawer,
109+
DrawerPortal,
110+
DrawerOverlay,
111+
DrawerTrigger,
112+
DrawerClose,
113+
DrawerContent,
114+
DrawerHeader,
115+
DrawerFooter,
116+
DrawerTitle,
117+
DrawerDescription,
118+
};

‎lib/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@
5050
"tinacms": "^1.5.28",
5151
"tslib": "^2.8.1",
5252
"unified": "^11.0.5",
53+
"vaul": "^1.1.2",
5354
"zustand": "^5.0.3"
5455
},
5556
"devDependencies": {

0 commit comments

Comments
 (0)