diff --git a/src/components/ClassifiedsCard/index.mdx b/src/components/ClassifiedsCard/index.mdx new file mode 100644 index 00000000..59fe10a9 --- /dev/null +++ b/src/components/ClassifiedsCard/index.mdx @@ -0,0 +1,53 @@ +--- +name: Classifieds Card +route: /classifieds-card +--- + +import { Playground, Props } from 'docz' +import ClassifiedsCard from '.' + +# Classifieds Card + +A proper card layout for classifieds + + + + + + diff --git a/src/components/ClassifiedsCard/index.tsx b/src/components/ClassifiedsCard/index.tsx new file mode 100644 index 00000000..94d2b001 --- /dev/null +++ b/src/components/ClassifiedsCard/index.tsx @@ -0,0 +1,145 @@ +import * as React from 'react' +import { render } from 'react-dom' + +import { css } from 'react-emotion' + +import { + headlineFont, + storyListFont, + cardShadow, + regularFont, + bodyFont, +} from '../../globals/mainsiteGlobalStyles' + +interface Link { + name: string + url: string +} + +interface ClassifiedProps { + category: Link + content: Link +} + +interface ClassifiedsCardProps { + header: string + classifieds: Classified[] + link: Link +} + +function Classified(props) { + return ( +
+ + {props.category.name} + +
+ + {props.content.name} + +
+ ) +} + +export default class ClassifiedsCard extends React.Component< + ClassifiedsCardProps +> { + public static defaultProps = { + header: 'Featured Classifieds', + link: { name: 'More Classifieds »', url: './#' }, + } + constructor(props) { + super(props) + } + + public render() { + const renderedClassifieds = [] + if (this.props.classifieds != null) { + for (const i of this.props.classifieds) { + renderedClassifieds.push( + + ) + } + } + + return ( +
+
+ {this.props.header} +
+
+ {renderedClassifieds} +
+
+ + {this.props.link.name} + +
+
+ ) + } +} diff --git a/src/components/SectionHeader/index.mdx b/src/components/SectionHeader/index.mdx index 5828d9fd..b496df0a 100644 --- a/src/components/SectionHeader/index.mdx +++ b/src/components/SectionHeader/index.mdx @@ -18,14 +18,14 @@ Note that `SectionHeader` expects an array of `Link` objects which include `name diff --git a/src/components/StoryList/index.tsx b/src/components/StoryList/index.tsx index b98c6f15..35c5c97b 100644 --- a/src/components/StoryList/index.tsx +++ b/src/components/StoryList/index.tsx @@ -54,7 +54,6 @@ class StoryList extends React.Component { box-shadow: ${MainSiteStyles.cardShadow}; justify-content: center; margin: auto; - max-width: 292px; `} >