-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Implement sponsor component and add sponsor data
- Loading branch information
1 parent
28264cb
commit 6067c80
Showing
8 changed files
with
276 additions
and
158 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| import { Button, Modal } from "@canonical/react-components"; | ||
| import { useState } from "react"; | ||
|
|
||
| type SponsorLogoAndModalProps = { | ||
| name: string, | ||
| level: string, | ||
| logoImageSrc: string, | ||
| description: string, | ||
| url: string, | ||
| } | ||
| export default function SponsorLogoAndModal(props: SponsorLogoAndModalProps) { | ||
| const [modalOpen, setModalOpen] = useState(false); | ||
| const closeHandler = () => setModalOpen(false); | ||
| return ( | ||
| <> | ||
| <img src={props.logoImageSrc} alt={props.name} onClick={() => setModalOpen(true)} /> | ||
| {modalOpen ? <Modal close={closeHandler} title="About the sponsor" buttonRow={<> | ||
| <Button appearance="positive" element="a" href={props.url}> | ||
| Visit website | ||
| </Button> | ||
| </>}> | ||
| <img src={props.logoImageSrc} alt={props.name} /> | ||
| <h1>{props.name}</h1> | ||
| <b>{props.level}</b> | ||
| <p> | ||
| {props.description} | ||
| </p> | ||
| </Modal> : null} | ||
| </> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| --- | ||
| import { sponsors } from "@data/sponsors"; | ||
| import { Strip, Col, Row } from "@canonical/react-components"; | ||
| import SponsorLogoAndModal from "@components/SponsorLogoAndModal.tsx"; | ||
| --- | ||
|
|
||
| <Strip type="light"> | ||
| <h2>Our Sponsors</h2> | ||
| { | ||
| sponsors.map((level) => ( | ||
| <> | ||
| <Row> | ||
| <hr class="p-rule" /> | ||
| </Row> | ||
| <Row> | ||
| <Col size={3}> | ||
| <h3>{level.sponsorLevelName}</h3> | ||
| </Col> | ||
| <Col size={9}> | ||
| <Row> | ||
| {level.list.map((item) => ( | ||
| <Col | ||
| style={{ paddingTop: 10 }} | ||
| size={level.sizeOnLargeScreen} | ||
| medium={level.sizeOnMediumScreen} | ||
| small={level.sizeOnSmallScreen} | ||
| > | ||
| <SponsorLogoAndModal | ||
| name={item.name} | ||
| logoImageSrc={item.logoUrl} | ||
| description={item.description} | ||
| url={item.url} | ||
| level={level.sponsorLevelName} | ||
| client:only="react" | ||
| /> | ||
| </Col> | ||
| ))} | ||
| </Row> | ||
| </Col> | ||
| </Row> | ||
| </> | ||
| )) | ||
| } | ||
| </Strip> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,161 @@ | ||
| import type { ColSize } from "@canonical/react-components" | ||
| import logoPlaceHolder from "@assets/logo_placeholder.svg"; | ||
|
|
||
| export const sponsors = [ | ||
| { | ||
| sponsorLevelName: "Diamond", | ||
| sizeOnLargeScreen: 6 as ColSize, | ||
| sizeOnMediumScreen: 6 as ColSize, | ||
| sizeOnSmallScreen: 6 as ColSize, | ||
| list: [ | ||
| { | ||
| name: "Sponsor name", | ||
| logoUrl: logoPlaceHolder.src, | ||
| url: "https://www.ubuntu.com/", | ||
| description: "Canonical is the publisher of Ubuntu, the OS for most public cloud workloads as well as the emerging categories of smart gateways, self-driving cars, and advanced robots. Canonical provides enterprise security, support, and services to commercial users of Ubuntu." | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| sponsorLevelName: "Platinum", | ||
| sizeOnLargeScreen: 4 as ColSize, | ||
| sizeOnMediumScreen: 4 as ColSize, | ||
| sizeOnSmallScreen: 3 as ColSize, | ||
| list: [ | ||
| { | ||
| name: "Sponsor name", | ||
| logoUrl: logoPlaceHolder.src, | ||
| url: "https://www.ubuntu.com/", | ||
| description: "Canonical is the publisher of Ubuntu, the OS for most public cloud workloads as well as the emerging categories of smart gateways, self-driving cars, and advanced robots. Canonical provides enterprise security, support, and services to commercial users of Ubuntu." | ||
| }, | ||
| { | ||
| name: "Sponsor name", | ||
| logoUrl: logoPlaceHolder.src, | ||
| url: "https://www.ubuntu.com/", | ||
| description: "Canonical is the publisher of Ubuntu, the OS for most public cloud workloads as well as the emerging categories of smart gateways, self-driving cars, and advanced robots. Canonical provides enterprise security, support, and services to commercial users of Ubuntu." | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| sponsorLevelName: "Gold", | ||
| sizeOnLargeScreen: 4 as ColSize, | ||
| sizeOnMediumScreen: 4 as ColSize, | ||
| sizeOnSmallScreen: 3 as ColSize, | ||
| list: [ | ||
| { | ||
| name: "Sponsor name", | ||
| logoUrl: logoPlaceHolder.src, | ||
| url: "https://www.ubuntu.com/", | ||
| description: "Canonical is the publisher of Ubuntu, the OS for most public cloud workloads as well as the emerging categories of smart gateways, self-driving cars, and advanced robots. Canonical provides enterprise security, support, and services to commercial users of Ubuntu." | ||
| }, | ||
| { | ||
| name: "Sponsor name", | ||
| logoUrl: logoPlaceHolder.src, | ||
| url: "https://www.ubuntu.com/", | ||
| description: "Canonical is the publisher of Ubuntu, the OS for most public cloud workloads as well as the emerging categories of smart gateways, self-driving cars, and advanced robots. Canonical provides enterprise security, support, and services to commercial users of Ubuntu." | ||
| }, | ||
| { | ||
| name: "Sponsor name", | ||
| logoUrl: logoPlaceHolder.src, | ||
| url: "https://www.ubuntu.com/", | ||
| description: "Canonical is the publisher of Ubuntu, the OS for most public cloud workloads as well as the emerging categories of smart gateways, self-driving cars, and advanced robots. Canonical provides enterprise security, support, and services to commercial users of Ubuntu." | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| sponsorLevelName: "Silver", | ||
| sizeOnLargeScreen: 3 as ColSize, | ||
| sizeOnMediumScreen: 3 as ColSize, | ||
| sizeOnSmallScreen: 2 as ColSize, | ||
| list: [ | ||
| { | ||
| name: "Sponsor name", | ||
| logoUrl: logoPlaceHolder.src, | ||
| url: "https://www.ubuntu.com/", | ||
| description: "Canonical is the publisher of Ubuntu, the OS for most public cloud workloads as well as the emerging categories of smart gateways, self-driving cars, and advanced robots. Canonical provides enterprise security, support, and services to commercial users of Ubuntu." | ||
| }, | ||
| { | ||
| name: "Sponsor name", | ||
| logoUrl: logoPlaceHolder.src, | ||
| url: "https://www.ubuntu.com/", | ||
| description: "Canonical is the publisher of Ubuntu, the OS for most public cloud workloads as well as the emerging categories of smart gateways, self-driving cars, and advanced robots. Canonical provides enterprise security, support, and services to commercial users of Ubuntu." | ||
| }, | ||
| { | ||
| name: "Sponsor name", | ||
| logoUrl: logoPlaceHolder.src, | ||
| url: "https://www.ubuntu.com/", | ||
| description: "Canonical is the publisher of Ubuntu, the OS for most public cloud workloads as well as the emerging categories of smart gateways, self-driving cars, and advanced robots. Canonical provides enterprise security, support, and services to commercial users of Ubuntu." | ||
| }, | ||
| { | ||
| name: "Sponsor name", | ||
| logoUrl: logoPlaceHolder.src, | ||
| url: "https://www.ubuntu.com/", | ||
| description: "Canonical is the publisher of Ubuntu, the OS for most public cloud workloads as well as the emerging categories of smart gateways, self-driving cars, and advanced robots. Canonical provides enterprise security, support, and services to commercial users of Ubuntu." | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| sponsorLevelName: "Bronze", | ||
| sizeOnLargeScreen: 2 as ColSize, | ||
| sizeOnMediumScreen: 2 as ColSize, | ||
| sizeOnSmallScreen: 1 as ColSize, | ||
| list: [ | ||
| { | ||
| name: "Sponsor name", | ||
| logoUrl: logoPlaceHolder.src, | ||
| url: "https://www.ubuntu.com/", | ||
| description: "Canonical is the publisher of Ubuntu, the OS for most public cloud workloads as well as the emerging categories of smart gateways, self-driving cars, and advanced robots. Canonical provides enterprise security, support, and services to commercial users of Ubuntu." | ||
| }, | ||
| { | ||
| name: "Sponsor name", | ||
| logoUrl: logoPlaceHolder.src, | ||
| url: "https://www.ubuntu.com/", | ||
| description: "Canonical is the publisher of Ubuntu, the OS for most public cloud workloads as well as the emerging categories of smart gateways, self-driving cars, and advanced robots. Canonical provides enterprise security, support, and services to commercial users of Ubuntu." | ||
| }, | ||
| { | ||
| name: "Sponsor name", | ||
| logoUrl: logoPlaceHolder.src, | ||
| url: "https://www.ubuntu.com/", | ||
| description: "Canonical is the publisher of Ubuntu, the OS for most public cloud workloads as well as the emerging categories of smart gateways, self-driving cars, and advanced robots. Canonical provides enterprise security, support, and services to commercial users of Ubuntu." | ||
| }, | ||
| { | ||
| name: "Sponsor name", | ||
| logoUrl: logoPlaceHolder.src, | ||
| url: "https://www.ubuntu.com/", | ||
| description: "Canonical is the publisher of Ubuntu, the OS for most public cloud workloads as well as the emerging categories of smart gateways, self-driving cars, and advanced robots. Canonical provides enterprise security, support, and services to commercial users of Ubuntu." | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| sponsorLevelName: "Supporter", | ||
| sizeOnLargeScreen: 2 as ColSize, | ||
| sizeOnMediumScreen: 2 as ColSize, | ||
| sizeOnSmallScreen: 1 as ColSize, | ||
| list: [ | ||
| { | ||
| name: "Sponsor name", | ||
| logoUrl: logoPlaceHolder.src, | ||
| url: "https://www.ubuntu.com/", | ||
| description: "Canonical is the publisher of Ubuntu, the OS for most public cloud workloads as well as the emerging categories of smart gateways, self-driving cars, and advanced robots. Canonical provides enterprise security, support, and services to commercial users of Ubuntu." | ||
| }, | ||
| { | ||
| name: "Sponsor name", | ||
| logoUrl: logoPlaceHolder.src, | ||
| url: "https://www.ubuntu.com/", | ||
| description: "Canonical is the publisher of Ubuntu, the OS for most public cloud workloads as well as the emerging categories of smart gateways, self-driving cars, and advanced robots. Canonical provides enterprise security, support, and services to commercial users of Ubuntu." | ||
| }, | ||
| { | ||
| name: "Sponsor name", | ||
| logoUrl: logoPlaceHolder.src, | ||
| url: "https://www.ubuntu.com/", | ||
| description: "Canonical is the publisher of Ubuntu, the OS for most public cloud workloads as well as the emerging categories of smart gateways, self-driving cars, and advanced robots. Canonical provides enterprise security, support, and services to commercial users of Ubuntu." | ||
| }, | ||
| { | ||
| name: "Sponsor name", | ||
| logoUrl: logoPlaceHolder.src, | ||
| url: "https://www.ubuntu.com/", | ||
| description: "Canonical is the publisher of Ubuntu, the OS for most public cloud workloads as well as the emerging categories of smart gateways, self-driving cars, and advanced robots. Canonical provides enterprise security, support, and services to commercial users of Ubuntu." | ||
| } | ||
| ] | ||
| } | ||
| ] |
Oops, something went wrong.