waveterm/docusaurus-og
0
0
Fork 0
mirror of https://github.com/wavetermdev/docusaurus-og.git synced 2026-08-05 13:46:35 -07:00
Code Issues Packages Projects Releases Wiki Activity

feat: make CTA section list items clickable

Browse Source
This commit is contained in:
Hossein Mehrabi
2023-12-20 17:42:04 +03:30
parent 685f602621
commit fc7d4fc357
2 changed files with 47 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.scss
+15 -6
View File
@@ -115,12 +115,19 @@
flex-direction: column;
gap: 1.5rem 0;
> div {
> * {
&:not(:first-child) {
border-top: 1px solid rgb(var(--lsd-border-primary));
}
}
> div {
& > a {
display: block;
text-decoration: none;
}
.mdx-cta-section__list-item {
> .mdx-cta-section__item-title {
margin-top: 1.5rem;
padding: 3px 11px;
display: inline-block;
@@ -129,7 +136,7 @@
background-color: rgb(var(--lsd-surface-secondary));
}
& > p {
& > .mdx-cta-section__item-description {
margin-top: 1rem;
}
}
@@ -144,15 +151,17 @@
.mdx-cta-section__list {
margin-top: 4rem;
& > div {
& > * {
border-top: 1px solid rgb(var(--lsd-border-primary));
}
& > div {
& .mdx-cta-section__list-item {
& > .mdx-cta-section__item-title {
font-size: 0.875rem !important;
line-height: 1.25rem !important;
}
& > p {
& > .mdx-cta-section__item-description {
@include lsd.typography('h4', true);
}
}
packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.tsx
+32 -10
View File
@@ -51,6 +51,10 @@ export type CallToActionSectionProps = Omit<
* The description of the list item
*/
description: React.ReactNode
/**
* The URL to link to when the button is clicked
*/
href?: string
}[]
}
@@ -159,16 +163,34 @@ export const CallToActionSection: React.FC<CallToActionSectionProps> = ({
</div>
{list.length > 0 && (
<div className="mdx-cta-section__list">
{list.map((option, index) => (
<div key={index}>
<Typography variant="subtitle2" component="div">
{option.title}
</Typography>
<Typography variant="h2" component="p">
{option.description}
</Typography>
</div>
))}
{list.map((option, index) => {
const content = (
<div className="mdx-cta-section__list-item" key={index}>
<Typography
component="div"
variant="subtitle2"
className="mdx-cta-section__item-title"
>
{option.title}
</Typography>
<Typography
variant="h2"
component="p"
className="mdx-cta-section__item-description"
>
{option.description}
</Typography>
</div>
)
return option.href ? (
<a href={option.href} target="_blank">
{content}
</a>
) : (
content
)
})}
</div>
)}
</div>