added session format on top view

Author: manuelgeek

components/sessions/FilterSessions.tsx

@@ -81,28 +81,32 @@ export const FilterSessions: NextPage<FilterSessionProps> = ({
                   >
                     {sessions[0]}
                   </button>
-                  <button
-                    name="level"
-                    type="button"
-                    value={sessions[1]}
-                    onClick={onClickFilter}
-                    className={`${
-                      filter?.level === sessions[1] && selectedClass
-                    } border border-1 border-accent px-3 py-1 text-xs flex-1 text-center hover:cursor-pointer hover:bg-accent hover:text-black`}
-                  >
-                    {sessions[1]}
-                  </button>
-                  <button
-                    name="level"
-                    type="button"
-                    value={sessions[2]}
-                    onClick={(e) => onClickFilter(e)}
-                    className={`${
-                      filter?.level === sessions[2] && selectedClass
-                    } border rounded-r-md border-1 border-accent px-3 py-1 text-xs flex-1 text-center hover:cursor-pointer hover:bg-accent hover:text-black`}
-                  >
-                    {sessions[2]}
-                  </button>
+                  {sessions[1] && (
+                    <button
+                      name="level"
+                      type="button"
+                      value={sessions[1]}
+                      onClick={onClickFilter}
+                      className={`${
+                        filter?.level === sessions[1] && selectedClass
+                      } border border-1 border-accent px-3 py-1 text-xs flex-1 text-center hover:cursor-pointer hover:bg-accent hover:text-black`}
+                    >
+                      {sessions[1]}
+                    </button>
+                  )}
+                  {sessions[2] && (
+                    <button
+                      name="level"
+                      type="button"
+                      value={sessions[2]}
+                      onClick={(e) => onClickFilter(e)}
+                      className={`${
+                        filter?.level === sessions[2] && selectedClass
+                      } border rounded-r-md border-1 border-accent px-3 py-1 text-xs flex-1 text-center hover:cursor-pointer hover:bg-accent hover:text-black`}
+                    >
+                      {sessions[2]}
+                    </button>
+                  )}
                 </div>
               ))}
             </div>

components/sessions/SessionGridCard.tsx

@@ -61,6 +61,20 @@ export const SessionGridCard = ({
                               </span>
                             ))}
                           </h3>
+                          {!schedule.is_serviceSession && (
+                            <p className="text-xs mt-2">
+                              <span className="uppercase text-xs text-white dark:text-dark text-px-10 bg-black dark:bg-white-dark py-0.5 px-2 rounded-full">
+                                #
+                                {schedule.is_keynote
+                                  ? 'Keynote'
+                                  : schedule.session_level}
+                              </span>
+                              <span className="black"> | </span>{' '}
+                              <span className="text-primary dark:text-secondary-dark">
+                                {schedule.session_format}
+                              </span>{' '}
+                            </p>
+                          )}
                           {schedule.is_serviceSession ? (
                             <p className="text-sm mt-2 font-bold dark:text-white-dark mb-2">
                               {schedule.is_keynote ? 'Keynote: ' : ''}{' '}

components/sessions/SessionListCard.tsx

@@ -62,6 +62,20 @@ const SessionListCard = ({
                               {truncateString(schedule.description, 150)}
                             </p>
                           )}
+                          {!schedule.is_serviceSession && (
+                            <p className="text-xs mt-2 mb-3">
+                              <span className="uppercase text-xs text-white dark:text-dark text-px-10 bg-black dark:bg-white-dark py-0.5 px-2 rounded-full">
+                                #
+                                {schedule.is_keynote
+                                  ? 'Keynote'
+                                  : schedule.session_level}
+                              </span>
+                              <span className="black"> | </span>{' '}
+                              <span className="text-primary dark:text-secondary-dark">
+                                {schedule.session_format}
+                              </span>{' '}
+                            </p>
+                          )}
                           <p className="text-xs md:text-sm font-light">
                             <span>
                               {hour(schedule.start_date_time)} -{' '}
@@ -74,7 +88,6 @@ const SessionListCard = ({
                               </span>
                             ))}
                           </p>
-                          {!schedule.is_serviceSession}
                           {schedule.speakers?.map((speaker) => (
                             <a
                               key={speaker.avatar}