Display session lang and some design adjustment

Author: HugoGresse

bun.lockb

@@ -38,6 +38,7 @@
         "@uiw/react-md-editor": "^4.0.1",
         "data-uri-to-buffer": "^6.0.2",
         "firebase": "^10.5.2",
+        "flag-icons": "^7.3.2",
         "image-blob-reduce": "^4.1.0",
         "luxon": "^3.4.3",
         "openai": "^4.24.7",

package.json

@@ -59,11 +59,10 @@ export const PublicEventSchedule = ({ eventId, event }: PublicEventScheduleProps
     const currentSessions = sessionsByDay.get(selectedDay) || []
 
     return (
-        <Box display="flex" flexDirection="column" gap={2} p={0} mt={2}>
+        <Box display="flex" flexDirection="column" gap={2} p={0} mt={2} justifyContent="center" alignItems="center">
             <ScheduleHeader
                 eventName={event.event.name}
                 logoUrl={event.event.logoUrl}
-                color={event.event.color}
                 colorBackground={event.event.colorBackground}
             />
 

src/public/event/PublicEventSchedule.tsx

@@ -15,7 +15,8 @@ export const DayTabs = ({ days, selectedDay, onDayChange }: DayTabsProps) => {
             onChange={onDayChange}
             variant="scrollable"
             scrollButtons="auto"
-            allowScrollButtonsMobile>
+            allowScrollButtonsMobile
+            sx={{ '& .MuiTab-root': { fontSize: '1.2rem' } }}>
             {days.map((day) => (
                 <Tab key={day} value={day} label={DateTime.fromISO(day).toLocaleString({ weekday: 'long' })} />
             ))}

src/public/event/components/DayTabs.tsx

@@ -0,0 +1,49 @@
+import 'flag-icons/css/flag-icons.min.css'
+
+interface LanguageFlagProps {
+    language: string
+    size?: 'sm' | 'md' | 'lg'
+    className?: string
+}
+
+const languageToCountryCode: Record<string, string> = {
+    English: 'gb',
+    French: 'fr',
+    German: 'de',
+    Spanish: 'es',
+    Italian: 'it',
+    Portuguese: 'pt',
+    Russian: 'ru',
+    Chinese: 'cn',
+    Japanese: 'jp',
+    Korean: 'kr',
+    Arabic: 'sa',
+    Hindi: 'in',
+    Dutch: 'nl',
+    Polish: 'pl',
+    Turkish: 'tr',
+    Vietnamese: 'vn',
+}
+
+const sizeClasses = {
+    sm: 'w-4 h-4',
+    md: 'w-6 h-6',
+    lg: 'w-8 h-8',
+}
+
+export const LanguageFlag = ({ language, size = 'md', className = '' }: LanguageFlagProps) => {
+    const countryCode = languageToCountryCode[language] || 'unknown'
+
+    if (countryCode === 'unknown') {
+        return null
+    }
+
+    return (
+        <span
+            className={`fi fi-${countryCode} rounded-sm ${sizeClasses[size]} ${className}`}
+            title={language}
+            role="img"
+            aria-label={`${language} flag`}
+        />
+    )
+}

src/public/event/components/LanguageFlag.tsx

@@ -4,11 +4,10 @@ import { Box, Typography } from '@mui/material'
 type ScheduleHeaderProps = {
     eventName: string
     logoUrl?: string | null
-    color?: string | null
     colorBackground?: string | null
 }
 
-export const ScheduleHeader = ({ eventName, logoUrl, color, colorBackground }: ScheduleHeaderProps) => {
+export const ScheduleHeader = ({ eventName, logoUrl, colorBackground }: ScheduleHeaderProps) => {
     return (
         <Box
             display="flex"
@@ -36,6 +35,12 @@ export const ScheduleHeader = ({ eventName, logoUrl, color, colorBackground }: S
                     variant="h3"
                     sx={{
                         fontWeight: 'bold',
+                        textAlign: 'center',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        lineHeight: 1, // Set line height to 1 to prevent descenders from affecting alignment
+                        paddingTop: '0.2em', // Add slight padding to visually center text including descenders
                     }}>
                     {eventName}
                 </Typography>

src/public/event/components/ScheduleHeader.tsx

@@ -1,6 +1,7 @@
 import { Box, Typography, Avatar, AvatarGroup, Paper, Chip } from '@mui/material'
 import { JsonSession, JsonSpeaker } from '../../../events/actions/updateWebsiteActions/jsonTypes'
 import { Category } from '../../../types'
+import { LanguageFlag } from './LanguageFlag'
 
 type SessionItemProps = {
     session: JsonSession & { speakersData?: JsonSpeaker[] }
@@ -48,7 +49,15 @@ export const SessionItem = ({ session, categories }: SessionItemProps) => {
                     <Typography
                         variant="caption"
                         color="text.secondary"
-                        sx={{ flexGrow: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                        sx={{
+                            flexGrow: 1,
+                            overflow: 'hidden',
+                            display: '-webkit-box',
+                            WebkitLineClamp: 2,
+                            WebkitBoxOrient: 'vertical',
+                            lineHeight: '1.2em',
+                            maxHeight: '2.4em',
+                        }}>
                         {session.speakersData.map((speaker) => speaker.name).join(', ')}
                     </Typography>
                 </Box>
@@ -59,14 +68,18 @@ export const SessionItem = ({ session, categories }: SessionItemProps) => {
                 </Typography>
             )}
             {category && (
-                <Chip
-                    label={category.name}
-                    size="small"
-                    sx={{
-                        bgcolor: category.color || 'primary.main',
-                        color: 'white',
-                    }}
-                />
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mt: 1 }}>
+                    <Chip
+                        label={category.name}
+                        size="small"
+                        sx={{
+                            bgcolor: category.color || 'primary.main',
+                            color: 'white',
+                            flexGrow: 1,
+                        }}
+                    />
+                    {session.language && <LanguageFlag language={session.language} size="sm" />}
+                </Box>
             )}
         </Paper>
     )