Skip to content
This repository has been archived by the owner on May 24, 2022. It is now read-only.

Port/new nutanix case study + new layout #103

Merged
merged 18 commits into from
Apr 12, 2022
Merged
Prev Previous commit
Next Next commit
Reduce redundant code in UseChallengeSolutionsResults
Becca Steinbrecher authored and Becca Steinbrecher committed Apr 8, 2022

Verified

This commit was signed with the committer’s verified signature.
Ank4n Ankan
commit 867c23d7a316664569eb49ce632496ffccef8f3c
47 changes: 19 additions & 28 deletions src/components/CaseStudies/UseChallengeSolutionResults.tsx
Original file line number Diff line number Diff line change
@@ -18,6 +18,21 @@ interface Props {
results: string[] | TextLink[]
}

interface ListItemProps {
item: string | TextLink
}

const isString = (value: string | TextLink): boolean => typeof value === 'string'

const ListItemType: FunctionComponent<ListItemProps> = ({ item }) => (
<li>
{isString(item) ?
<span>{item}</span> :
<Link href={(item as TextLink).href}>{(item as TextLink).text}</Link>
}
</li>
)

export const UseChallengeSolutionResults: FunctionComponent<Props> = ({ useCases, challenges, solutions, results }) => (
<section className="d-flex flex-column flex-md-row">
<div className="bg-light-gray-2 p-lg-6 p-md-5 px-1 py-5 col-sm-12 col-md-6">
@@ -30,13 +45,7 @@ export const UseChallengeSolutionResults: FunctionComponent<Props> = ({ useCases
<h5 className="font-weight-bold">Use case</h5>
<ul className="pl-4">
{useCases.map(useCase => (
<li key={typeof useCase === 'string' ? useCase : useCase.text}>
{typeof useCase === 'string' ? (
<span>{useCase}</span>
) : (
<Link href={useCase.href}>{useCase.text}</Link>
)}
</li>
<ListItemType key={isString(useCase) ? useCase as string : (useCase as TextLink).text} item={useCase} />
))}
</ul>
</div>
@@ -49,13 +58,7 @@ export const UseChallengeSolutionResults: FunctionComponent<Props> = ({ useCases
<h5 className="font-weight-bold">Challenge</h5>
<ul className="pl-4">
{challenges.map(challenge => (
<li key={typeof challenge === 'string' ? challenge : challenge.text}>
{typeof challenge === 'string' ? (
<span>{challenge}</span>
) : (
<Link href={challenge.href}>{challenge.text}</Link>
)}
</li>
<ListItemType key={isString(challenge) ? (challenge as string) : (challenge as TextLink).text} item={challenge} />
))}
</ul>
</div>
@@ -68,13 +71,7 @@ export const UseChallengeSolutionResults: FunctionComponent<Props> = ({ useCases
<h5 className="font-weight-bold">Solution</h5>
<ul className="pl-4">
{solutions.map(solution => (
<li key={typeof solution === 'string' ? solution : solution.text}>
{typeof solution === 'string' ? (
<span>{solution}</span>
) : (
<Link href={solution.href}>{solution.text}</Link>
)}
</li>
<ListItemType key={isString(solution) ? (solution as string) : (solution as TextLink).text} item={solution} />
))}
</ul>
</div>
@@ -91,13 +88,7 @@ export const UseChallengeSolutionResults: FunctionComponent<Props> = ({ useCases
<h5 className="font-weight-bold">Results</h5>
<ul className="pl-4">
{results.map(result => (
<li key={typeof result === 'string' ? result : result.text}>
{typeof result === 'string' ? (
<span>{result}</span>
) : (
<Link href={result.href}>{result.text}</Link>
)}
</li>
<ListItemType key={isString(result) ? (result as string) : (result as TextLink).text} item={result} />
))}
</ul>
</div>
10 changes: 4 additions & 6 deletions src/styles/pages/__case_studies.scss
Original file line number Diff line number Diff line change
@@ -76,12 +76,10 @@
}
}

.case-study {
.author-bio {
&__img {
// TODO: On Tailwind migration, trade out this style for utility class: "border border-3 border-sky-400"
border: 3px solid #00A1C7
}
.case-study .author-bio {
&__img {
// TODO: On Tailwind migration, trade out this style for utility class: "border border-3 border-sky-400"
border: 3px solid #00A1C7
}
}