Merge pull request #663 from lethemanh/661-hide-empt-resource-section-in-event-detail

#661 hide empty resource section in event detail

src/components/Event/InfoRow.tsx

@@ -9,6 +9,7 @@ type InfoRowProps = {
   content?: React.ReactNode; // if provided, overrides text rendering
   style?: React.CSSProperties;
   alignItems?: React.CSSProperties["alignItems"];
+  flexWrap?: React.CSSProperties["flexWrap"];
 };
 
 function detectUrls(text: string) {
@@ -64,6 +65,7 @@ export function InfoRow({
   content,
   style,
   alignItems = "center",
+  flexWrap = "nowrap",
 }: InfoRowProps) {
   return (
     <Box
@@ -72,7 +74,7 @@ export function InfoRow({
         alignItems,
         gap: 1,
         marginBottom: 1,
-        flexWrap: "wrap",
+        flexWrap,
       }}
     >
       {icon}

src/features/Events/EventPreview/EventPreviewDetails.tsx

@@ -133,9 +133,10 @@ export function EventPreviewDetails({
       )}
 
       {/* Resource */}
-      {resources && (
+      {resources?.length > 0 && (
         <InfoRow
           alignItems="flex-start"
+          flexWrap="wrap"
           icon={
             <Box sx={infoIconSx}>
               <LayersOutlinedIcon />