Merge pull request #28 from namita-25/feat-poc

commit UI fixes for search,filter,images

libs/shared-lib/src/lib/Card/CommonCard.tsx

@@ -61,15 +61,15 @@ export const CommonCard: React.FC<CommonCardProps> = ({
       {image && orientation === 'horizontal' && (
         <CardMedia
           component="img"
-          image={image}
+          image={image || '/assets/images/default.png'}
           alt={imageAlt || ''}
           sx={{
             width: orientation === 'horizontal' ? '100%' : '40%',
             height: orientation === 'horizontal' ? '297px' : 'auto',
             objectFit: 'cover',
             '@media (max-width: 600px)': {
               width: '100%',
-              height: '150px',
+              height: '200px',
             },
           }}
         />

libs/shared-lib/src/lib/Layout/Layout.tsx

@@ -83,7 +83,7 @@ interface LayoutProps {
     language?: string[];
     subject?: string[];
     contentType?: string[];
-  };
+  };currentSelectedValues
   language?: string;
   selectedSubjects?: string[];
   selectedContentTypes?: string[];
@@ -130,7 +130,7 @@ const FilterDialog = ({
     filterValues ? filterValues : {}
   ); // Initialize as an empty object
 
-  const handleChange = (event: SelectChangeEvent<any>, filterCode: string) => {
+  const handleChange = (event: any, filterCode: any) => {
     const { value } = event.target;
 
     setSelectedValues((prev: any) => ({
@@ -144,7 +144,7 @@ const FilterDialog = ({
       open={open}
       onClose={onClose}
       fullWidth
-      sx={{ borderRadius: '12px' }}
+      sx={{ borderRadius: '16px' }}
     >
       <DialogTitle>Filters</DialogTitle>
       <IconButton
@@ -163,106 +163,81 @@ const FilterDialog = ({
         <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
           {/* new filter frameworkFilter */}
           {frameworkFilter?.categories &&
-            frameworkFilter.categories.map(
-              (categories: {
-                code: any;
-                identifier: any;
-                terms: any[];
-                name:
-                  | string
-                  | number
-                  | bigint
-                  | boolean
-                  | React.ReactElement<
-                      any,
-                      string | React.JSXElementConstructor<any>
-                    >
-                  | Iterable<React.ReactNode>
-                  | React.ReactPortal
-                  | Promise<React.AwaitedReactNode>
-                  | null
-                  | undefined;
-              }) => {
-                const filterCode = `se_${categories?.code}s`; // A unique identifier for the category
-                const componentKey = `multi-checkbox-label_${categories?.identifier}`;
+            frameworkFilter.categories.map((categories: any) => {
+              const filterCode = `se_${categories?.code}s`; // A unique identifier for the category
+              const componentKey = `multi-checkbox-label_${categories?.identifier}`;
 
-                // Transform terms into options
-                const options = categories?.terms.map(
-                  (term: { name: any; code: any }) => ({
-                    label: term.name,
-                    value: term.code,
-                  })
-                );
+              // Transform terms into options
+              const options = categories?.terms.map((term: any) => ({
+                label: term.name,
+                value: term.code,
+              }));
 
                 // Get the selected values for the current category
                 const currentSelectedValues = selectedValues[filterCode] || [];
 
-                return (
-                  <FormControl fullWidth key={filterCode}>
-                    <InputLabel
-                      id={componentKey}
-                      sx={{
-                        marginBottom: '8px', // Adjust margin between the label and the Select
-                        color: '#000', // Optional: Customize label color
-                        fontSize: '14px', // Optional: Adjust label font size
-                      }}
-                    >
-                      {categories?.name}
-                    </InputLabel>
-                    <Select
-                      labelId={componentKey}
-                      multiple
-                      value={currentSelectedValues}
-                      onChange={(event) => handleChange(event, filterCode)}
-                      renderValue={(selected) =>
-                        selected
-                          .map((selectedValue: any) => {
-                            const selectedOption = options.find(
-                              (option: { value: any }) =>
-                                option.value === selectedValue
-                            );
-                            return selectedOption ? selectedOption.label : '';
-                          })
-                          .join(', ')
-                      }
-                    >
-                      {options.map(
-                        (option: {
-                          value:
-                            | React.Key
-                            | readonly string[]
-                            | null
-                            | undefined;
-                          label:
-                            | string
-                            | number
-                            | bigint
-                            | boolean
-                            | React.ReactElement<
-                                any,
-                                string | React.JSXElementConstructor<any>
-                              >
-                            | Iterable<React.ReactNode>
-                            | React.ReactPortal
-                            | Promise<React.AwaitedReactNode>
-                            | null
-                            | undefined;
-                        }) => (
-                          <MenuItem key={option.value} value={option.value}>
-                            <Checkbox
-                              checked={currentSelectedValues.includes(
-                                option.value
-                              )}
-                            />
-                            <ListItemText primary={option.label} />
-                          </MenuItem>
-                        )
-                      )}
-                    </Select>
-                  </FormControl>
-                );
-              }
-            )}
+              return (
+                <FormControl
+                  fullWidth
+                  key={filterCode}
+                  sx={{
+                    '&.Mui-focused': {
+                      color: '#1D1B20', // Label color when focused
+                    },
+                    '& .MuiInputLabel-root.Mui-focused': {
+                      color: '#1D1B20', // Label color when focused
+                    },
+                    '& .MuiInputLabel-root': { color: '#1D1B20' }, // Label color
+                    '& .MuiOutlinedInput-root': {
+                      color: '#1D1B20', // Value color
+                      '& .MuiOutlinedInput-notchedOutline': {
+                        borderColor: '#1D1B20', // Outline color
+                      },
+                      '&:hover .MuiOutlinedInput-notchedOutline': {
+                        borderColor: '#1D1B20', // Outline color on hover
+                      },
+                      '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+                        borderColor: '#1D1B20', // Outline color when focused
+                      },
+                    },
+                  }}
+                >
+                  <InputLabel id={componentKey}>{categories?.name}</InputLabel>
+                  <Select
+                    labelId={componentKey}
+                    input={<OutlinedInput label={categories?.name} />}
+                    multiple
+                    value={currentSelectedValues}
+                    onChange={(event) => handleChange(event, filterCode)}
+                    renderValue={(selected) =>
+                      selected
+                        .map((selectedValue: any) => {
+                          const selectedOption = options.find(
+                            (option: any) => option.value === selectedValue
+                          );
+                          return selectedOption ? selectedOption.label : '';
+                        })
+                        .join(', ')
+                    }
+                  >
+                    {options.map((option: any) => (
+                      <MenuItem key={option.value} value={option.value}>
+                        <Checkbox
+                          sx={{
+                            color: '#6750A4', // Default checkbox color
+                            '&.Mui-checked': {
+                              color: '#6750A4', // Checked checkbox color
+                            },
+                          }}
+                          checked={currentSelectedValues.includes(option.value)}
+                        />
+                        <ListItemText primary={option.label} />
+                      </MenuItem>
+                    ))}
+                  </Select>
+                </FormControl>
+              );
+            })}
         </Box>
         <Divider sx={{ marginTop: 4 }} />
         {/* <FormControl fullWidth>
@@ -456,7 +431,7 @@ export const Layout: React.FC<LayoutProps> = ({
         display: 'flex',
         flexDirection: 'column',
         justifyContent: 'space-between',
-        alignItems: 'center',
+        // alignItems: 'center',
         // bgcolor: 'grey',
         ...sx,
       }}
@@ -532,7 +507,9 @@ export const Layout: React.FC<LayoutProps> = ({
                 cursor: 'pointer',
                 backgroundColor: '#ECE6F0',
                 borderRadius: '12px',
-                padding: '10px',
+                // padding: '8px',
+                width: '48px',
+                height: '48px',
                 '&:hover': {
                   backgroundColor: '#E0E0E0',
                   boxShadow: '0px 4px 8px 3px #00000026',
@@ -543,7 +520,7 @@ export const Layout: React.FC<LayoutProps> = ({
               onClick={() => setFilterShow(true)}
             >
               <FilterAltOutlinedIcon
-                sx={{ color: '#6750A4', fontSize: '40px' }}
+                sx={{ color: '#6750A4', fontSize: '25px' }}
               />
             </Box>
           )}

libs/shared-lib/src/lib/Search/CommonSearch.tsx

@@ -34,7 +34,7 @@ export const CommonSearch: React.FC<SearchBarProps> = ({
       sx={{
         display: 'flex',
         alignItems: 'center',
-        border: '1px solid #ccc',
+        // border: '1px solid #ccc',
         borderRadius: '4px',
         padding: '2px 4px',
         ...sx,
@@ -43,7 +43,7 @@ export const CommonSearch: React.FC<SearchBarProps> = ({
       {leftIcon && (
         <IconButton
           onClick={onLeftIconClick}
-          sx={{ p: '10px' }}
+          // sx={{ p: '10px' }}
           aria-label={leftIconAriaLabel || 'search navigation button'}
         >
           {leftIcon}

mfes/content/src/components/CommonCollapse.tsx

@@ -129,7 +129,6 @@ export const CommonCollapse: React.FC<CommonAccordionProps> = ({
 }) => {
   const router = useRouter();
   const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
-
   const toggleExpanded = (identifier: string) => {
     setExpandedItems((prev) => {
       const newExpandedItems = new Set(prev);
@@ -141,61 +140,56 @@ export const CommonCollapse: React.FC<CommonAccordionProps> = ({
       return newExpandedItems;
     });
   };
-  const handleCollapseAll = () => {
-    setExpandedItems(
-      expandedItems.size === data.length
-        ? new Set()
-        : new Set(data.map((item) => item.identifier))
-    );
-  };
-  const handleTitleClick = () => {
-    router.push(`/content-details/${identifier}`);
-  };
+
   const handleItemClick = (identifier: string) => {
     const path = `/player/${identifier}`;
     router.push(path);
   };
   return (
     <Box sx={{ margin: '10px' }}>
-      <Box
-        sx={{
-          backgroundColor: '#E9DDFF',
-          padding: '8px',
-          borderRadius: '4px',
-          display: 'flex',
-          alignItems: 'center',
-          gap: '8px',
-        }}
-      >
-        {}
-        <LensOutlinedIcon sx={{ fontSize: '17px' }} />
-        <Typography variant="h6" fontSize={'12px'} fontWeight={500}>
-          {data?.length > 0 ? (
-            title
-          ) : (
-            <span
-              style={{ cursor: 'pointer' }}
-              onClick={() => handleItemClick(identifier)}
-            >
-              {title}
-              {/*  */}
-            </span>
-          )}
-        </Typography>
+      {data?.length > 0 ? (
+        <Box
+          sx={{
+            backgroundColor: '#E9DDFF',
+            padding: '8px',
+            borderRadius: '4px',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+          }}
+        >
+          <LensOutlinedIcon sx={{ fontSize: '17px' }} />
+          <Typography variant="h6" fontSize={'12px'} fontWeight={500}>
+            {title}
+          </Typography>
+          <Box
+            sx={{ marginLeft: 'auto' }}
+            onClick={(e) => {
+              e.stopPropagation();
+              toggleExpanded(identifier);
+            }}
+          >
+            {expandedItems.has(identifier) ? (
+              <ExpandLessIcon />
+            ) : (
+              <ExpandMoreIcon />
+            )}
+          </Box>
+        </Box>
+      ) : (
         <Box
-          sx={{ marginLeft: 'auto' }}
-          onClick={(e) => {
-            e.stopPropagation();
-            toggleExpanded(identifier);
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
           }}
+          onClick={() => handleItemClick(identifier)}
         >
-          {expandedItems.has(identifier) ? (
-            <ExpandLessIcon />
-          ) : (
-            <ExpandMoreIcon />
-          )}
+          <Typography variant="body1" fontSize={'14px'} fontWeight={400}>
+            {getIconByMimeType(data?.mimeType)} {title}
+          </Typography>
         </Box>
-      </Box>
+      )}
 
       <Box sx={{ marginTop: '8px' }}>
         {expandedItems.has(identifier) && (

mfes/content/src/pages/content-details/[identifier].tsx

@@ -94,6 +94,8 @@ const ContentDetails = () => {
             sx={{
               margin: 'auto',
               textAlign: 'center',
+              width: { xs: '100%', sm: '100%', md: '500px', lg: '500px' },
+              // height: { xs: 'auto', md: 'auto', lg: '100vh' },
             }}
           >
             <img
@@ -102,7 +104,7 @@ const ContentDetails = () => {
               }
               alt="Course Thumbnail"
               style={{
-                width: '100%',
+                // width: '100%',
                 borderRadius: '8px',
                 marginBottom: '16px',
               }}