<commit_before>import { h } from "preact";
import MaterialComponent from "../MaterialComponent";

/**
 * @prop fixed = false
 */
class Toolbar extends MaterialComponent {
	constructor() {
		super();
		this.componentName = "toolbar";
		this._mdcProps = ["fixed"];
	}
	materialDom(props) {
		return (
			<header ref={control=>{this.control = control;}} {...props}>
				<section class="mdc-toolbar__section mdc-toolbar__section--align-start">
					{props.icon && <a class="material-icons">{props.icon}</a>}
					<span class="mdc-toolbar__title">{props.title}</span>
				</section>
				{props.children}
			</header>
		);
	}
}

/**
 * @prop align-end = false
 */
class ToolbarSection extends MaterialComponent {
	constructor() {
		super();
		this.componentName = "toolbar__section";
		this._mdcProps = ["align-end"];
	}
	materialDom(props) {
		return (
			<section>
				{...props}
			</section>
		);
	}
}

Toolbar.Section = ToolbarSection;

export default Toolbar;<commit_msg>breaking toolbar into components (#30)<commit_after>import { h } from "preact";
import MaterialComponent from "../MaterialComponent";

/**
 * @prop fixed = false
 */
class Toolbar extends MaterialComponent {
	constructor() {
		super();
		this.componentName = "toolbar";
		this._mdcProps = ["fixed"];
	}
	materialDom(props) {
		return (
			<header ref={control=>{this.control = control;}} {...props}>
				{props.children}
			</header>
		);
	}
}

/**
 * @prop align-end = false
 * @prop align-start = false
 */
class ToolbarSection extends MaterialComponent {
	constructor() {
		super();
		this.componentName = "toolbar__section";
		this._mdcProps = ["align-start", "align-end"];
	}
	materialDom(props) {
		return (
			<section {...props}>
				{props.children}
			</section>
		);
	}
}

class ToolbarIcon extends MaterialComponent {
	constructor() {
		super();
		this.componentName = "toolbal__icon";
		this._mdcProps = ["align-end"];
	}
	materialDom(props) {
		return (
				<a className="material-icons" {...props}>{props.children || 'menu'}</a>
		);
	}
}

/**
 * @prop title = ''
 */
class ToolbarTitle extends MaterialComponent {
	constructor() {
		super();
		this.componentName = "toolbar__title";
	}
	materialDom(props) {
		return (
				<span {...props}>{props.children}</span>
		);
	}
}

Toolbar.Section = ToolbarSection;
Toolbar.Icon = ToolbarIcon;
Toolbar.Title = ToolbarTitle;

export default Toolbar;
{'fraction_non_alphanumeric': 0.17073170731707318, 'fraction_numerical': 0.0008410428931875525, 'mean_word_length': 3.748502994011976, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 23, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1627124', 'n_tokens_mistral': 855, 'n_tokens_neox': 776, 'n_words': 155}