processing-website/src/components/examples/ExamplesList.js at main · processing/processing-website · GitHub

Repository navigation

History

import React, { Fragment, memo, useState } from 'react';

import classnames from 'classnames';

import { LocalizedLink as Link } from 'gatsby-theme-i18n';

import { useIntl } from 'react-intl';

import { GatsbyImage } from 'gatsby-plugin-image';

import ToggleButton from '../ToggleButton';

import { slugify } from '../../utils';

import { useTreeSort } from '../../hooks';

import * as css from './ExamplesList.module.css';

import * as grid from '../../styles/grid.module.css';

const ExamplesList = ({ tree }) => {

const intl = useIntl();

const [curated, setCurated] = useState(false);

const handleToggle = (toggle) => {

setCurated((curated) => !curated);

};

const sortedTree = useTreeSort(tree, `order`, curated);

return (

{Object.keys(sortedTree).map((category) => (

{intl.formatMessage({ id: category })}

</h2>

<ToggleButton

defaultLabel="A-Z"

pressedLabel={intl.formatMessage({ id: 'PressedSortByLevel' })}

ariaLabel="Sort by level"

toggle={curated}

onToggle={handleToggle}

</div>

{category === 'Topics'

? intl.formatMessage({ id: 'topicExamples' })

: intl.formatMessage({ id: 'basicExamples' })}

</p>

{Object.keys(sortedTree[category]).map((subcategory) => (

<h3

id={slugify(category, subcategory)}

className={classnames(grid.col, css.subcategoryName)}>

{intl.formatMessage({ id: subcategory })}

</h3>

{sortedTree[category][subcategory].map((item, key) => (

))}

</ul>

</Fragment>

))}

</div>

</Fragment>

))}

</div>

);

};

export const ExampleItem = memo(({ node, variant }) => {

return (

{node.image && (

<GatsbyImage

className={css.cover}

image={node.image.childImageSharp.gatsbyImageData}

alt={node.name}

)}

</Link>

</li>

);

});

export default memo(ExamplesList);

processing-website/src/components/examples/ExamplesList.js at main · processing/processing-website · GitHub

Repository navigation

Expand file tree

Breadcrumbs

ExamplesList.js

Latest commit

History

Breadcrumbs

ExamplesList.js

File metadata and controls