Skip to content

Commit

Permalink
ui improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@pblvrt
pblvrt committed Aug 6, 2024
1 parent 29b5aa5 commit 0b77b3a
Show file tree
Hide file tree
Showing 11 changed files with 169 additions and 188 deletions.
86 changes: 45 additions & 41 deletions packages/app/app/explore/components/ExploreTabs.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
'use client'
import { useState, useRef, useEffect } from 'react'
import { Tabs, TabsTrigger, TabsList } from '@/components/ui/tabs'
import useSearchParams from '@/lib/hooks/useSearchParams'
import { useRouter } from 'next/navigation'
import { ChevronLeft, ChevronRight } from 'lucide-react'
'use client';
import { useState, useRef, useEffect } from 'react';
import { Tabs, TabsTrigger, TabsList } from '@/components/ui/tabs';
import useSearchParams from '@/lib/hooks/useSearchParams';
import { useRouter } from 'next/navigation';
import { ChevronLeft, ChevronRight } from 'lucide-react';

const ExploreTabs = () => {
const { searchParams } = useSearchParams()
const router = useRouter()
const currentTerm = searchParams.get('searchQuery') || ''
const [showLeftArrow, setShowLeftArrow] = useState(false)
const [showRightArrow, setShowRightArrow] = useState(false)
const tabsListRef = useRef<HTMLDivElement>(null)
const { searchParams } = useSearchParams();
const router = useRouter();
const currentTerm = searchParams.get('searchQuery') || '';
const [showLeftArrow, setShowLeftArrow] = useState(false);
const [showRightArrow, setShowRightArrow] = useState(false);
const tabsListRef = useRef<HTMLDivElement>(null);

const tabData = [
{ name: 'Home', searchQuery: '' },
Expand All @@ -22,80 +22,84 @@ const ExploreTabs = () => {
{ name: 'Network States', searchQuery: 'network states' },
{ name: 'Fire side chat', searchQuery: 'fire side chat' },
{ name: 'Cryptography', searchQuery: 'cryptography' },
]
];

const handleTabChange = (value: string) => {
const newParams = new URLSearchParams(searchParams)
newParams.set('searchQuery', value)
newParams.delete('page')
const newParams = new URLSearchParams(searchParams);
newParams.set('searchQuery', value);
newParams.delete('page');

const newUrl = `${window.location.pathname}?${newParams.toString()}`
router.push(newUrl)
}
const newUrl = `${window.location.pathname}?${newParams.toString()}`;
router.push(newUrl);
};

const checkForArrows = () => {
if (tabsListRef.current) {
const { scrollLeft, scrollWidth, clientWidth } =
tabsListRef.current
setShowLeftArrow(scrollLeft > 0)
setShowRightArrow(scrollLeft < scrollWidth - clientWidth)
const { scrollLeft, scrollWidth, clientWidth } = tabsListRef.current;
setShowLeftArrow(scrollLeft > 0);
setShowRightArrow(scrollLeft < scrollWidth - clientWidth);
}
}
};

useEffect(() => {
checkForArrows()
window.addEventListener('resize', checkForArrows)
return () => window.removeEventListener('resize', checkForArrows)
}, [])
checkForArrows();
window.addEventListener('resize', checkForArrows);
return () => window.removeEventListener('resize', checkForArrows);
}, []);

const scroll = (direction: 'left' | 'right') => {
if (tabsListRef.current) {
const scrollAmount = tabsListRef.current.clientWidth / 2
const scrollAmount = tabsListRef.current.clientWidth / 2;
tabsListRef.current.scrollBy({
left: direction === 'left' ? -scrollAmount : scrollAmount,
behavior: 'smooth',
})
});
}
}
};

return (
<div className="relative w-full">
<div className=" w-full sticky top-[57px] z-[99999] bg-white pt-2 border-b">
{showLeftArrow && (
<button
onClick={() => scroll('left')}
className="absolute left-0 top-1/2 z-10 -translate-y-1/2 rounded-xl bg-white p-1 shadow-md"
aria-label="Scroll left">
aria-label="Scroll left"
>
<ChevronLeft className="h-6 w-6" />
</button>
)}
{showRightArrow && (
<button
onClick={() => scroll('right')}
className="absolute right-0 top-1/2 z-10 -translate-y-1/2 rounded-xl bg-white p-1 shadow-md"
aria-label="Scroll right">
aria-label="Scroll right"
>
<ChevronRight className="h-6 w-6" />
</button>
)}
<Tabs
defaultValue={currentTerm}
className="w-full"
onValueChange={handleTabChange}>
className="w-full mt-4"
onValueChange={handleTabChange}
>
<TabsList
ref={tabsListRef}
className="flex overflow-x-hidden overflow-y-hidden"
onScroll={checkForArrows}>
onScroll={checkForArrows}
>
{tabData.map((tab) => (
<TabsTrigger
key={tab.name}
value={tab.searchQuery}
className="whitespace-nowrap px-4 py-2 text-sm font-medium">
className="whitespace-nowrap px-4 text-md font-medium "
>
{tab.name}
</TabsTrigger>
))}
</TabsList>
</Tabs>
</div>
)
}
);
};

export default ExploreTabs
export default ExploreTabs;
102 changes: 44 additions & 58 deletions packages/app/app/explore/components/FeaturedEvents.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,93 +1,79 @@
import Link from 'next/link'
import Link from 'next/link';
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from '@/components/ui/card'

interface Event {
_id: string
name: string
description: string
start: string
end: string
logo: string
eventCover: string
location: string
slug: string
website: string
organizationId: string
}

interface Organization {
_id: string
name: string
slug: string
}
} from '@/components/ui/card';
import Image from 'next/image';
import { IExtendedEvent, IExtendedOrganization } from '@/lib/types';

interface FeaturedEventsProps {
events: Event[]
organizations: { [key: string]: Organization }
events: IExtendedEvent[];
organizations: { [key: string]: IExtendedOrganization };
}

const FeaturedEvents: React.FC<FeaturedEventsProps> = ({
events,
organizations,
}) => {
return (
<div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
<div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
{events.map((event, index) => {
const org = organizations[event.organizationId]
const eventUrl = `https://streameth.org/${org.slug}`
const org = organizations[event.organizationId];
const eventUrl = `https://streameth.org/${org.slug}`;

return (
<Link
href={eventUrl}
key={event._id}
target="_blank"
rel="noopener noreferrer">
rel="noopener noreferrer"
>
<Card
className="flex h-full flex-col overflow-hidden duration-300 ease-out hover:scale-105"
style={{ animationDelay: `${index * 150}ms` }}>
<CardHeader className="flex-shrink-0 p-0">
<img
className="relative flex h-full flex-col overflow-hidden duration-300 ease-out hover:scale-105"
style={{ animationDelay: `${index * 150}ms` }}
>
<CardHeader className="flex-shrink-0 p-0 md:p-0 lg:p-0">
<Image
src={
event.eventCover ||
event.logo ||
'https://via.placeholder.com/300x200'
event.eventCover || 'https://via.placeholder.com/300x200'
}
className="aspect-video w-full"
alt={event.name}
className="h-48 w-full object-cover"
width={300}
height={200}
/>
</CardHeader>
<CardContent className="flex flex-grow flex-col p-5">
<CardTitle className="mb-2 line-clamp-2 text-xl font-bold">
{event.name}
</CardTitle>
<CardDescription className="mb-2">
{new Date(event.start).toLocaleDateString()} -{' '}
{new Date(event.end).toLocaleDateString()}
</CardDescription>
<CardDescription className="mb-2">
{event.location}
</CardDescription>
{org && (
<div className="absolute bottom-0">
<CardContent className="flex flex-grow flex-col p-5">
<CardTitle className="mb-2 line-clamp-2 text-xl font-bold">
{event.name}
</CardTitle>
<CardDescription className="mb-2">
Organized by: {org.name}
{new Date(event.start).toLocaleDateString()} -{' '}
{new Date(event.end).toLocaleDateString()}
</CardDescription>
)}
<CardDescription className="mt-auto line-clamp-3">
{event.description}
</CardDescription>
</CardContent>
<CardDescription className="mb-2">
{event.location}
</CardDescription>
{org && (
<CardDescription className="mb-2">
Organized by: {org.name}
</CardDescription>
)}
<CardDescription className="mt-auto line-clamp-3">
{event.description}
</CardDescription>
</CardContent>
</div>
</Card>
</Link>
)
);
})}
</div>
)
}
);
};

export default FeaturedEvents
export default FeaturedEvents;
43 changes: 19 additions & 24 deletions packages/app/app/explore/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
import { HomePageProps } from '@/lib/types'
import ArchiveVideos from '../[organization]/videos/components/ArchiveVideos'
import { getFeaturedEventsData } from '../../components/misc/FeaturedEventsData'
import FeaturedEvents from './components/FeaturedEvents'
import ExploreTabs from './components/ExploreTabs'
import HomePageNavbar from '@/components/Layout/HomePageNavbar'
import { Suspense } from 'react'
import { HomePageProps } from '@/lib/types';
import ArchiveVideos from '../[organization]/videos/components/ArchiveVideos';
import { getFeaturedEventsData } from '../../components/misc/FeaturedEventsData';
import FeaturedEvents from './components/FeaturedEvents';
import ExploreTabs from './components/ExploreTabs';
import HomePageNavbar from '@/components/Layout/HomePageNavbar';
import { Suspense } from 'react';

const Home = async ({ searchParams }: HomePageProps) => {
const { events, organizations } = await getFeaturedEventsData()
const { events, organizations } = await getFeaturedEventsData();
const pages = [
{
name: 'Home',
href: `/`,
bgColor: 'bg-muted',
},
]
];
return (
<div className="flex min-h-dvh flex-col bg-white">
<HomePageNavbar
Expand All @@ -23,20 +23,15 @@ const Home = async ({ searchParams }: HomePageProps) => {
pages={pages}
showSearchBar={true}
/>
<div className="container mx-auto space-y-16 px-4 py-16 md:px-6">
<section>
<h2 className="mb-8 text-3xl font-bold text-foreground">
Featured Events
<div className="relative container mx-auto my-4 space-y-12 ">
<section className="space-y-8">
<h2 className="text-xl font-medium text-foreground">
Featured events
</h2>
<FeaturedEvents
events={events}
organizations={organizations}
/>
<FeaturedEvents events={events} organizations={organizations} />
</section>
<section>
<h2 className="mb-8 text-3xl font-bold text-foreground">
Past Sessions
</h2>
<section className="relative">
<h2 className="text-xl font-medium text-foreground">Past sessions</h2>
<ExploreTabs />
<div className="mt-8">
<Suspense fallback={<div> Loading... </div>}>
Expand All @@ -46,7 +41,7 @@ const Home = async ({ searchParams }: HomePageProps) => {
</section>
</div>
</div>
)
}
);
};

export default Home
export default Home;
2 changes: 1 addition & 1 deletion packages/app/components/Layout/HomePageNavbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -169,7 +169,7 @@ const PCNavBar = ({
const pathname = usePathname();
const isStudio = pathname.includes('studio');
return (
<NavigationMenu className="sticky top-0 z-[30] hidden w-full flex-row items-center justify-between bg-white p-2 px-4 shadow-sm md:hidden lg:flex">
<NavigationMenu className="sticky top-0 z-[30] hidden w-full flex-row items-center justify-between bg-white p-2 px-4 md:hidden lg:flex">
<div className="flex flex-1 items-center justify-start">
{showLogo && (
<Link href={`/${currentOrganization}`}>
Expand Down
2 changes: 1 addition & 1 deletion packages/app/components/misc/ConnectWalletButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export const ConnectWalletButton = ({
return (
<Button variant={'primary'} onClick={show} className={className}>
<span className="px-2 md:px-0">
{isConnected ? (ensName ?? truncatedAddress) : btnText}
{isConnected ? ensName ?? truncatedAddress : btnText}
</span>
</Button>
);
Expand Down
Loading

0 comments on commit 0b77b3a

Please sign in to comment.