From 7a340ac6dd69861a2f7490a12a787d5526f8f059 Mon Sep 17 00:00:00 2001 From: alelthomas Date: Mon, 22 Dec 2025 16:30:26 -0700 Subject: [PATCH 1/2] initial attempt --- docs/pages/customers.tsx | 2 + .../customers/CustomersIndustryTable.tsx | 273 ++++++++++++++++++ .../customers/data/customersData.ts | 39 +++ 3 files changed, 314 insertions(+) create mode 100644 docs/src/components/customers/CustomersIndustryTable.tsx create mode 100644 docs/src/components/customers/data/customersData.ts diff --git a/docs/pages/customers.tsx b/docs/pages/customers.tsx index bd565835ecab4f..17a9e769f83cac 100644 --- a/docs/pages/customers.tsx +++ b/docs/pages/customers.tsx @@ -12,6 +12,7 @@ import CustomersSpotlight from 'docs/src/components/customers/CustomersSpotlight import CustomersLogoSlider from 'docs/src/components/customers/CustomersLogoSlider'; import { getCaseStudies } from 'docs/lib/sourcing'; import { InferGetStaticPropsType } from 'next'; +import CustomersIndustryTable from 'docs/src/components/customers/CustomersIndustryTable'; import CustomersTestimonials from 'docs/src/components/customers/CustomersTestimonials'; export const getStaticProps = () => { @@ -44,6 +45,7 @@ export default function Customers(props: InferGetStaticPropsType + diff --git a/docs/src/components/customers/CustomersIndustryTable.tsx b/docs/src/components/customers/CustomersIndustryTable.tsx new file mode 100644 index 00000000000000..6da99de35aa9b7 --- /dev/null +++ b/docs/src/components/customers/CustomersIndustryTable.tsx @@ -0,0 +1,273 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Typography from '@mui/material/Typography'; +import Chip from '@mui/material/Chip'; +import Table from '@mui/material/Table'; +import TableBody from '@mui/material/TableBody'; +import TableCell from '@mui/material/TableCell'; +import TableContainer from '@mui/material/TableContainer'; +import TableRow from '@mui/material/TableRow'; +import Button from '@mui/material/Button'; +import Stack from '@mui/material/Stack'; +import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; +import { Link } from '@mui/docs/Link'; +import SectionHeadline from '../typography/SectionHeadline'; +import GradientText from '../typography/GradientText'; +import { COMPANIES, INDUSTRIES, type Industry } from './data/customersData'; + +function IndustryChip({ + label, + selected, + onClick, +}: { + label: Industry; + selected: boolean; + onClick: () => void; +}) { + return ( + ({ + fontWeight: 600, + cursor: 'pointer', + transition: 'all 0.2s ease-in-out', + borderColor: selected ? 'primary.main' : 'divider', + backgroundColor: selected ? 'primary.50' : 'transparent', + color: selected ? 'primary.700' : 'text.secondary', + '&:hover': { + backgroundColor: selected ? 'primary.100' : 'action.hover', + borderColor: selected ? 'primary.main' : 'primary.200', + }, + ...theme.applyDarkStyles({ + borderColor: selected ? 'primary.600' : 'divider', + backgroundColor: selected ? 'primary.900' : 'transparent', + color: selected ? 'primary.200' : 'text.secondary', + '&:hover': { + backgroundColor: selected ? 'primary.800' : 'action.hover', + borderColor: selected ? 'primary.500' : 'primary.700', + }, + }), + })} + /> + ); +} + +function IndustryTag({ label }: { label: Industry }) { + return ( + ({ + fontSize: '0.75rem', + height: 24, + borderColor: 'grey.300', + color: 'text.secondary', + ...theme.applyDarkStyles({ + borderColor: 'grey.700', + color: 'grey.400', + }), + })} + /> + ); +} + +export default function CustomersIndustryTable() { + const [selectedIndustry, setSelectedIndustry] = React.useState('All'); + + const filteredCompanies = React.useMemo(() => { + if (selectedIndustry === 'All') { + return COMPANIES; + } + return COMPANIES.filter((company) => company.industries.includes(selectedIndustry)); + }, [selectedIndustry]); + + return ( + + + One UI foundation +
+ for teams in every industry + + } + /> + + *': { + mb: { xs: 1, sm: 0 }, + }, + }} + useFlexGap + > + {INDUSTRIES.map((industry) => ( + setSelectedIndustry(industry)} + /> + ))} + + + ({ + borderRadius: 2, + border: '1px solid', + borderColor: 'divider', + backgroundColor: 'background.paper', + ...theme.applyDarkStyles({ + borderColor: 'primaryDark.700', + backgroundColor: 'primaryDark.900', + }), + })} + > + + + {filteredCompanies.map((company) => ( + ({ + '&:last-child td': { border: 0 }, + transition: 'background-color 0.2s ease-in-out', + '&:hover': { + backgroundColor: 'action.hover', + }, + ...theme.applyDarkStyles({ + '&:hover': { + backgroundColor: 'primaryDark.800', + }, + }), + })} + > + + ({ + height: { xs: 24, sm: 28, md: 32 }, + paddingTop: 1, + width: 'auto', + maxWidth: { xs: 60, sm: 80, md: 100 }, + objectFit: 'contain', + filter: 'brightness(0) saturate(100%)', + ...theme.applyDarkStyles({ + filter: + 'brightness(0) saturate(100%) invert(93%) sepia(7%) saturate(0%) hue-rotate(84deg) brightness(104%) contrast(111%)', + }), + })} + /> + + + + + {company.name} + + + + + + {company.industries + .filter((ind) => ind !== 'All') + .map((industry) => ( + + ))} + + + + + {company.caseStudySlug ? ( + + ) : ( + + )} + + + ))} + +
+ + + ); +} diff --git a/docs/src/components/customers/data/customersData.ts b/docs/src/components/customers/data/customersData.ts new file mode 100644 index 00000000000000..1a3c7d3fb6ef04 --- /dev/null +++ b/docs/src/components/customers/data/customersData.ts @@ -0,0 +1,39 @@ +export type Industry = + | 'All' + | 'IT' + | 'Fintech' + | 'Health' + | 'SaaS' + | 'E-commerce' + | 'Enterprise' + | 'Media'; + +export interface Company { + name: string; + logo: string; + industries: Industry[]; + caseStudySlug?: string; + website?: string; +} + +export const INDUSTRIES: Industry[] = [ + // just adding some as an example + 'All', + 'Fintech', + 'Health', + 'SaaS', + 'E-commerce', + 'Enterprise', + 'Media', + 'IT', +]; + +export const COMPANIES: Company[] = [ + { + name: 'CGI', + logo: '/static/branding/companies/cgi_spotlight.svg', + industries: ['IT', 'Enterprise'], + website: 'https://www.cgi.com/', + caseStudySlug: 'cgi', + }, +]; From 13d52d9b3e73efdbbd2bbb1b66bc44772ac4696a Mon Sep 17 00:00:00 2001 From: alelthomas Date: Mon, 22 Dec 2025 16:36:57 -0700 Subject: [PATCH 2/2] nasa --- docs/src/components/customers/CustomersIndustryTable.tsx | 2 +- docs/src/components/customers/data/customersData.ts | 6 ++++++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/docs/src/components/customers/CustomersIndustryTable.tsx b/docs/src/components/customers/CustomersIndustryTable.tsx index 6da99de35aa9b7..fe34cf07ce3637 100644 --- a/docs/src/components/customers/CustomersIndustryTable.tsx +++ b/docs/src/components/customers/CustomersIndustryTable.tsx @@ -255,7 +255,7 @@ export default function CustomersIndustryTable() { whiteSpace: 'nowrap', fontSize: { xs: '0.75rem', sm: '0.875rem' }, '&:hover': { - color: 'primary.700', + color: 'primary.400', }, }} > diff --git a/docs/src/components/customers/data/customersData.ts b/docs/src/components/customers/data/customersData.ts index 1a3c7d3fb6ef04..3a55e33cfe4772 100644 --- a/docs/src/components/customers/data/customersData.ts +++ b/docs/src/components/customers/data/customersData.ts @@ -36,4 +36,10 @@ export const COMPANIES: Company[] = [ website: 'https://www.cgi.com/', caseStudySlug: 'cgi', }, + { + name: 'NASA', + logo: '/static/branding/companies/slider/nasa.png', + industries: ['Enterprise'], + website: 'https://www.nasa.gov/', + }, ];