feat: note component for Learning-path

Signed-off-by: rishabhsharma1997 <[email protected]>

Author: rishabhsharma1997

src/custom/Note/Note.tsx

@@ -0,0 +1,48 @@
+import { styled } from '@mui/material';
+import { FC } from 'react';
+
+interface AlertProps {
+  type?: 'success' | 'warning' | 'note';
+  title?: string;
+  content?: string;
+}
+
+const NoteWrapper = styled('div')<NoteWrapperProps>(({ type, theme }) => ({
+  fontWeight: 500,
+  background: '#212529',
+  color: 'inherit',
+  marginTop: '2rem',
+  width: '80%',
+  height: '80%',
+  marginBottom: '2rem',
+  padding: '0.5rem 1rem',
+  borderRadius: 0,
+  borderStyle: 'solid',
+  borderColor:
+    type === 'warning' ? theme.palette.text.warning : theme.palette.background.brand?.default,
+  borderWidth: '0 0 0 4px'
+}));
+
+const NoteHeading = styled('h4')<NoteWrapperProps>(({ type, theme }) => ({
+  color: type === 'warning' ? theme.palette.text.warning : theme.palette.background.brand?.default,
+  fontSize: '1.35rem'
+}));
+
+const NoteContent = styled('p')(({ theme }) => ({
+  color: theme.palette.text.inverse
+}));
+
+interface NoteWrapperProps {
+  type: 'success' | 'warning' | 'note';
+}
+
+const Note: FC<AlertProps> = ({ type = 'note', title, content }) => {
+  return (
+    <NoteWrapper type={type}>
+      <NoteHeading type={type}>{title}</NoteHeading>
+      <NoteContent>{content}</NoteContent>
+    </NoteWrapper>
+  );
+};
+
+export default Note;

src/custom/Note/index.tsx

@@ -0,0 +1,3 @@
+import Note from './Note';
+
+export { Note };

src/custom/SetupPrerequisite/SetupPrerequisite.tsx

@@ -1,14 +1,10 @@
 import React from 'react';
 import { Card, CardHeader, ContainerCardWrapper, SetupPreReqWrapper } from './style';
 
-// const meshery =
-//   require('../../../assets/images/meshery/icon-only/meshery-logo-light.svg') as string;
-// const mesheryOperator =
-//   require('../../../assets/images/meshery-operator/meshery-operator-dark.svg') as string;
 interface SetupItem {
   heading: string;
   description: string;
-  Icon: JSX.Element;
+  Icon: JSX.Element | string; // Updated to allow string (image source)
   url: string;
 }
 interface SetupPreReqProps {
@@ -22,12 +18,16 @@ const SetupPreReq: React.FC<SetupPreReqProps> = ({ Steps, PrerequisiteLine }) =>
       <p>{PrerequisiteLine}</p>
     </div>
     <ContainerCardWrapper id="Set up">
-      {Steps.map((item) => {
+      {Steps.map((item, index) => {
         return (
-          <Card href={item.url} target="_blank">
+          <Card key={index} href={item.url} target="_blank">
             <CardHeader>
               <h2>{item.heading}</h2>
-              {item.Icon}
+              {typeof item.Icon === 'string' ? (
+                <img src={item.Icon} alt={item.heading} width={'40px'} height={'40px'} />
+              ) : (
+                item.Icon
+              )}
             </CardHeader>
             <p>{item.description}</p>
           </Card>

src/custom/SetupPrerequisite/style.tsx

@@ -13,6 +13,8 @@ const SetupPreReqWrapper = styled('div')({
 const ContainerCardWrapper = styled('div')(({ theme }) => ({
   display: 'flex',
   cursor: 'pointer',
+  flexDirection: 'row',
+  flexWrap: 'wrap',
   '& a': {
     color: theme.palette.text.primary,
     margin: '1rem'

src/custom/index.tsx

@@ -36,10 +36,10 @@ import SearchBar, { SearchBarProps } from './SearchBar';
 import { TransferList } from './TransferModal/TransferList';
 import { TransferListProps } from './TransferModal/TransferList/TransferList';
 import UniversalFilter, { UniversalFilterProps } from './UniversalFilter';
-
 export { CatalogCard } from './CatalogCard';
 export { StyledChartDialog } from './ChartDialog';
 export { LearningContent } from './LearningContent';
+export { Note } from './Note';
 export { SetupPreReq } from './SetupPrerequisite';
 export { StyledChapter } from './StyledChapter';
 export { StyledSearchBar } from './StyledSearchBar';