From e0a3d7b53fc200e755c5143c348e90ed79383cec Mon Sep 17 00:00:00 2001 From: Neon Kiwi Date: Sun, 16 Nov 2025 02:04:24 -0500 Subject: [PATCH 1/3] Add StudyGroupSearchCard component with search, date picker, and category filters --- .../StudyGroupSearchCard.tsx | 228 ++++++++++++++++++ 1 file changed, 228 insertions(+) create mode 100644 frontend/components/StudyGroupSearchCard/StudyGroupSearchCard.tsx diff --git a/frontend/components/StudyGroupSearchCard/StudyGroupSearchCard.tsx b/frontend/components/StudyGroupSearchCard/StudyGroupSearchCard.tsx new file mode 100644 index 0000000..6caf207 --- /dev/null +++ b/frontend/components/StudyGroupSearchCard/StudyGroupSearchCard.tsx @@ -0,0 +1,228 @@ +/** + * StudyGroupSearchCard Component + * ------------------------------ + * Search and filter interface for study groups + */ +'use client'; + +import { Pane, Text } from 'evergreen-ui'; +import { useState, useRef } from 'react'; +import type { MouseEvent } from 'react'; + +interface StudyGroupSearchCardProps { + onSearchChange?: (query: string) => void; + onDateChange?: (date: string) => void; + onCategoryChange?: (category: string) => void; +} + +const categories = ['All Groups', 'Science', 'Mathematics', 'Humanities', 'Engineering', 'Social Sciences']; + +export function StudyGroupSearchCard({ + onSearchChange, + onDateChange, + onCategoryChange, +}: StudyGroupSearchCardProps) { + const [searchQuery, setSearchQuery] = useState(''); + const [selectedCategory, setSelectedCategory] = useState('All Groups'); + const [selectedDate, setSelectedDate] = useState(''); + const dateInputRef = useRef(null); + + const handleSearchChange = (value: string) => { + setSearchQuery(value); + onSearchChange?.(value); + }; + + const handleDateChange = (value: string) => { + setSelectedDate(value); + onDateChange?.(value); + }; + + const formatDateForDisplay = (dateString: string): string => { + if (!dateString) return ''; + const date = new Date(dateString); + const month = date.toLocaleDateString('en-US', { month: 'short' }); + const day = date.getDate(); + const year = date.getFullYear(); + return `${month} ${day}, ${year}`; + }; + + const handleDateInputClick = () => { + dateInputRef.current?.showPicker?.() || dateInputRef.current?.click(); + }; + + const handleCategoryChange = (category: string) => { + setSelectedCategory(category); + onCategoryChange?.(category); + }; + + return ( + + {/* Search and Date Filters */} + + {/* Search Bar */} + + + + + + handleSearchChange(e.target.value)} + style={{ + width: '100%', + padding: '12px 12px 12px 44px', + border: '1px solid #D1D5DB', + borderRadius: '6px', + fontSize: '14px', + outline: 'none', + fontFamily: 'inherit', + }} + onFocus={(e) => { + e.target.style.borderColor = '#9CA3AF'; + }} + onBlur={(e) => { + e.target.style.borderColor = '#D1D5DB'; + }} + /> + + + {/* Date Picker */} + + {/* Hidden date input */} + handleDateChange(e.target.value)} + style={{ + position: 'absolute', + opacity: 0, + pointerEvents: 'none', + width: 0, + height: 0, + }} + /> + {/* Visible styled input */} + { + e.target.style.borderColor = '#9CA3AF'; + }} + onBlur={(e) => { + e.target.style.borderColor = '#D1D5DB'; + }} + /> + + + + + + + {/* Category Filters */} + + {categories.map((category) => ( + handleCategoryChange(category)} + style={{ + transition: 'all 0.2s ease', + borderColor: selectedCategory === category ? '#EF4343' : '#D1D5DB', + }} + onMouseEnter={(e: MouseEvent) => { + if (selectedCategory !== category) { + e.currentTarget.style.borderColor = '#9CA3AF'; + } + }} + onMouseLeave={(e: MouseEvent) => { + if (selectedCategory !== category) { + e.currentTarget.style.borderColor = '#D1D5DB'; + } + }} + > + + {category} + + + ))} + + + ); +} + +export default StudyGroupSearchCard; From 8eb6b8b085bbba7cdf419b374c9c8d76f7f7e0a0 Mon Sep 17 00:00:00 2001 From: Ryan Jensen Date: Sun, 16 Nov 2025 02:12:51 -0500 Subject: [PATCH 2/3] Create Search For Study Group Component --- .../StudyGroupSearchCard.tsx | 456 +++++++++--------- 1 file changed, 228 insertions(+), 228 deletions(-) diff --git a/frontend/components/StudyGroupSearchCard/StudyGroupSearchCard.tsx b/frontend/components/StudyGroupSearchCard/StudyGroupSearchCard.tsx index 6caf207..6590fcf 100644 --- a/frontend/components/StudyGroupSearchCard/StudyGroupSearchCard.tsx +++ b/frontend/components/StudyGroupSearchCard/StudyGroupSearchCard.tsx @@ -1,228 +1,228 @@ -/** - * StudyGroupSearchCard Component - * ------------------------------ - * Search and filter interface for study groups - */ -'use client'; - -import { Pane, Text } from 'evergreen-ui'; -import { useState, useRef } from 'react'; -import type { MouseEvent } from 'react'; - -interface StudyGroupSearchCardProps { - onSearchChange?: (query: string) => void; - onDateChange?: (date: string) => void; - onCategoryChange?: (category: string) => void; -} - -const categories = ['All Groups', 'Science', 'Mathematics', 'Humanities', 'Engineering', 'Social Sciences']; - -export function StudyGroupSearchCard({ - onSearchChange, - onDateChange, - onCategoryChange, -}: StudyGroupSearchCardProps) { - const [searchQuery, setSearchQuery] = useState(''); - const [selectedCategory, setSelectedCategory] = useState('All Groups'); - const [selectedDate, setSelectedDate] = useState(''); - const dateInputRef = useRef(null); - - const handleSearchChange = (value: string) => { - setSearchQuery(value); - onSearchChange?.(value); - }; - - const handleDateChange = (value: string) => { - setSelectedDate(value); - onDateChange?.(value); - }; - - const formatDateForDisplay = (dateString: string): string => { - if (!dateString) return ''; - const date = new Date(dateString); - const month = date.toLocaleDateString('en-US', { month: 'short' }); - const day = date.getDate(); - const year = date.getFullYear(); - return `${month} ${day}, ${year}`; - }; - - const handleDateInputClick = () => { - dateInputRef.current?.showPicker?.() || dateInputRef.current?.click(); - }; - - const handleCategoryChange = (category: string) => { - setSelectedCategory(category); - onCategoryChange?.(category); - }; - - return ( - - {/* Search and Date Filters */} - - {/* Search Bar */} - - - - - - handleSearchChange(e.target.value)} - style={{ - width: '100%', - padding: '12px 12px 12px 44px', - border: '1px solid #D1D5DB', - borderRadius: '6px', - fontSize: '14px', - outline: 'none', - fontFamily: 'inherit', - }} - onFocus={(e) => { - e.target.style.borderColor = '#9CA3AF'; - }} - onBlur={(e) => { - e.target.style.borderColor = '#D1D5DB'; - }} - /> - - - {/* Date Picker */} - - {/* Hidden date input */} - handleDateChange(e.target.value)} - style={{ - position: 'absolute', - opacity: 0, - pointerEvents: 'none', - width: 0, - height: 0, - }} - /> - {/* Visible styled input */} - { - e.target.style.borderColor = '#9CA3AF'; - }} - onBlur={(e) => { - e.target.style.borderColor = '#D1D5DB'; - }} - /> - - - - - - - {/* Category Filters */} - - {categories.map((category) => ( - handleCategoryChange(category)} - style={{ - transition: 'all 0.2s ease', - borderColor: selectedCategory === category ? '#EF4343' : '#D1D5DB', - }} - onMouseEnter={(e: MouseEvent) => { - if (selectedCategory !== category) { - e.currentTarget.style.borderColor = '#9CA3AF'; - } - }} - onMouseLeave={(e: MouseEvent) => { - if (selectedCategory !== category) { - e.currentTarget.style.borderColor = '#D1D5DB'; - } - }} - > - - {category} - - - ))} - - - ); -} - -export default StudyGroupSearchCard; +/** + * StudyGroupSearchCard Component + * ------------------------------ + * Search and filter interface for study groups + */ +'use client'; + +import { Pane, Text } from 'evergreen-ui'; +import { useState, useRef } from 'react'; +import type { MouseEvent } from 'react'; + +interface StudyGroupSearchCardProps { + onSearchChange?: (query: string) => void; + onDateChange?: (date: string) => void; + onCategoryChange?: (category: string) => void; +} + +const categories = ['All Groups', 'Science', 'Mathematics', 'Humanities', 'Engineering', 'Social Sciences']; + +export function StudyGroupSearchCard({ + onSearchChange, + onDateChange, + onCategoryChange, +}: StudyGroupSearchCardProps) { + const [searchQuery, setSearchQuery] = useState(''); + const [selectedCategory, setSelectedCategory] = useState('All Groups'); + const [selectedDate, setSelectedDate] = useState(''); + const dateInputRef = useRef(null); + + const handleSearchChange = (value: string) => { + setSearchQuery(value); + onSearchChange?.(value); + }; + + const handleDateChange = (value: string) => { + setSelectedDate(value); + onDateChange?.(value); + }; + + const formatDateForDisplay = (dateString: string): string => { + if (!dateString) return ''; + const date = new Date(dateString); + const month = date.toLocaleDateString('en-US', { month: 'short' }); + const day = date.getDate(); + const year = date.getFullYear(); + return `${month} ${day}, ${year}`; + }; + + const handleDateInputClick = () => { + dateInputRef.current?.showPicker?.() || dateInputRef.current?.click(); + }; + + const handleCategoryChange = (category: string) => { + setSelectedCategory(category); + onCategoryChange?.(category); + }; + + return ( + + {/* Search and Date Filters */} + + {/* Search Bar */} + + + + + + handleSearchChange(e.target.value)} + style={{ + width: '100%', + padding: '12px 12px 12px 44px', + border: '1px solid #D1D5DB', + borderRadius: '6px', + fontSize: '14px', + outline: 'none', + fontFamily: 'inherit', + }} + onFocus={(e) => { + e.target.style.borderColor = '#9CA3AF'; + }} + onBlur={(e) => { + e.target.style.borderColor = '#D1D5DB'; + }} + /> + + + {/* Date Picker */} + + {/* Hidden date input */} + handleDateChange(e.target.value)} + style={{ + position: 'absolute', + opacity: 0, + pointerEvents: 'none', + width: 0, + height: 0, + }} + /> + {/* Visible styled input */} + { + e.target.style.borderColor = '#9CA3AF'; + }} + onBlur={(e) => { + e.target.style.borderColor = '#D1D5DB'; + }} + /> + + + + + + + {/* Category Filters */} + + {categories.map((category) => ( + handleCategoryChange(category)} + style={{ + transition: 'all 0.2s ease', + borderColor: selectedCategory === category ? '#EF4343' : '#D1D5DB', + }} + onMouseEnter={(e: MouseEvent) => { + if (selectedCategory !== category) { + e.currentTarget.style.borderColor = '#9CA3AF'; + } + }} + onMouseLeave={(e: MouseEvent) => { + if (selectedCategory !== category) { + e.currentTarget.style.borderColor = '#D1D5DB'; + } + }} + > + + {category} + + + ))} + + + ); +} + +export default StudyGroupSearchCard; From 1bcb0ae1eea1ea73fb3d01fba0ed783710a7ba2e Mon Sep 17 00:00:00 2001 From: Ryan Jensen Date: Sun, 16 Nov 2025 02:32:25 -0500 Subject: [PATCH 3/3] Fix lint errors --- .../StudyGroupSearchCard.tsx | 470 +++++++++--------- 1 file changed, 242 insertions(+), 228 deletions(-) diff --git a/frontend/components/StudyGroupSearchCard/StudyGroupSearchCard.tsx b/frontend/components/StudyGroupSearchCard/StudyGroupSearchCard.tsx index 6590fcf..6aaeb05 100644 --- a/frontend/components/StudyGroupSearchCard/StudyGroupSearchCard.tsx +++ b/frontend/components/StudyGroupSearchCard/StudyGroupSearchCard.tsx @@ -1,228 +1,242 @@ -/** - * StudyGroupSearchCard Component - * ------------------------------ - * Search and filter interface for study groups - */ -'use client'; - -import { Pane, Text } from 'evergreen-ui'; -import { useState, useRef } from 'react'; -import type { MouseEvent } from 'react'; - -interface StudyGroupSearchCardProps { - onSearchChange?: (query: string) => void; - onDateChange?: (date: string) => void; - onCategoryChange?: (category: string) => void; -} - -const categories = ['All Groups', 'Science', 'Mathematics', 'Humanities', 'Engineering', 'Social Sciences']; - -export function StudyGroupSearchCard({ - onSearchChange, - onDateChange, - onCategoryChange, -}: StudyGroupSearchCardProps) { - const [searchQuery, setSearchQuery] = useState(''); - const [selectedCategory, setSelectedCategory] = useState('All Groups'); - const [selectedDate, setSelectedDate] = useState(''); - const dateInputRef = useRef(null); - - const handleSearchChange = (value: string) => { - setSearchQuery(value); - onSearchChange?.(value); - }; - - const handleDateChange = (value: string) => { - setSelectedDate(value); - onDateChange?.(value); - }; - - const formatDateForDisplay = (dateString: string): string => { - if (!dateString) return ''; - const date = new Date(dateString); - const month = date.toLocaleDateString('en-US', { month: 'short' }); - const day = date.getDate(); - const year = date.getFullYear(); - return `${month} ${day}, ${year}`; - }; - - const handleDateInputClick = () => { - dateInputRef.current?.showPicker?.() || dateInputRef.current?.click(); - }; - - const handleCategoryChange = (category: string) => { - setSelectedCategory(category); - onCategoryChange?.(category); - }; - - return ( - - {/* Search and Date Filters */} - - {/* Search Bar */} - - - - - - handleSearchChange(e.target.value)} - style={{ - width: '100%', - padding: '12px 12px 12px 44px', - border: '1px solid #D1D5DB', - borderRadius: '6px', - fontSize: '14px', - outline: 'none', - fontFamily: 'inherit', - }} - onFocus={(e) => { - e.target.style.borderColor = '#9CA3AF'; - }} - onBlur={(e) => { - e.target.style.borderColor = '#D1D5DB'; - }} - /> - - - {/* Date Picker */} - - {/* Hidden date input */} - handleDateChange(e.target.value)} - style={{ - position: 'absolute', - opacity: 0, - pointerEvents: 'none', - width: 0, - height: 0, - }} - /> - {/* Visible styled input */} - { - e.target.style.borderColor = '#9CA3AF'; - }} - onBlur={(e) => { - e.target.style.borderColor = '#D1D5DB'; - }} - /> - - - - - - - {/* Category Filters */} - - {categories.map((category) => ( - handleCategoryChange(category)} - style={{ - transition: 'all 0.2s ease', - borderColor: selectedCategory === category ? '#EF4343' : '#D1D5DB', - }} - onMouseEnter={(e: MouseEvent) => { - if (selectedCategory !== category) { - e.currentTarget.style.borderColor = '#9CA3AF'; - } - }} - onMouseLeave={(e: MouseEvent) => { - if (selectedCategory !== category) { - e.currentTarget.style.borderColor = '#D1D5DB'; - } - }} - > - - {category} - - - ))} - - - ); -} - -export default StudyGroupSearchCard; +/** + * StudyGroupSearchCard Component + * ------------------------------ + * Search and filter interface for study groups + */ +'use client'; + +import { useState, useRef } from 'react'; +import type { MouseEvent } from 'react'; + +import { Pane, Text } from 'evergreen-ui'; + +interface StudyGroupSearchCardProps { + onSearchChange?: (query: string) => void; + onDateChange?: (date: string) => void; + onCategoryChange?: (category: string) => void; +} + +const categories = [ + 'All Groups', + 'Science', + 'Mathematics', + 'Humanities', + 'Engineering', + 'Social Sciences', +]; + +export function StudyGroupSearchCard({ + onSearchChange, + onDateChange, + onCategoryChange, +}: StudyGroupSearchCardProps) { + const [searchQuery, setSearchQuery] = useState(''); + const [selectedCategory, setSelectedCategory] = useState('All Groups'); + const [selectedDate, setSelectedDate] = useState(''); + const dateInputRef = useRef(null); + + const handleSearchChange = (value: string) => { + setSearchQuery(value); + onSearchChange?.(value); + }; + + const handleDateChange = (value: string) => { + setSelectedDate(value); + onDateChange?.(value); + }; + + const formatDateForDisplay = (dateString: string): string => { + if (!dateString) return ''; + const date = new Date(dateString); + const month = date.toLocaleDateString('en-US', { month: 'short' }); + const day = date.getDate(); + const year = date.getFullYear(); + return `${month} ${day}, ${year}`; + }; + + const handleDateInputClick = () => { + if (dateInputRef.current) { + if (typeof dateInputRef.current.showPicker === 'function') { + dateInputRef.current.showPicker(); + } else { + dateInputRef.current.click(); + } + } + }; + + const handleCategoryChange = (category: string) => { + setSelectedCategory(category); + onCategoryChange?.(category); + }; + + return ( + + {/* Search and Date Filters */} + + {/* Search Bar */} + + + + + + handleSearchChange(e.target.value)} + style={{ + width: '100%', + padding: '12px 12px 12px 44px', + border: '1px solid #D1D5DB', + borderRadius: '6px', + fontSize: '14px', + outline: 'none', + fontFamily: 'inherit', + }} + onFocus={(e) => { + e.target.style.borderColor = '#9CA3AF'; + }} + onBlur={(e) => { + e.target.style.borderColor = '#D1D5DB'; + }} + /> + + + {/* Date Picker */} + + {/* Hidden date input */} + handleDateChange(e.target.value)} + style={{ + position: 'absolute', + opacity: 0, + pointerEvents: 'none', + width: 0, + height: 0, + }} + /> + {/* Visible styled input */} + { + e.target.style.borderColor = '#9CA3AF'; + }} + onBlur={(e) => { + e.target.style.borderColor = '#D1D5DB'; + }} + /> + + + + + + + {/* Category Filters */} + + {categories.map((category) => ( + handleCategoryChange(category)} + style={{ + transition: 'all 0.2s ease', + borderColor: selectedCategory === category ? '#EF4343' : '#D1D5DB', + }} + onMouseEnter={(e: MouseEvent) => { + if (selectedCategory !== category) { + e.currentTarget.style.borderColor = '#9CA3AF'; + } + }} + onMouseLeave={(e: MouseEvent) => { + if (selectedCategory !== category) { + e.currentTarget.style.borderColor = '#D1D5DB'; + } + }} + > + + {category} + + + ))} + + + ); +} + +export default StudyGroupSearchCard;