diff --git a/apps/www/components/CaseStudies/index.tsx b/apps/www/components/CaseStudies/index.tsx index 05f0f676296b1..3096e41c7622b 100644 --- a/apps/www/components/CaseStudies/index.tsx +++ b/apps/www/components/CaseStudies/index.tsx @@ -32,6 +32,7 @@ const CaseStudies = () => { hideAuthor: true, url: caseStudy.url.replace('/blog/', ''), path: caseStudy.path, + date: '', }} /> ))} diff --git a/apps/www/components/Events/EventListItem.tsx b/apps/www/components/Events/EventListItem.tsx index 8ff6c0bbf8ed9..91863d6a176d6 100644 --- a/apps/www/components/Events/EventListItem.tsx +++ b/apps/www/components/Events/EventListItem.tsx @@ -60,24 +60,26 @@ const EventListItem = ({ event }: Props) => { ) } -const EventDate: React.FC<{ event: PostTypes }> = ({ event }) => ( -

- {event.type === 'event' - ? dayjs(event.date).format('DD MMM YYYY') - : dayjs(event.date).tz(event.timezone).format('DD MMM YYYY')} - - - {event.type === 'event' - ? dayjs(event.date).get('minutes') > 0 - ? dayjs(event.date).format('h:mmA') - : dayjs(event.date).format('hA') - : dayjs(event.date).get('minutes') > 0 - ? dayjs(event.date).tz(event.timezone).format('h:mmA') - : dayjs(event.date).tz(event.timezone).format('hA')} - - - {dayjs(event.date).tz(event.timezone).format('z')} -

-) +const EventDate: React.FC<{ event: PostTypes }> = ({ event }) => { + const parsedDate = dayjs.utc(event.date) + + /** + * If meetups, show absolute time + timezone + * otherwise show time based on timezone + * */ + const formattedDate = event.categories?.includes('meetup') + ? parsedDate + .tz('Europe/London') + .format(`DD MMM YY, h${parsedDate.get('minutes') > 0 ? ':mmA' : 'A'}`) + : parsedDate.tz(event.timezone).format(`DD MMM YY, h:mmA`) + + return ( +

+ {formattedDate} + + {parsedDate.tz(event.timezone).format(' z')} +

+ ) +} export default EventListItem diff --git a/apps/www/components/Events/EventsFilters.tsx b/apps/www/components/Events/EventsFilters.tsx index 22766d6f1e1e1..c8abd1991adaf 100644 --- a/apps/www/components/Events/EventsFilters.tsx +++ b/apps/www/components/Events/EventsFilters.tsx @@ -3,7 +3,7 @@ import { AnimatePresence, motion } from 'framer-motion' import { startCase } from 'lodash' import { useSearchParams } from 'next/navigation' import { useRouter } from 'next/router' -import { useEffect, useState } from 'react' +import { useEffect, useRef, useState } from 'react' import { useKey } from 'react-use' import type PostTypes from '~/types/post' @@ -13,9 +13,10 @@ import { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, + Input, cn, } from 'ui' -import { ChevronDown } from 'lucide-react' +import { ChevronDown, Search, X as CloseIcon } from 'lucide-react' interface Props { allEvents: PostTypes[] @@ -30,6 +31,7 @@ interface Props { */ function EventFilters({ allEvents, setEvents, categories }: Props) { + const inputRef = useRef(null) const [category, setCategory] = useState('all') const [searchTerm, setSearchTerm] = useState('') const [showSearchInput, setShowSearchInput] = useState(false) @@ -41,6 +43,11 @@ function EventFilters({ allEvents, setEvents, categories }: Props) { const isMobile = useBreakpoint(1023) const is2XL = useBreakpoint(1535) + const handleSearchChange = (event: any) => { + activeCategory && setCategory('all') + handleSearchByText(event.target.value) + } + useEffect(() => { if (!q) { handlePosts() @@ -117,6 +124,13 @@ function EventFilters({ allEvents, setEvents, categories }: Props) { }) } + useEffect(() => { + if (!inputRef.current) return + if (showSearchInput && isMobile) { + inputRef.current?.focus() + } + }, [showSearchInput, isMobile]) + return (
@@ -195,6 +209,58 @@ function EventFilters({ allEvents, setEvents, categories }: Props) { ))}
+ {!showSearchInput && ( + + + + )} + {showSearchInput && ( + + } + size="small" + layout="vertical" + autoComplete="off" + type="search" + placeholder="Search event" + value={searchTerm} + onChange={handleSearchChange} + className="w-full" + actions={ + isMobile && ( + + ) + } + /> + + )} ) } diff --git a/apps/www/types/post.ts b/apps/www/types/post.ts index f4afc35de01e6..23c2108f55e41 100644 --- a/apps/www/types/post.ts +++ b/apps/www/types/post.ts @@ -2,7 +2,7 @@ type PostTypes = { slug?: string type: 'casestudy' | 'blog' | 'event' title: string - date?: string + date: string formattedDate?: string coverImage?: string author?: string