Migrate Styled-Card

Signed-off-by: Rajesh-Nagarajan-11 <rajeshnagarajan36@gmail.com>

Author: Rajesh-Nagarajan-11

src/custom/StyledCard/StyledCard.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { SxProps, Theme } from '@mui/material';
+import { Box, Button, Card, CardActions, CardContent, Typography } from '../../base';
+
+export interface StyledCardProps {
+  title: string;
+  icon?: React.ReactNode;
+  children: React.ReactNode;
+  sx?: SxProps<Theme>;
+  btntitle?: string;
+  onclick?: () => void;
+  disabled?: boolean;
+}
+
+function StyledCard({
+  title,
+  icon,
+  children,
+  sx = {},
+  btntitle,
+  onclick,
+  disabled = false
+}: StyledCardProps): JSX.Element {
+  return (
+    <Card sx={{ height: '100%', ...sx }}>
+      <CardContent>
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between'
+          }}
+        >
+          <Box
+            sx={{
+              display: 'flex',
+              mb: 1.5
+            }}
+          >
+            {icon}
+            <Typography variant="h6" fontWeight="700" component="div" sx={{ mx: 1 }}>
+              {title}
+            </Typography>
+          </Box>
+          {btntitle && (
+            <CardActions>
+              <Button variant="contained" size='large' onClick={onclick} disabled={disabled}>
+                {btntitle}
+              </Button>
+            </CardActions>
+          )}
+        </div>
+
+        {children}
+      </CardContent>
+    </Card>
+  );
+}
+
+export default StyledCard;

src/custom/StyledCard/index.tsx

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

src/custom/StyledCard/style.tsx

@@ -0,0 +1,67 @@
+import { styled } from '@mui/material';
+import { Link, ListItem } from '../../base';
+
+export const backgroundImg = styled('div')<{ backgroundImage?: string }>(
+  ({ backgroundImage }) => ({
+    backgroundImage: backgroundImage ? `url(${backgroundImage})` : 'none',
+    backgroundPosition: 'right bottom',
+    backgroundSize: 'cover',
+    backgroundRepeat: 'no-repeat'
+  })
+);
+
+export const CustomCode = styled('code')(() => ({
+  backgroundColor: '#212121',
+  color: '#fff',
+  padding: '0.2rem 0.4rem',
+  borderRadius: '0.2rem'
+}));
+
+export const List = styled(ListItem)<{ iconSrc?: string }>(({ iconSrc }) => ({
+  listStyleImage: iconSrc ? `url(${iconSrc})` : 'none',
+  display: 'flex',
+  alignItems: 'flex-start'
+}));
+
+export const CustomLink = styled('a')(({ theme }) => ({
+  color: theme.palette.text.secondary,
+  textDecoration: 'none',
+  '&:visited': {
+    textDecoration: 'none'
+  },
+  '&:hover': {
+    textDecoration: 'underline'
+  },
+  fontWeight: 'bold'
+}));
+
+export const MUILink = styled(Link)(() => ({
+  color: '#455a64',
+  textDecoration: 'none',
+  '&:visited': {
+    textDecoration: 'none'
+  },
+  '&:hover': {
+    textDecoration: 'none',
+    cursor: 'pointer'
+  },
+  fontWeight: '600'
+}));
+
+export const CustomLinkDiv = styled('div')(() => ({
+  display: 'block',
+  width: '10rem',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis'
+}));
+
+export const CustomDisabledLink = styled('a')(() => ({
+  textDecoration: 'none',
+  color: '#455a64',
+  '&:visited': {
+    textDecoration: 'none'
+  },
+  opacity: '0.5',
+  cursor: 'not-allowed'
+}));