From e3c83b5a98ad5edfa5b13ea695f20135ff9cddf2 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Wed, 27 Sep 2023 18:08:02 -0300
Subject: [PATCH] simplify the Core Products file and section
---
docs/src/components/action/InfoCard.tsx | 6 +-
.../components/productCore/CoreProducts.tsx | 87 ++-----------------
2 files changed, 10 insertions(+), 83 deletions(-)
diff --git a/docs/src/components/action/InfoCard.tsx b/docs/src/components/action/InfoCard.tsx
index dfe90ba4ef635a..1f04dea9bff599 100644
--- a/docs/src/components/action/InfoCard.tsx
+++ b/docs/src/components/action/InfoCard.tsx
@@ -37,7 +37,7 @@ export function GlowingIconContainer({ icon }: GlowingIconContainerProps) {
}
interface InfoCardProps {
- icon: React.ReactNode;
+ icon?: React.ReactNode;
title: string;
description: string;
link?: string;
@@ -61,13 +61,13 @@ export default function InfoCard({ icon, title, description, link }: InfoCardPro
}),
})}
>
-
+ {icon && }
{title}
diff --git a/docs/src/components/productCore/CoreProducts.tsx b/docs/src/components/productCore/CoreProducts.tsx
index 46b551a737e937..1623ee2c0f85b1 100644
--- a/docs/src/components/productCore/CoreProducts.tsx
+++ b/docs/src/components/productCore/CoreProducts.tsx
@@ -1,37 +1,33 @@
import * as React from 'react';
-import { alpha } from '@mui/material/styles';
-// import Box from '@mui/material/Box';
-import Paper from '@mui/material/Paper';
-import Typography from '@mui/material/Typography';
import Grid from '@mui/material/Grid';
import Section from 'docs/src/layouts/Section';
-import Link from 'docs/src/modules/components/Link';
+import InfoCard from 'docs/src/components/action/InfoCard';
// Note: All of the commented code will be put back in once logos for each Core product are done.
const content = [
{
- // logo:
+ // icon:
title: 'Material UI',
description: "An open-source React component library that implements Google's Material Design.",
link: '/material-ui/',
},
{
- // logo:
+ // icon:
title: 'Joy UI',
description:
"An easy to customize open-source React component library that implements MUI's own in-house design principles by default.",
link: '/joy-ui/getting-started/',
},
{
- // logo:
+ // icon:
title: 'Base UI',
description:
- 'A library of unstyled React UI components and hooks. With Base UI, you gain complete control over your app\'s CSS and accessibility features.',
+ "A library of unstyled React UI components and hooks. With Base UI, you gain complete control over your app's CSS and accessibility features.",
link: '/base-ui/',
},
{
- // logo:
+ // icon:
title: 'MUI System',
description: 'A set of CSS utilities to help you build custom designs more efficiently.',
link: '/system/getting-started/',
@@ -44,76 +40,7 @@ export default function CoreProducts() {
{content.map(({ title, description, link }) => (
- ({
- p: 2.5,
- height: '100%',
- position: 'relative',
- borderRadius: '12px',
- border: '1px solid',
- borderColor: 'grey.100',
- background: `linear-gradient(to top right, ${alpha(
- theme.palette.primary[50],
- 0.3,
- )} 40%, ${alpha(theme.palette.grey[50], 0.2)} 100%)`,
- '&:hover': {
- borderColor: 'primary.500',
- boxShadow:
- '0px 1px 6px 0px rgba(194, 224, 255, 1), 0px 2px 30px 0px rgba(234, 237, 241, 0.3) inset',
- },
- ...theme.applyDarkStyles({
- bgcolor: 'primaryDark.900',
- borderColor: 'primaryDark.700',
- background: `linear-gradient(to top right, ${alpha(
- theme.palette.primary[900],
- 0.1,
- )} 40%, ${alpha(theme.palette.primaryDark[800], 0.2)} 100%)`,
- '&:hover': {
- boxShadow: '0px 1px 6px #0059B3, inset 0px 2px 30px rgba(0, 0, 0, 0.1)',
- },
- }),
- })}
- >
- {/* ({
- width: 40,
- height: 40,
- display: 'flex',
- justifyContent: 'center',
- alignItems: 'center',
- borderRadius: 1,
- border: '1px solid',
- borderColor: 'primary.200',
- bgcolor: 'primary.50',
- boxShadow:
- '0px 1px 6px 0px rgba(194, 224, 255, 1), 0px 2px 30px 0px rgba(234, 237, 241, 0.3) inset',
- ...theme.applyDarkStyles({
- borderColor: 'primary.400',
- bgcolor: 'primary.900',
- boxShadow:
- '0px 1px 6px 0px rgba(0, 89, 178, 1), 0px 2px 30px 0px rgba(0, 0, 0, 0.25) inset',
- }),
- })}
- >
- {logo}
- */}
-
- {title}
-
-
- {description}
-
-
+
))}