diff --git a/plugins/catalog/src/components/AboutCard/IconLinkVertical/IconLinkVertical.tsx b/plugins/catalog/src/components/AboutCard/IconLinkVertical/IconLinkVertical.tsx
index 580dcff0f5..63df4feaf9 100644
--- a/plugins/catalog/src/components/AboutCard/IconLinkVertical/IconLinkVertical.tsx
+++ b/plugins/catalog/src/components/AboutCard/IconLinkVertical/IconLinkVertical.tsx
@@ -23,9 +23,10 @@ export type IconLinkVerticalProps = {
href?: string;
disabled?: boolean;
label: string;
+ action?: React.ReactNode;
};
-const useIconStyles = makeStyles({
+const useIconStyles = makeStyles(theme => ({
link: {
display: 'grid',
justifyItems: 'center',
@@ -41,12 +42,16 @@ const useIconStyles = makeStyles({
fontWeight: 600,
letterSpacing: 1.2,
},
-});
+ linkStyle: {
+ color: theme.palette.secondary.main,
+ },
+}));
export function IconLinkVertical({
icon = ,
href = '#',
disabled = false,
+ action,
...props
}: IconLinkVerticalProps) {
const classes = useIconStyles();
@@ -64,6 +69,23 @@ export function IconLinkVertical({
);
}
+ if (action) {
+ return (
+
+ {icon}
+ {action}
+
+ );
+ }
+
return (
{icon}
diff --git a/plugins/catalog/src/index.ts b/plugins/catalog/src/index.ts
index 762f4924c0..101680c552 100644
--- a/plugins/catalog/src/index.ts
+++ b/plugins/catalog/src/index.ts
@@ -23,3 +23,4 @@ export { Router } from './components/Router';
export { useEntity, EntityContext } from './hooks/useEntity';
export { AboutCard } from './components/AboutCard';
export { EntityPageLayout } from './components/EntityPageLayout';
+export { IconLinkVertical } from './components/AboutCard/IconLinkVertical';