text:
import * as React from "react";
import * as LinkedStateMixin from "react-addons-linked-state-mixin";
import * as MaterialUi from "material-ui";
import ActionGrade from "material-ui/lib/svg-icons/action/grade";
import AppBar from "material-ui/lib/app-bar";
import ArrowDropRight from "material-ui/lib/svg-icons/navigation-arrow-drop-right";
import AutoComplete from 'material-ui/lib/auto-complete';
import Avatar from "material-ui/lib/avatar";
import Badge from "material-ui/lib/badge";
import Card from "material-ui/lib/card/card";
import CardActions from "material-ui/lib/card/card-actions";
import CardHeader from "material-ui/lib/card/card-header";
import CardMedia from 'material-ui/lib/card/card-media';
import CardText from "material-ui/lib/card/card-text";
import CardTitle from 'material-ui/lib/card/card-title';
import Checkbox from "material-ui/lib/checkbox";
import CircularProgress from 'material-ui/lib/circular-progress';
import ColorManipulator from 'material-ui/lib/utils/color-manipulator';
import Colors from "material-ui/lib/styles/colors";
import DatePicker from "material-ui/lib/date-picker/date-picker";
import Dialog from "material-ui/lib/dialog";
import Divider from 'material-ui/lib/divider';
import DropDownMenu from "material-ui/lib/drop-down-menu";
import FileFolder from "material-ui/lib/svg-icons/file/folder";
import FlatButton from "material-ui/lib/flat-button";
import FloatingActionButton from "material-ui/lib/floating-action-button";
import FontIcon from "material-ui/lib/font-icon";
import GridList from 'material-ui/lib/grid-list/grid-list';
import GridTile from 'material-ui/lib/grid-list/grid-tile';
import IconButton from "material-ui/lib/icon-button";
import IconMenu from "material-ui/lib/menus/icon-menu";
import LeftNav from 'material-ui/lib/left-nav';
import LinearProgress from 'material-ui/lib/linear-progress';
import List from 'material-ui/lib/lists/list';
import ListItem from 'material-ui/lib/lists/list-item';
import Menu from 'material-ui/lib/menus/menu';
import MenuItem from 'material-ui/lib/menus/menu-item';
import Paper from 'material-ui/lib/paper';
import Popover from 'material-ui/lib/popover/popover';
import PopoverAnimationFromTop from 'material-ui/lib/popover/popover-animation-from-top';
import RadioButton from "material-ui/lib/radio-button";
import RadioButtonGroup from "material-ui/lib/radio-button-group";
import RaisedButton from "material-ui/lib/raised-button";
import RefreshIndicator from 'material-ui/lib/refresh-indicator';
import SelectField from "material-ui/lib/select-field";
import Slider from 'material-ui/lib/slider';
import Snackbar from 'material-ui/lib/snackbar';
import Spacing from "material-ui/lib/styles/spacing";
import Styles from 'material-ui/lib/styles';
import SvgIcon from 'material-ui/lib/svg-icon';
import Tab from 'material-ui/lib/tabs/tab';
import Table from 'material-ui/lib/table/table';
import TableBody from 'material-ui/lib/table/table-body';
import TableFooter from 'material-ui/lib/table/table-footer';
import TableHeader from 'material-ui/lib/table/table-header';
import TableHeaderColumn from 'material-ui/lib/table/table-header-column';
import TableRow from 'material-ui/lib/table/table-row';
import TableRowColumn from 'material-ui/lib/table/table-row-column';
import Tabs from 'material-ui/lib/tabs/tabs';
import TextField from "material-ui/lib/text-field";
import ThemeDecorator from 'material-ui/lib/styles/theme-decorator';
import ThemeManager from 'material-ui/lib/styles/theme-manager';
import TimePicker from "material-ui/lib/time-picker";
import Toggle from "material-ui/lib/toggle";
import ToggleStar from "material-ui/lib/svg-icons/toggle/star";
import ToggleStarBorder from "material-ui/lib/svg-icons/toggle/star-border";
import Toolbar from 'material-ui/lib/toolbar/toolbar';
import ToolbarGroup from 'material-ui/lib/toolbar/toolbar-group';
import ToolbarSeparator from 'material-ui/lib/toolbar/toolbar-separator';
import ToolbarTitle from 'material-ui/lib/toolbar/toolbar-title';
import Typography from "material-ui/lib/styles/typography";
import zIndex from 'material-ui/lib/styles/zIndex';

import {SelectableContainerEnhance} from 'material-ui/lib/hoc/selectable-enhance';

import * as Icons from "material-ui/lib/svg-icons";
import ActionAndroid from 'material-ui/lib/svg-icons/action/android';
import ActionFavorite from 'material-ui/lib/svg-icons/action/favorite';
import ActionFavoriteBorder from 'material-ui/lib/svg-icons/action/favorite-border';
import ActionFlightTakeoff from 'material-ui/lib/svg-icons/action/flight-takeoff';
import ActionHome from 'material-ui/lib/svg-icons/action/home';
import ActionInfo from 'material-ui/lib/svg-icons/action/info';
import CommunicationChatBubble from 'material-ui/lib/svg-icons/communication/chat-bubble';
import ContentAdd from 'material-ui/lib/svg-icons/content/add';
import ContentCopy from 'material-ui/lib/svg-icons/content/content-copy';
import ContentDrafts from 'material-ui/lib/svg-icons/content/drafts';
import ContentFilter from 'material-ui/lib/svg-icons/content/filter-list';
import ContentInbox from 'material-ui/lib/svg-icons/content/inbox';
import ContentLink from 'material-ui/lib/svg-icons/content/link';
import ContentSend from 'material-ui/lib/svg-icons/content/send';
import Delete from 'material-ui/lib/svg-icons/action/delete';
import Download from 'material-ui/lib/svg-icons/file/file-download';
import FileCloudDownload from 'material-ui/lib/svg-icons/file/cloud-download';
import FolderIcon from 'material-ui/lib/svg-icons/file/folder-open';
import HardwareVideogameAsset from 'material-ui/lib/svg-icons/hardware/videogame-asset';
import MapsPlace from 'material-ui/lib/svg-icons/maps/place';
import MoreVertIcon from 'material-ui/lib/svg-icons/navigation/more-vert';
import NavigationClose from "material-ui/lib/svg-icons/navigation/close";
import NavigationExpandMoreIcon from 'material-ui/lib/svg-icons/navigation/expand-more';
import NotificationsIcon from 'material-ui/lib/svg-icons/social/notifications';
import PersonAdd from 'material-ui/lib/svg-icons/social/person-add';
import RemoveRedEye from 'material-ui/lib/svg-icons/image/remove-red-eye';
import StarBorder from 'material-ui/lib/svg-icons/toggle/star-border';
import UploadIcon from 'material-ui/lib/svg-icons/file/cloud-upload';

type CheckboxProps = __MaterialUI.CheckboxProps;
type MuiTheme = __MaterialUI.Styles.MuiTheme;
type TouchTapEvent = __MaterialUI.TouchTapEvent;

interface MaterialUiTestsState {
    showDialogStandardActions: boolean;
    showDialogCustomActions: boolean;
    showDialogScrollable: boolean;
    value: number;
    dataSource: [string];
    minDate: Date;
    maxDate: Date;
    autoOk: boolean;
    disableYearSelection: boolean;
    open: boolean;
    valueSingle: string;
    valueMultiple: string[];
    anchorEl: Element;
    completed: number;
    message: string;
    autoHideDuration: number;
    fixedHeader: boolean;
    fixedFooter: boolean;
    stripedRows: boolean;
    showRowHover: boolean;
    selectable: boolean;
    multiSelectable: boolean;
    enableSelectAll: boolean;
    deselectOnClickaway: boolean;
    height: string;
}

// "http://www.material-ui.com/#/customization/themes"
let muiTheme: MuiTheme = ThemeManager.getMuiTheme({
    spacing: Spacing,
    zIndex: zIndex,
    fontFamily: 'Roboto, sans-serif',
    palette: {
        primary1Color: Colors.cyan500,
        primary2Color: Colors.cyan700,
        primary3Color: Colors.lightBlack,
        accent1Color: Colors.pinkA200,
        accent2Color: Colors.grey100,
        accent3Color: Colors.grey500,
        textColor: Colors.darkBlack,
        alternateTextColor: Colors.white,
        canvasColor: Colors.white,
        borderColor: Colors.grey300,
        disabledColor: ColorManipulator.fade(Colors.darkBlack, 0.3),
        pickerHeaderColor: Colors.cyan500,
    }
});

let SelectableList = SelectableContainerEnhance(List);

@ThemeDecorator(muiTheme)
class MaterialUiTests extends React.Component<{}, MaterialUiTestsState> implements React.LinkedStateMixin {

    // injected with mixin
    linkState: <T>(key: string) => React.ReactLink<T>;

    private picker12hr: TimePicker;
    private picker24hr: TimePicker;

    private touchTapEventHandler(e: TouchTapEvent) {
        console.info("Received touch tap", e);
    }
    private formEventHandler(e: React.FormEvent) {
    }
    private selectFieldChangeHandler(e: TouchTapEvent, si: number, mi: any) {
    }
    private handleRequestClose(buttonClicked: boolean) {
    }
    private handleRequestCloseReason(reason: string) {
    }
    private handleToggle() {
        this.setState(Object.assign({}, this.state, { open: !this.state.open }));
    }
    private handleClose() {
        this.setState(Object.assign({}, this.state, { open: false }));
    }
    private handleChangeSingle(event: React.MouseEvent, value: string){
    }
    private handleChangeMultiple(event: React.MouseEvent, value: string[]) {
    }

    private handleChange = (e: TouchTapEvent, index: number, value: number) => this.setState(Object.assign({}, this.state, { value }));

    private handleUpdateInput(t: string) {
        this.setState(Object.assign({}, this.state, {
            dataSource: [t, t + t, t + t + t],
        }));
    }
    private handleTouchTap(e: TouchTapEvent) {
        alert('onTouchTap triggered on the title component');
    }
    private handleActionTouchTap() {
        this.setState(Object.assign({}, this.state, {open: false,}));
        alert('Event removed from your calendar.');
    }
    private handleChangeDuration = (event: React.FormEvent) => {
        const value = event.target["value"];
        this.setState(Object.assign({}, this.state, {
            autoHideDuration: value.length > 0 ? parseInt(value) : 0,
        }));
    }
    private onRowSelection(selectedRows: number[] | string) {
    }
    private handleActive(tab: Tab) {
        alert(`A tab with this route property ${tab.props.value} was activated.`);
    }
    private handleChangeTabs(value: any, e: React.FormEvent, tab: Tab) {
    }
    private handleChangeTimePicker12(err, time) {
        this.picker12hr.setTime(time);
    };

    private handleChangeTimePicker24(err, time) {
        this.picker24hr.setTime(time);
    };

    render() {

        const styles = {
            title: {
                cursor: 'pointer',
            },
            exampleImageInput: {
                cursor: 'pointer',
                position: 'absolute',
                top: 0,
                bottom: 0,
                right: 0,
                left: 0,
                width: '100%',
                opacity: 0,
            },
            button: {
                margin: 12,
            },
            floatingButton: {
                marginRight: 20,
            },
            textField: {
                marginLeft: 20,
            },
            floatLeft: {
                float: 'left',
            },
            root: {
                display: 'flex',
                flexWrap: 'wrap',
                justifyContent: 'space-around',
            },
            gridList: {
                width: 500,
                height: 400,
                overflowY: 'auto',
                marginBottom: 24,
            },
            icons: {
                marginRight: 24,
            },
            menu: {
                marginRight: 32,
                marginBottom: 32,
                float: 'left',
                position: 'relative',
                zIndex: 0,
            },
            rightIcon: {
                textAlign: 'center',
                lineHeight: '24px',
            },
            paper: {
                height: 100,
                width: 100,
                margin: 20,
                textAlign: 'center',
                display: 'inline-block',
            },
            popover: {
                padding: 20,
            },
            container: {
                position: 'relative',
            },
            refresh: {
                display: 'inline-block',
                position: 'relative',
            },
            block: {
                maxWidth: 250,
            },
            checkbox: {
                marginBottom: 16,
            },
            radioButton: {
                marginBottom: 16,
            },
            toggle: {
                marginBottom: 16,
            },
            propContainerStyle: {
                width: 200,
                overflow: 'hidden',
                margin: '20px auto 0',
            },
            propToggleHeader: {
                margin: '20px auto 10px',
            },
            headline: {
                fontSize: 24,
                paddingTop: 16,
                marginBottom: 12,
                fontWeight: 400,
            },
            errorStyle: {
                color: Colors.orange500,
            },
            underlineStyle: {
                borderColor: Colors.orange500,
            },
        };
        const colors = Styles.Colors;

        // "http://www.material-ui.com/#/customization/inline-styles"
        let element: React.ReactElement<any>;
        element = <Checkbox
            id="checkboxId1"
            name="checkboxName1"
            value="checkboxValue1"
            label="went for a run today"
            style={{
                width: '50%',
                margin: '0 auto'
            }}
            iconStyle={{
                fill: '#FF4081'
            }}/>
        element = React.createElement<CheckboxProps>(Checkbox, {
            id: "checkboxId1", name: "checkboxName1", value: "checkboxValue1", label: "went for a run today", style: {
                width: '50%',
                margin: '0 auto'
            }, iconStyle: {
                fill: '#FF4081'
            }
        });

        // "http://www.material-ui.com/#/components/app-bar"
        const AppBarExampleIcon = () => (
            <AppBar
                title="Title"
                iconClassNameRight="muidocs-icon-navigation-expand-more"
            />
        );

        const AppBarExampleIconButton = () => (
            <AppBar
                title={Title}
                onTitleTouchTap={this.handleTouchTap}
                iconElementLeft={<IconButton><NavigationClose /></IconButton>}
                iconElementRight={<FlatButton label="Save" />}
                />
        );
        const AppBarExampleIconMenu = () => (
            <AppBar
                title="Title"
                iconElementLeft={<IconButton><NavigationClose /></IconButton>}
                iconElementRight={
                    <IconMenu
                        iconButtonElement={
                            <IconButton><MoreVertIcon /></IconButton>
                        }
                        targetOrigin={{ horizontal: 'right', vertical: 'top' }}
                        anchorOrigin={{ horizontal: 'right', vertical: 'top' }}
                    >
                        <MenuItem primaryText="Refresh" />
                        <MenuItem primaryText="Help" />
                        <MenuItem primaryText="Sign out" />
                    </IconMenu>
                }
            />
        );

        // "http://www.material-ui.com/#/components/auto-complete"
        element =   <AutoComplete
                        hintText="Type c"
                        dataSource={this.state.dataSource}
                        onUpdateInput={this.handleUpdateInput}
                    />

        const dataSource1 = [
            {
                text: 'text-value1',
                value: (
                    <MenuItem
                        primaryText="text-value1"
                        secondaryText="☺"
                        />
                ),
            },
            {
                text: 'text-value2',
                value: (
                    <MenuItem
                        primaryText="text-value2"
                        secondaryText="☺"
                        />
                ),
            },
        ];

        const dataSource2 = ['12345', '23456', '34567'];

        const AutoCompleteExampleNoFilter = () => (

                <AutoComplete
                    hintText="text-value data"
                    filter={AutoComplete.noFilter}
                    dataSource={dataSource1}
                />

                <AutoComplete
                    floatingLabelText="showAllItems"
                    filter={AutoComplete.noFilter}
                    triggerUpdateOnFocus={true}
                    dataSource={dataSource2}
                />

        );

        const AutoCompleteExampleFilters = () => (

                <AutoComplete
                    floatingLabelText="Type t, fuzzy search"
                    filter={AutoComplete.fuzzyFilter}
                    dataSource={dataSource2}
                />

                <AutoComplete
                    floatingLabelText="Type r, case insensitive"
                    filter={AutoComplete.caseInsensitiveFilter}
                    dataSource={dataSource2}
                />

        );

        // "http://www.material-ui.com/#/components/avatar"
        const AvatarExampleSimple = () => (
            <List>
                <ListItem
                    disabled={true}
                    leftAvatar={
                    <Avatar src="images/uxceo-128.jpg" />
                    }
                    >
                    Image Avatar
                </ListItem>
                <ListItem
                    disabled={true}
                    leftAvatar={
                    <Avatar icon={<FontIcon className="muidocs-icon-communication-voicemail" />} />
                    }
                    >
                    FontIcon Avatar
                </ListItem>
                <ListItem
                    disabled={true}
                    leftAvatar={
                    <Avatar
                        icon={<FontIcon className="muidocs-icon-communication-voicemail" />}
                        color={colors.blue300}
                        backgroundColor={colors.indigo900}
                        />
                    }
                    >
                    FontIcon Avatar with custom colors
                </ListItem>
                <ListItem
                    disabled={true}
                    leftAvatar={
                    <Avatar icon={<FileFolder />} />
                    }
                >
                    SvgIcon Avatar
                </ListItem>
                <ListItem
                    disabled={true}
                    leftAvatar={
                    <Avatar
                        icon={<FileFolder />}
                        color={colors.orange200}
                        backgroundColor={colors.pink400}
                        />
                    }
                >
                    SvgIcon Avatar with custom colors
                </ListItem>
                <ListItem
                    disabled={true}
                    leftAvatar={<Avatar>A</Avatar>}
                >
                    Letter Avatar
                </ListItem>
                <ListItem
                    disabled={true}
                    leftAvatar={
                    <Avatar
                        color={colors.deepOrange300}
                        backgroundColor={colors.purple500}
                        >
                        A
                        </Avatar>
                    }
                >
                    Letter Avatar with custom colors
                </ListItem>
            </List>
        );

        //image avatar
        element = <Avatar src="images/uxceo-128.jpg" />;
        //SvgIcon avatar
        element = <Avatar icon={<FileFolder />} />;
        //SvgIcon avatar with custom colors
        element = <Avatar
            icon={<FileFolder />}
            color={Colors.orange200}
            backgroundColor={Colors.pink400} />;
        //FontIcon avatar
        element = <Avatar
            icon={
            <FontIcon className="muidocs-icon-communication-voicemail" />
            } />;
        //FontIcon avatar with custom colors
        element = <Avatar
            icon={<FontIcon className="muidocs-icon-communication-voicemail" />}
            color={Colors.blue300}
            backgroundColor={Colors.indigo900} />;
        //Letter avatar
        element = <Avatar>A</Avatar>;
        //Letter avatar with custom colors
        element = <Avatar
            color={Colors.deepOrange300}
            backgroundColor={Colors.purple500}>
            </Avatar>

        // "http://www.material-ui.com/#/components/badge"
        const BadgeExampleSimple = () => (

                <Badge
                    badgeContent={4}
                    primary={true}
                >
                    <NotificationsIcon />
                </Badge>
                <Badge
                    badgeContent={10}
                    secondary={true}
                    badgeStyle={{ top: 12, right: 12 }}
                    >
                  <IconButton tooltip="Notifications">
                    <NotificationsIcon/>
                      </IconButton>
                </Badge>

        );
        const BadgeExampleContent = () => (

                <Badge
                    badgeContent={<IconButton tooltip="Backup"><UploadIcon/></IconButton>}
                    >
                  <FolderIcon />
                </Badge>
                <Badge
                    badgeContent="©"
                    badgeStyle={{ fontSize: 20 }}
                    >
                    Company Name
                </Badge>

        );

        // "http://www.material-ui.com/#/components/flat-button"
        const FlatButtonExampleSimple = () => (

                <FlatButton label="Default" />
                <FlatButton label="Primary" primary={true} />
                <FlatButton label="Secondary" secondary={true} />
                <FlatButton label="Disabled" disabled={true} />

        );
        const FlatButtonExampleComplex = () => (

                <FlatButton label="Choose an Image">
                  <input type="file" style={styles.exampleImageInput} />
                </FlatButton>

                <FlatButton
                    label="Label before"
                    labelPosition="before"
                    primary={true}
                    icon={<ActionAndroid />}
                />

                <FlatButton
                    label="GitHub Link"
                    linkButton={true}
                    href="https://github.com/callemall/material-ui"
                    secondary={true}
                    icon={<FontIcon className="muidocs-icon-custom-github" />}
                />

        );

        // "http://www.material-ui.com/#/components/raised-button"
        const RaisedButtonExampleSimple = () => (

                <RaisedButton label="Default" style={styles.button} />
                <RaisedButton label="Primary" primary={true} style={styles.button} />
                <RaisedButton label="Secondary" secondary={true} style={styles.button} />
                <RaisedButton label="Disabled" disabled={true} style={styles.button} />

        );
        const RaisedButtonExampleComplex = () => (

                <RaisedButton
                    label="Choose an Image"
                    style={styles.button}
                >
                    <input type="file" style={styles.exampleImageInput} />
                </RaisedButton>
                <RaisedButton
                    label="Label before"
                    labelPosition="before"
                    primary={true}
                    icon={<ActionAndroid />}
                    style={styles.button}
                />
                <RaisedButton
                    label="Github Link"
                    linkButton={true}
                    href="https://github.com/callemall/material-ui"
                    secondary={true}
                    style={styles.button}
                    icon={<FontIcon className="muidocs-icon-custom-github"/>}
                />

        );

        // "http://www.material-ui.com/#/components/floating-action-button"
        const FloatingActionButtonExampleSimple = () => (

                <FloatingActionButton style={styles.floatingButton}>
                  <ContentAdd />
                </FloatingActionButton>

                <FloatingActionButton mini={true} style={styles.floatingButton}>
                  <ContentAdd />
                </FloatingActionButton>

                <FloatingActionButton secondary={true} style={styles.floatingButton}>
                  <ContentAdd />
                </FloatingActionButton>

                <FloatingActionButton mini={true} secondary={true} style={styles.floatingButton}>
                  <ContentAdd />
                </FloatingActionButton>

                <FloatingActionButton disabled={true} style={styles.floatingButton}>
                  <ContentAdd />
                </FloatingActionButton>

                <FloatingActionButton mini={true} disabled={true} style={styles.floatingButton}>
                  <ContentAdd />
                </FloatingActionButton>

        );

        // "http://www.material-ui.com/#/components/icon-button"
        const IconButtonExampleSimple = () => (

                <IconButton iconClassName="muidocs-icon-custom-github" />
                <IconButton iconClassName="muidocs-icon-custom-github" disabled={true} />

        );
        const IconButtonExampleComplex = () => (

                <IconButton tooltip="Font Icon">
                  <FontIcon className="muidocs-icon-action-home" />
                </IconButton>

                <IconButton tooltip="SVG Icon">
                  <ActionHome />
                </IconButton>

                <IconButton
                    iconClassName="material-icons"
                    tooltip="Ligature"
                >
                    home
                </IconButton>

        );
        const IconButtonExampleTooltip = () => (

                <IconButton
                    iconClassName="muidocs-icon-custom-github" tooltip="bottom-right"
                    tooltipPosition="bottom-right"
                />
                <IconButton
                    iconClassName="muidocs-icon-custom-github" tooltip="bottom-center"
                    tooltipPosition="bottom-center"
                />
                <IconButton
                    iconClassName="muidocs-icon-custom-github" tooltip="bottom-left"
                    tooltipPosition="bottom-left"
                />
                <IconButton
                    iconClassName="muidocs-icon-custom-github" tooltip="top-right"
                    tooltipPosition="top-right"
                />
                <IconButton
                    iconClassName="muidocs-icon-custom-github" tooltip="top-center"
                    tooltipPosition="top-center"
                />
                <IconButton
                    iconClassName="muidocs-icon-custom-github" tooltip="top-left"
                    tooltipPosition="top-left"
                />

        );
        const IconButtonExampleTouch = () => (

                <IconButton tooltip="bottom-right" touch={true} tooltipPosition="bottom-right">
                  <ActionGrade/>
                </IconButton>
                <IconButton tooltip="bottom-center" touch={true} tooltipPosition="bottom-center">
                  <ActionGrade/>
                </IconButton>
                <IconButton tooltip="bottom-left" touch={true} tooltipPosition="bottom-left">
                  <ActionGrade/>
                </IconButton>
                <IconButton tooltip="top-right" touch={true} tooltipPosition="top-right">
                  <ActionGrade/>
                </IconButton>
                <IconButton tooltip="top-center" touch={true} tooltipPosition="top-center">
                  <ActionGrade/>
                </IconButton>
                <IconButton tooltip="top-left" touch={true} tooltipPosition="top-left">
                  <ActionGrade/>
                </IconButton>

        );
        //Method 1: muidocs-icon-github is defined in a style sheet.
        element = <IconButton iconClassName="muidocs-icon-custom-github" tooltip="GitHub"/>;
        //Method 2: ActionGrade is a component created using mui.SvgIcon.
        element = <IconButton tooltip= "Star" touch= { true}>
                <ActionGrade/>
            </IconButton >;
        //Method 3: Manually creating a mui.FontIcon component within IconButton
        element = <IconButton tooltip= "Sort" disabled= {true}>
                <FontIcon className="muidocs-icon-custom-sort"/>
            </IconButton>;
        //Method 4: Using Google material-icons
        element = <IconButton iconClassName="material-icons" tooltipPosition="bottom-center"
            tooltip="Sky">settings_system_daydream</IconButton>;

        // "http://www.material-ui.com/#/components/card"
        const CardExampleWithAvatar = () => (
            <Card>
                <CardHeader
                    title="URL Avatar"
                    subtitle="Subtitle"
                    avatar="http://lorempixel.com/100/100/nature/"
                />
                <CardMedia
                    overlay={<CardTitle title="Overlay title" subtitle="Overlay subtitle" />}
                >

                </CardMedia>
                <CardTitle title="Card title" subtitle="Card subtitle" />
                <CardText>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Donec mattis pretium massa.Aliquam erat volutpat.Nulla facilisi.
                    Donec vulputate interdum sollicitudin.Nunc lacinia auctor quam sed pellentesque.
                    Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio.
                </CardText>
                <CardActions>
                  <FlatButton label="Action1" />
                  <FlatButton label="Action2" />
                </CardActions>
            </Card>
        );
        const CardExampleWithoutAvatar = () => (
            <Card>
                <CardHeader
                    title="Without Avatar"
                    subtitle="Subtitle"
                    actAsExpander={true}
                    showExpandableButton={true}
                />
                <CardText expandable={true}>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Donec mattis pretium massa.Aliquam erat volutpat.Nulla facilisi.
                    Donec vulputate interdum sollicitudin.Nunc lacinia auctor quam sed pellentesque.
                    Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio.
                </CardText>
                <CardActions expandable={true}>
                  <FlatButton label="Action1"/>
                  <FlatButton label="Action2"/>
                </CardActions>
            </Card>
        );

        // "http://www.material-ui.com/#/components/date-picker"
        const DatePickerExampleSimple = () => (

                <DatePicker hintText="Portrait Dialog" />
                <DatePicker hintText="Landscape Dialog" mode="landscape" />
                <DatePicker hintText="Dialog Disabled" disabled={true} />

        );
        const DatePickerExampleInline = () => (

                <DatePicker hintText="Portrait Inline Dialog" container="inline" />
                <DatePicker hintText="Landscape Inline Dialog" container="inline" mode="landscape" />

        );
        element = (

                <DatePicker
                    hintText="Ranged Date Picker"
                    autoOk={this.state.autoOk}
                    minDate={this.state.minDate}
                    maxDate={this.state.maxDate}
                    disableYearSelection={this.state.disableYearSelection}
                />

        );
        element = <DatePicker style={{ color: 'red' }} />;
        element = <DatePicker
            floatingLabelText="Floating Label Text" />;
        element = <DatePicker
            hintText="Hint Text" />;

        // "http://material-ui.com/#/components/dialog"
        let standardActions = [
            { text: 'Cancel' },
            { text: 'Submit', onTouchTap: this.touchTapEventHandler, ref: 'submit' }
        ];

        element = <Dialog
            title="Dialog With Standard Actions"
            actions={standardActions}
            actionFocus="submit"
            open={this.state.showDialogStandardActions}
            onRequestClose={this.handleRequestClose}>
            The actions in this window are created from the json that's passed in.
            </Dialog>;

        //Custom Actions
        let customActions = [
            <FlatButton
                label="Cancel"
                secondary={true}
                onTouchTap={this.touchTapEventHandler} />,
            <FlatButton
                label="Submit"
                primary={true}
                onTouchTap={this.touchTapEventHandler} />
        ];

        element = <Dialog
            title="Dialog With Custom Actions"
            actions={customActions}
            open={this.state.showDialogCustomActions}
            onRequestClose={this.handleRequestClose}>
            The actions in this window were passed in as an array of react objects.
            </Dialog>;

        element = <Dialog
                title="Dialog With Scrollable Content"
                actions={customActions}
                autoDetectWindowHeight={true}
                autoScrollBodyContent={true}
                open={this.state.showDialogScrollable}
                onRequestClose={this.handleRequestClose}>

                  Really long content

            </Dialog>;

        // "http://www.material-ui.com/#/components/divider"
        const DividerExampleForm = () => (
            <Paper zDepth={2}>
                <TextField hintText="First name" style={styles.textField} underlineShow={false} />
                <Divider />
                <TextField hintText="Middle name" style={styles.textField} underlineShow={false} />
                <Divider />
                <TextField hintText="Last name" style={styles.textField} underlineShow={false} />
                <Divider />
                <TextField hintText="Email address" style={styles.textField} underlineShow={false} />
                <Divider />
            </Paper>
        );
        const DividerExampleList = () => (

                <List>
                  <ListItem insetChildren={true} primaryText="Janet Perkins Bennet" />
                  <ListItem insetChildren={true} primaryText="Peter Carlsson" />
                </List>
                <Divider inset={true}/>
                <List>
                  <ListItem insetChildren={true} primaryText="Aaron Bennet" />
                  <ListItem insetChildren={true} primaryText="Abbey Christensen" />
                </List>

        );
        const DividerExampleMenu = () => (
            <Menu desktop={true} style={styles.floatLeft}>
                <MenuItem primaryText="Settings" />
                <MenuItem primaryText="Help & feedback" />
                <Divider />
                <MenuItem primaryText="Sign out" />
            </Menu>
        );

        // "http://www.material-ui.com/#/components/grid-list"
        const tilesData = [
            {
                img: 'images/grid-list/00-52-29-429_640.jpg',
                title: 'Breakfast',
                author: 'jill111',
                featured: false,
            }];
        const GridListExampleSimple = () => (

                <GridList
                    cellHeight={200}
                    style={styles.gridList}
                    >
                  {tilesData.map(tile => (
                      <GridTile
                          key={tile.img}
                          title={tile.title}
                          subtitle={by {tile.author}}
                          actionIcon={<IconButton><StarBorder color="white"/></IconButton>}
                      >

                      </GridTile>
                  )) }
                </GridList>

        );
        const GridListExampleComplex = () => (

                <GridList
                    cols={2}
                    cellHeight={200}
                    padding={1}
                    style={styles.gridList}
                    >
                  {tilesData.map(tile => (
                      <GridTile
                          key={tile.img}
                          title={tile.title}
                          actionIcon={<IconButton><StarBorder color="white"/></IconButton>}
                          actionPosition="left"
                          titlePosition="top"
                          titleBackground="linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.3) 70%,rgba(0,0,0,0) 100%)"
                          cols={tile.featured ? 2 : 1}
                          rows={tile.featured ? 2 : 1}
                          >

                          </GridTile>
                  )) }
                </GridList>

        );

        element = <GridList
            cols={3}
            padding={50}
            cellHeight={200}
            style={{ color: 'red' }} />;

        element = <GridTile
            title="GridTileTitle"
            actionIcon={
GridTile
}
            actionPosition="left"
            titlePosition="top"
            titleBackground="rgba(0, 0, 0, 0.4)"
            cols={2}
            rows={1}
            style={{ color: 'red' }}>

Children are Required!

            </GridTile>;

        // "http://www.material-ui.com/#/components/font-icon"
        const FontIconExampleSimple = () => (

                <FontIcon
                    className="muidocs-icon-action-home"
                    style={styles.icons}
                    />

                <FontIcon
                    className="muidocs-icon-action-home"
                    style={styles.icons}
                    color={Colors.blue500}
                    />

                <FontIcon
                    className="muidocs-icon-action-home"
                    style={styles.icons}
                    color={Colors.red500}
                    hoverColor={Colors.greenA200}
                    />

        );

        const FontIconExampleIcons = () => (

                <FontIcon className="material-icons" style={styles.icons}>home</FontIcon>
                <FontIcon className="material-icons" style={styles.icons} color={Colors.red500}>flight_takeoff</FontIcon>
                <FontIcon className="material-icons" style={styles.icons} color={Colors.yellow500}>cloud_download</FontIcon>
                <FontIcon className="material-icons" style={styles.icons} color={Colors.blue500}>videogame_asset</FontIcon>

        );

        // "http://www.material-ui.com/#/components/svg-icon"
        const HomeIcon = (props) => (
            <SvgIcon {...props}>
                <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
            </SvgIcon>
        );

        const SvgIconExampleSimple = () => (

                <HomeIcon style={styles.icons} />
                <HomeIcon style={styles.icons} color={Colors.blue500} />
                <HomeIcon style={styles.icons} color={Colors.red500} hoverColor={Colors.greenA200} />

        );
        const SvgIconExampleIcons = () => (

                <ActionHome style={styles.icons}/>
                <ActionFlightTakeoff style={styles.icons} color={Colors.red500} />
                <FileCloudDownload style={styles.icons} color={Colors.yellow500} />
                <HardwareVideogameAsset style={styles.icons} color={Colors.blue500} />

        );
        element = <MaterialUi.Icons.NavigationMenu />;
        element = <Icons.ToggleStar />;
        element = <FontIcon className= "material-icons" color= { Colors.red500 } > home</FontIcon>;

        // "http://www.material-ui.com/#/components/left-nav"
        element = (

                <RaisedButton
                    label="Toggle LeftNav"
                    onTouchTap={this.handleToggle}
                />
                <LeftNav open={this.state.open}>
                  <MenuItem>Menu Item</MenuItem>
                  <MenuItem>Menu Item 2</MenuItem>
                </LeftNav>

        );
        element = (

                <RaisedButton
                    label="Open LeftNav"
                    onTouchTap={this.handleToggle}
                />
                <LeftNav
                    docked={false}
                    width={200}
                    open={this.state.open}
                    onRequestChange={open => this.setState(Object.assign({}, this.state, { open })) }
                >
                  <MenuItem onTouchTap={this.handleClose}>Menu Item</MenuItem>
                  <MenuItem onTouchTap={this.handleClose}>Menu Item 2</MenuItem>
                </LeftNav>

        );
        element = (

                <RaisedButton
                    label="Toggle LeftNav"
                    onTouchTap={this.handleToggle}
                />
                <LeftNav width={200} openRight={true} open={this.state.open} >
                  <AppBar title="AppBar"/>
                </LeftNav>

        );

        // "http://material-ui.com/#/components/lists"
        const ListExampleSimple = () => (

                <List>
                  <ListItem primaryText="Inbox" leftIcon={<ContentInbox />} />
                  <ListItem primaryText="Starred" leftIcon={<ActionGrade />} />
                  <ListItem primaryText="Sent mail" leftIcon={<ContentSend />} />
                  <ListItem primaryText="Drafts" leftIcon={<ContentDrafts />} />
                  <ListItem primaryText="Inbox" leftIcon={<ContentInbox />} />
                </List>
                <Divider />
                <List>
                  <ListItem primaryText="All mail" rightIcon={<ActionInfo />} />
                  <ListItem primaryText="Trash" rightIcon={<ActionInfo />} />
                  <ListItem primaryText="Spam" rightIcon={<ActionInfo />} />
                  <ListItem primaryText="Follow up" rightIcon={<ActionInfo />} />
                </List>

        );
        const ListExampleChat = () => (

                <List subheader="Recent chats">
                  <ListItem
                      primaryText="Brendan Lim"
                      leftAvatar={<Avatar src="images/ok-128.jpg" />}
                      rightIcon={<CommunicationChatBubble />}
                  />
                  <ListItem
                      primaryText="Eric Hoffman"
                      leftAvatar={<Avatar src="images/kolage-128.jpg" />}
                      rightIcon={<CommunicationChatBubble />}
                  />
                  <ListItem
                      primaryText="Grace Ng"
                      leftAvatar={<Avatar src="images/uxceo-128.jpg" />}
                      rightIcon={<CommunicationChatBubble />}
                  />
                  <ListItem
                      primaryText="Kerem Suer"
                      leftAvatar={<Avatar src="images/kerem-128.jpg" />}
                      rightIcon={<CommunicationChatBubble />}
                  />
                  <ListItem
                      primaryText="Raquel Parrado"
                      leftAvatar={<Avatar src="images/raquelromanp-128.jpg" />}
                      rightIcon={<CommunicationChatBubble />}
                  />
                </List>
                <Divider />
                <List subheader="Previous chats">
                  <ListItem
                      primaryText="Chelsea Otakan"
                      leftAvatar={<Avatar src="images/chexee-128.jpg" />}
                  />
                  <ListItem
                      primaryText="James Anderson"
                      leftAvatar={<Avatar src="images/jsa-128.jpg" />}
                  />
                </List>

        );
        const ListExampleNested = () => (

                <List subheader="Nested List Items">
                  <ListItem primaryText="Sent mail" leftIcon={<ContentSend />} />
                  <ListItem primaryText="Drafts" leftIcon={<ContentDrafts />} />
                  <ListItem
                      primaryText="Inbox"
                      leftIcon={<ContentInbox />}
                      initiallyOpen={true}
                      primaryTogglesNestedList={true}
                      nestedItems={[
                          <ListItem
                              key={1}
                              primaryText="Starred"
                              leftIcon={<ActionGrade />}
                              />,
                          <ListItem
                              key={2}
                              primaryText="Sent Mail"
                              leftIcon={<ContentSend />}
                              disabled={true}
                              nestedItems={[
                                  <ListItem key={1} primaryText="Drafts" leftIcon={<ContentDrafts />} />,
                              ]}
                          />,
                      ]}
                  />
                </List>

        );
        const iconButtonElement = (
            <IconButton
                touch={true}
                tooltip="more"
                tooltipPosition="bottom-left"
            >
                <MoreVertIcon color={Colors.grey400} />
            </IconButton>
        );
        const rightIconMenu = (
            <IconMenu iconButtonElement={iconButtonElement}>
                <MenuItem>Reply</MenuItem>
                <MenuItem>Forward</MenuItem>
                <MenuItem>Delete</MenuItem>
            </IconMenu>
        );
        const ListExampleMessages = () => (

                <List subheader="Today">
                    <ListItem
                        leftAvatar={<Avatar src="images/ok-128.jpg" />}
                        rightIconButton={rightIconMenu}
                        primaryText="Brendan Lim"
                        secondaryText={

                          Brunch this weekend?

                          I' ll be in your neighborhood doing errands this weekend.Do you want to grab brunch?

                        }
                        secondaryTextLines={2}
                    />
                </List>

        );
        const ListExampleSelectable = () => (

                <SelectableList
                    value={3}
                    subheader="SelectableContacts"
                >
                  <ListItem
                      value={1}
                      primaryText="Brendan Lim"
                      leftAvatar={<Avatar src="images/ok-128.jpg" />}
                      nestedItems={[
                          <ListItem
                              value={2}
                              primaryText="Grace Ng"
                              leftAvatar={<Avatar src="images/uxceo-128.jpg" />}
                          />,
                      ]}
                  />
                  <ListItem
                      value={3}
                      primaryText="Kerem Suer"
                      leftAvatar={<Avatar src="images/kerem-128.jpg" />}
                  />
                  <ListItem
                      value={4}
                      primaryText="Eric Hoffman"
                      leftAvatar={<Avatar src="images/kolage-128.jpg" />}
                  />
                  <ListItem
                      value={5}
                      primaryText="Raquel Parrado"
                      leftAvatar={<Avatar src="images/raquelromanp-128.jpg" />}
                  />
                </SelectableList>

        );

        // "http://www.material-ui.com/#/components/menu"
        const MenuExampleSimple = () => (

                <Menu style={styles.menu}>
                  <MenuItem primaryText="Maps" />
                  <MenuItem primaryText="Books" />
                  <MenuItem primaryText="Flights" />
                  <MenuItem primaryText="Apps" />
                </Menu>
                <Menu style={styles.menu}>
                  <MenuItem primaryText="Refresh" />
                  <MenuItem primaryText="Help & feedback" />
                  <MenuItem primaryText="Settings" />
                  <MenuItem primaryText="Sign out" />
                </Menu>

        );
        const MenuExampleDisable = () => (

                <Menu style={styles.menu} desktop={true}>
                  <MenuItem primaryText="Back" />
                  <MenuItem primaryText="Forward" disabled={true} />
                  <Divider />
                  <MenuItem primaryText="Recently closed" disabled={true} />
                  <MenuItem primaryText="Google" disabled={true} />
                  <MenuItem primaryText="YouTube" />
                </Menu>
                <Menu style={styles.menu} desktop={true}>
                  <MenuItem primaryText="Undo" />
                  <MenuItem primaryText="Redo" disabled={true} />
                  <Divider />
                  <MenuItem primaryText="Cut" disabled={true} />
                  <MenuItem primaryText="Copy" disabled={true} />
                  <MenuItem primaryText="Paste" />
                </Menu>

        );
        const MenuExampleIcons = () => (

                <Menu style={styles.menu}>
                  <MenuItem primaryText="Preview" leftIcon={<RemoveRedEye />} />
                  <MenuItem primaryText="Share" leftIcon={<PersonAdd />} />
                  <MenuItem primaryText="Get links" leftIcon={<ContentLink />} />
                  <Divider />
                  <MenuItem primaryText="Make a copy" leftIcon={<ContentCopy />} />
                  <MenuItem primaryText="Download" leftIcon={<Download />} />
                  <Divider />
                  <MenuItem primaryText="Remove" leftIcon={<Delete />} />
                </Menu>
                <Menu style={styles.menu} desktop={false}>
                  <MenuItem primaryText="Clear Config" />
                  <MenuItem primaryText="New Config" rightIcon={<PersonAdd />} />
                  <MenuItem primaryText="Project" rightIcon={<FontIcon className="material-icons">settings</FontIcon>}/>
                  <MenuItem
                      primaryText="Workspace"
                      rightIcon={
                      <FontIcon className="material-icons" style={{ color: '#559' }}>settings</FontIcon>
                      }
                  />
                  <MenuItem primaryText="Paragraph" rightIcon={¶} />
                  <MenuItem primaryText="Section" rightIcon={§} />
                </Menu>

        );
        const MenuExampleSecondary = () => (

                <Menu style={styles.menu} desktop={true} width={320}>
                  <MenuItem primaryText="Bold" secondaryText="⌘B" />
                  <MenuItem primaryText="Italic" secondaryText="⌘I" />
                  <MenuItem primaryText="Underline" secondaryText="⌘U" />
                  <MenuItem primaryText="Strikethrough" secondaryText="Alt+Shift+5" />
                  <MenuItem primaryText="Superscript" secondaryText="⌘." />
                  <MenuItem primaryText="Subscript" secondaryText="⌘," />
                  <Divider />
                  <MenuItem primaryText="Paragraph styles" rightIcon={<ArrowDropRight />} />
                  <MenuItem primaryText="Align" rightIcon={<ArrowDropRight />} />
                  <MenuItem primaryText="Line spacing" rightIcon={<ArrowDropRight />} />
                  <MenuItem primaryText="Numbered list" rightIcon={<ArrowDropRight />} />
                  <MenuItem primaryText="List options" rightIcon={<ArrowDropRight />} />
                  <Divider />
                  <MenuItem primaryText="Clear formatting" secondaryText="⌘/" />
                </Menu>
                <Menu style={styles.menu} desktop={true} width={320}>
                  <MenuItem primaryText="Open" secondaryText="Cmd + O" />
                  <MenuItem primaryText="Paste in place" secondaryText="Shift + V" />
                  <MenuItem primaryText="Research" secondaryText="Opt + Shift + Cmd + I" />
                </Menu>
                <Menu style={styles.menu} desktop={true} width={320}>
                  <MenuItem primaryText="Open" secondaryText="⌘O" />
                  <MenuItem primaryText="Paste in place" secondaryText="⇧⌘V" />
                  <MenuItem primaryText="Research" secondaryText="⌥⇧⌘I" />
                </Menu>

        );
        const MenuExampleNested = () => (

                <Menu style={styles.menu} desktop={true} width={320}>
                  <MenuItem primaryText="Single" insetChildren={true} />
                  <MenuItem primaryText="1.15" insetChildren={true} />
                  <MenuItem primaryText="Double" insetChildren={true} />
                  <MenuItem
                      primaryText="Custom: 1.2"
                      checked={true}
                      rightIcon={<ArrowDropRight />}
                      menuItems={[
                          <MenuItem
                              primaryText="Show"
                              rightIcon={<ArrowDropRight />}
                              menuItems={[
                                  <MenuItem primaryText="Show Level 2" />,
                                  <MenuItem primaryText="Grid lines" checked={true} />,
                                  <MenuItem primaryText="Page breaks" insetChildren={true} />,
                                  <MenuItem primaryText="Rules" checked={true} />,
                              ]}
                          />,
                          <MenuItem primaryText="Grid lines" checked={true} />,
                          <MenuItem primaryText="Page breaks" insetChildren={true} />,
                          <MenuItem primaryText="Rules" checked={true} />,
                      ]}
                  />
                  <Divider />
                  <MenuItem primaryText="Add space before paragraph" />
                  <MenuItem primaryText="Add space after paragraph" />
                  <Divider />
                  <MenuItem primaryText="Custom spacing..." />
                </Menu>

        );

        // "http://www.material-ui.com/#/components/icon-menu"
        const IconMenuExampleSimple = () => (

                <IconMenu
                    iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}
                    anchorOrigin={{ horizontal: 'left', vertical: 'top' }}
                    targetOrigin={{ horizontal: 'left', vertical: 'top' }}
                >
                  <MenuItem primaryText="Refresh" />
                  <MenuItem primaryText="Send feedback" />
                  <MenuItem primaryText="Settings" />
                  <MenuItem primaryText="Help" />
                  <MenuItem primaryText="Sign out" />
                </IconMenu>
                <IconMenu
                    iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}
                    anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}
                    targetOrigin={{ horizontal: 'left', vertical: 'bottom' }}
                >
                  <MenuItem primaryText="Refresh" />
                  <MenuItem primaryText="Send feedback" />
                  <MenuItem primaryText="Settings" />
                  <MenuItem primaryText="Help" />
                  <MenuItem primaryText="Sign out" />
                </IconMenu>
                <IconMenu
                    iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}
                    anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
                    targetOrigin={{ horizontal: 'right', vertical: 'bottom' }}
                >
                  <MenuItem primaryText="Refresh" />
                  <MenuItem primaryText="Send feedback" />
                  <MenuItem primaryText="Settings" />
                  <MenuItem primaryText="Help" />
                  <MenuItem primaryText="Sign out" />
                </IconMenu>
                <IconMenu
                    iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}
                    anchorOrigin={{ horizontal: 'right', vertical: 'top' }}
                    targetOrigin={{ horizontal: 'right', vertical: 'top' }}
                    >
                  <MenuItem primaryText="Refresh" />
                  <MenuItem primaryText="Send feedback" />
                  <MenuItem primaryText="Settings" />
                  <MenuItem primaryText="Help" />
                  <MenuItem primaryText="Sign out" />
                </IconMenu>

        );
        element = (

                <IconMenu
                    iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}
                    onChange={this.handleChangeSingle}
                    value={this.state.valueSingle}
                    >
                  <MenuItem value="1" primaryText="Refresh" />
                  <MenuItem value="2" primaryText="Send feedback" />
                  <MenuItem value="3" primaryText="Settings" />
                  <MenuItem value="4" primaryText="Help" />
                  <MenuItem value="5" primaryText="Sign out" />
                </IconMenu>
                <IconMenu
                    iconButtonElement={<IconButton><ContentFilter /></IconButton>}
                    onChange={this.handleChangeMultiple}
                    value={this.state.valueMultiple}
                    multiple={true}
                    >
                  <MenuItem value="1" primaryText="Blu-ray" />
                  <MenuItem value="2" primaryText="Cassette" />
                  <MenuItem value="3" primaryText="CD" />
                  <MenuItem value="4" primaryText="DVD Audio" />
                  <MenuItem value="5" primaryText="Hybrid SACD" />
                  <MenuItem value="6" primaryText="Vinyl" />
                </IconMenu>

        );
        const IconMenuExampleScrollable = () => (
            <IconMenu
                iconButtonElement={<IconButton><MapsPlace /></IconButton>}
                anchorOrigin={{ horizontal: 'left', vertical: 'top' }}
                targetOrigin={{ horizontal: 'left', vertical: 'top' }}
                maxHeight={272}
            >
                <MenuItem value="AL" primaryText="Alabama" />
                <MenuItem value="AK" primaryText="Alaska" />
            </IconMenu>
        );

        // "http://www.material-ui.com/#/components/dropdown-menu"
        element = <DropDownMenu value={this.state.value} onChange={this.handleChange}>
                        <MenuItem value={1} primaryText="Never"/>
                        <MenuItem value={2} primaryText="Every Night"/>
                        <MenuItem value={3} primaryText="Weeknights"/>
                        <MenuItem value={4} primaryText="Weekends"/>
                        <MenuItem value={5} primaryText="Weekly"/>
            </DropDownMenu>;
        const menuItems = [<MenuItem value={0} key={0} primaryText={'Item 0'}/>];
        element = (
            <DropDownMenu maxHeight={300} value={this.state.value} onChange={this.handleChange}>
                {menuItems}
            </DropDownMenu>
        );
        element = (
            <DropDownMenu value={this.state.value} onChange={this.handleChange}>
                <MenuItem value={1} label="5 am - 12 pm" primaryText="Morning" />
                <MenuItem value={2} label="12 pm - 5 pm" primaryText="Afternoon" />
                <MenuItem value={3} label="5 pm - 9 pm" primaryText="Evening" />
                <MenuItem value={4} label="9 pm - 5 am" primaryText="Night" />
            </DropDownMenu>
        );

        // "http://material-ui.com/#/components/paper"
        const PaperExampleSimple = () => (

                <Paper style={styles.paper} zDepth={1}/>
                <Paper style={styles.paper} zDepth={2}/>
                <Paper style={styles.paper} zDepth={3}/>
                <Paper style={styles.paper} zDepth={4}/>
                <Paper style={styles.paper} zDepth={5}/>

        );
        const PaperExampleRounded = () => (

                <Paper style={styles.paper} zDepth={1} rounded={false}/>
                <Paper style={styles.paper} zDepth={2} rounded={false}/>
                <Paper style={styles.paper} zDepth={3} rounded={false}/>
                <Paper style={styles.paper} zDepth={4} rounded={false}/>
                <Paper style={styles.paper} zDepth={5} rounded={false}/>

        );
        const PaperExampleCircle = () => (

                <Paper style={styles.paper} zDepth={1} circle={true}/>
                <Paper style={styles.paper} zDepth={2} circle={true}/>
                <Paper style={styles.paper} zDepth={3} circle={true}/>
                <Paper style={styles.paper} zDepth={4} circle={true}/>
                <Paper style={styles.paper} zDepth={5} circle={true}/>

        );

        // "http://www.material-ui.com/#/components/popover"
        element = (

                <RaisedButton
                    onTouchTap={this.handleTouchTap}
                    label="Click me"
                />
                <Popover
                    open={this.state.open}
                    anchorEl={this.state.anchorEl}
                    anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}
                    targetOrigin={{ horizontal: 'left', vertical: 'top' }}
                    onRequestClose={this.handleRequestCloseReason}
                >

                    <RaisedButton primary={true} label="Here is a button"/>

                </Popover>

        );
        element = (

                <RaisedButton
                    onTouchTap={this.handleTouchTap}
                    label="Click me"
                />
                <Popover
                    open={this.state.open}
                    anchorEl={this.state.anchorEl}
                    anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}
                    targetOrigin={{ horizontal: 'left', vertical: 'top' }}
                    onRequestClose={this.handleRequestCloseReason}
                    animation={PopoverAnimationFromTop}
                    >

                    <RaisedButton primary={true} label="Here is a button"/>

                </Popover>

        );

        // "http://www.material-ui.com/#/components/circular-progress"
        const CircularProgressExampleSimple = () => (

                <CircularProgress />
                <CircularProgress size={1.5} />
                <CircularProgress size={2} />

        );
        element = (

                <CircularProgress mode="determinate" value={this.state.completed}/>
                <CircularProgress mode="determinate" value={this.state.completed} size={1.5}/>
                <CircularProgress mode="determinate" value={this.state.completed} size={2}/>

        );

        // "http://www.material-ui.com/#/components/linear-progress"
        const LinearProgressExampleSimple = () => (
            <LinearProgress mode="indeterminate"/>
        );
        element = (
            <LinearProgress mode="determinate" value={this.state.completed} />
        );

        // "http://www.material-ui.com/#/components/refresh-indicator"
        const RefreshIndicatorExampleSimple = () => (

                <RefreshIndicator
                    percentage={30}
                    size={40}
                    left={10}
                    top={0}
                    status="ready"
                    style={styles.refresh}
                />
                <RefreshIndicator
                    percentage={60}
                    size={50}
                    left={65}
                    top={0}
                    status="ready"
                    style={styles.refresh}
                />
                <RefreshIndicator
                    percentage={80}
                    size={60}
                    left={120}
                    top={0}
                    color={"red"}
                    status="ready"
                    style={styles.refresh}
                />
                <RefreshIndicator
                    percentage={100}
                    size={70}
                    left={175}
                    top={0}
                    color={"red"} // Overridden by percentage={100}
                    status="ready"
                    style={styles.refresh}
                />

        );
        const RefreshIndicatorExampleLoading = () => (

                <RefreshIndicator
                    size={40}
                    left={10}
                    top={0}
                    status="loading"
                    style={styles.refresh}
                />
                <RefreshIndicator
                    size={50}
                    left={70}
                    top={0}
                    loadingColor={"#FF9800"}
                    status="loading"
                    style={styles.refresh}
                />

        );

        // "http://www.material-ui.com/#/components/select-field"
        element = (

                <SelectField value={this.state.value} onChange={this.handleChange}>
                  <MenuItem value={1} primaryText="Never"/>
                  <MenuItem value={2} primaryText="Every Night"/>
                  <MenuItem value={3} primaryText="Weeknights"/>
                  <MenuItem value={4} primaryText="Weekends"/>
                  <MenuItem value={5} primaryText="Weekly"/>
                </SelectField>

                <SelectField value={1} disabled={true}>
                  <MenuItem value={1} primaryText="Never"/>
                  <MenuItem value={2} primaryText="Every Night"/>
                </SelectField>

        );
        element = (
            <SelectField maxHeight={300} value={this.state.value} onChange={this.handleChange}>
                {menuItems}
            </SelectField>
        );
        element = (
            <SelectField value={this.state.value} onChange={this.handleChange}>
                <MenuItem value={1} label="5 am - 12 pm" primaryText="Morning"/>
                <MenuItem value={2} label="12 pm - 5 pm" primaryText="Afternoon"/>
                <MenuItem value={3} label="5 pm - 9 pm" primaryText="Evening"/>
                <MenuItem value={4} label="9 pm - 5 am" primaryText="Night"/>
            </SelectField>
        );
        element = (

                <SelectField
                    value={this.state.value}
                    onChange={this.handleChange}
                    floatingLabelText="Floating Label Text"
                >
                  {menuItems}
                </SelectField>

                <SelectField
                    value={this.state.value}
                    onChange={this.handleChange}
                    floatingLabelText="Styled Floating Label Text"
                    floatingLabelStyle={{ color: 'red' }}
                >
                  {menuItems}
                </SelectField>

        );
        const {value} = this.state;
        const night = value === 2 || value === 3;
        element = (

                <SelectField
                    value={value}
                    onChange={this.handleChange}
                    errorText={!night && 'Should be Night'}
                >
                  {menuItems}
                </SelectField>

                <SelectField
                    value={value}
                    onChange={this.handleChange}
                    errorText={night && 'Should not be Night (Custom error style)'}
                    errorStyle={{ color: 'orange' }}
                >
                  {menuItems}
                </SelectField>

        );

        // "http://www.material-ui.com/#/components/slider"
        const SliderExampleSimple = () => (

                <Slider/>
                <Slider defaultValue={0.5}/>
                <Slider defaultValue={1}/>

        );
        const SliderExampleDisabled = () => (

                <Slider disabled={true}/>
                <Slider disabled={true} value={0.5}/>
                <Slider disabled={true} value={1}/>

        );
        const SliderExampleStep = () => (
            <Slider step={0.10} value={.5}/>
        );

        // "http://www.material-ui.com/#/components/checkbox"
        const CheckboxExampleSimple = () => (

                <Checkbox
                    label="Simple"
                    style={styles.checkbox}
                />
                <Checkbox
                    label="Checked by default"
                    defaultChecked={true}
                    style={styles.checkbox}
                />
                <Checkbox
                    label="Disabled"
                    disabled={true}
                    style={styles.checkbox}
                />
                <Checkbox
                    checkedIcon={<ActionFavorite />}
                    unCheckedIcon={<ActionFavoriteBorder />}
                    label="Custom icon"
                    style={styles.checkbox}
                />
                <Checkbox
                    label="Label on the left"
                    labelPosition="left"
                    style={styles.checkbox}
                />

        );

        // "http://www.material-ui.com/#/components/radio-button"
        const RadioButtonExampleSimple = () => (

                <RadioButtonGroup name="shipSpeed" defaultSelected="not_light">
                  <RadioButton
                      value="light"
                      label="Simple"
                      style={styles.radioButton}
                  />
                  <RadioButton
                      value="not_light"
                      label="Selected by default"
                      style={styles.radioButton}
                  />
                  <RadioButton
                      value="ludicrous"
                      label="Disabled"
                      disabled={true}
                      style={styles.radioButton}
                  />
                </RadioButtonGroup>

                <RadioButtonGroup name="notRight" labelPosition="left" style={styles.block}>
                  <RadioButton
                      value="reverse"
                      label="Label on the left"
                      style={styles.radioButton}
                  />
                </RadioButtonGroup>

        );

        // "http://www.material-ui.com/#/components/toggle"
        const ToggleExampleSimple = () => (

                <Toggle
                    label="Simple"
                    style={styles.toggle}
                />
                <Toggle
                    label="Toggled by default"
                    defaultToggled={true}
                    style={styles.toggle}
                />
                <Toggle
                    label="Disabled"
                    disabled={true}
                    style={styles.toggle}
                />
                <Toggle
                    label="Label on the right"
                    labelPosition="right"
                    style={styles.toggle}
                />

        );

        // "http://material-ui.com/#/components/snackbar"
        element = (

                <RaisedButton
                    onTouchTap={this.handleTouchTap}
                    label="Add to my calendar"
                />
                <Snackbar
                    open={this.state.open}
                    message="Event added to your calendar"
                    autoHideDuration={4000}
                    onRequestClose={this.handleRequestCloseReason}
                />

        );
        element = (

                <RaisedButton
                    onTouchTap={this.handleTouchTap}
                    label="Add to my calendar"
                />

                <TextField
                    floatingLabelText="Auto Hide Duration in ms"
                    value={this.state.autoHideDuration}
                    onChange={this.handleChangeDuration}
                />
                <Snackbar
                    open={this.state.open}
                    message={this.state.message}
                    action="undo"
                    autoHideDuration={this.state.autoHideDuration}
                    onActionTouchTap={this.handleActionTouchTap}
                    onRequestClose={this.handleRequestCloseReason}
                />

        );

        // "http://www.material-ui.com/#/components/table"
        element = (

                <TableHeader>
                  <TableRow>
                    <TableHeaderColumn>ID</TableHeaderColumn>
                    <TableHeaderColumn>Name</TableHeaderColumn>
                    <TableHeaderColumn>Status</TableHeaderColumn>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  <TableRow>
                    <TableRowColumn>1</TableRowColumn>
                    <TableRowColumn>John Smith</TableRowColumn>
                    <TableRowColumn>Employed</TableRowColumn>
                  </TableRow>
                  <TableRow>
                    <TableRowColumn>2</TableRowColumn>
                    <TableRowColumn>Randal White</TableRowColumn>
                    <TableRowColumn>Unemployed</TableRowColumn>
                  </TableRow>
                  <TableRow>
                    <TableRowColumn>3</TableRowColumn>
                    <TableRowColumn>Stephanie Sanders</TableRowColumn>
                    <TableRowColumn>Employed</TableRowColumn>
                  </TableRow>
                  <TableRow>
                    <TableRowColumn>4</TableRowColumn>
                    <TableRowColumn>Steve Brown</TableRowColumn>
                    <TableRowColumn>Employed</TableRowColumn>
                  </TableRow>
                </TableBody>

        );
        const tableData = [
            {
                name: 'John Smith',
                status: 'Employed',
                selected: true,
            },
        ];
        element = (

              <TableHeader enableSelectAll={this.state.enableSelectAll}>
                <TableRow>
                  <TableHeaderColumn colSpan={3} tooltip="Super Header" style={{textAlign: 'center'}}>
                    Super Header
                  </TableHeaderColumn>
                </TableRow>
                <TableRow>
                  <TableHeaderColumn tooltip="The ID">ID</TableHeaderColumn>
                  <TableHeaderColumn tooltip="The Name">Name</TableHeaderColumn>
                  <TableHeaderColumn tooltip="The Status">Status</TableHeaderColumn>
                </TableRow>
              </TableHeader>
              <TableBody
                deselectOnClickaway={this.state.deselectOnClickaway}
                showRowHover={this.state.showRowHover}
                stripedRows={this.state.stripedRows}
              >
                {tableData.map( (row, index) => (
                  <TableRow key={index} selected={row.selected}>
                    <TableRowColumn>{index}</TableRowColumn>
                    <TableRowColumn>{row.name}</TableRowColumn>
                    <TableRowColumn>{row.status}</TableRowColumn>
                  </TableRow>
                  ))}
              </TableBody>
              <TableFooter>
                <TableRow>
                  <TableRowColumn>ID</TableRowColumn>
                  <TableRowColumn>Name</TableRowColumn>
                  <TableRowColumn>Status</TableRowColumn>
                </TableRow>
                <TableRow>
                  <TableRowColumn colSpan={3} style={{textAlign: 'center'}}>
                    Super Footer
                  </TableRowColumn>
                </TableRow>
              </TableFooter>

Table Properties

              <TextField
                floatingLabelText="Table Body Height"
                defaultValue={this.state.height}
                onChange={this.formEventHandler}
              />
              <Toggle
                name="fixedHeader"
                label="Fixed Header"
                onToggle={this.handleToggle}
                defaultToggled={this.state.fixedHeader}
              />
              <Toggle
                name="fixedFooter"
                label="Fixed Footer"
                onToggle={this.handleToggle}
                defaultToggled={this.state.fixedFooter}
              />
              <Toggle
                name="selectable"
                label="Selectable"
                onToggle={this.handleToggle}
                defaultToggled={this.state.selectable}
              />
              <Toggle
                name="multiSelectable"
                label="Multi-Selectable"
                onToggle={this.handleToggle}
                defaultToggled={this.state.multiSelectable}
              />
              <Toggle
                name="enableSelectAll"
                label="Enable Select All"
                onToggle={this.handleToggle}
                defaultToggled={this.state.enableSelectAll}
              />

TableBody Properties

              <Toggle
                name="deselectOnClickaway"
                label="Deselect On Clickaway"
                onToggle={this.handleToggle}
                defaultToggled={this.state.deselectOnClickaway}
              />
              <Toggle
                name="stripedRows"
                label="Stripe Rows"
                onToggle={this.handleToggle}
                defaultToggled={this.state.stripedRows}
              />
              <Toggle
                name="showRowHover"
                label="Show Row Hover"
                onToggle={this.handleToggle}
                defaultToggled={this.state.showRowHover}
              />

        );

        // "http://www.material-ui.com/#/components/tabs"
        const TabsExampleSimple = () => (
          <Tabs>
            <Tab label="Item One" >

Tab One

                  This is an example tab.

                  You can put any sort of HTML or react component in here. It even keeps the component state!

                <Slider name="slider0" defaultValue={0.5} />

            </Tab>
            <Tab label="Item Two" >

Tab Two

                  This is another example tab.

            </Tab>
            <Tab
              label="onActive"
              value="/home"
              onActive={this.handleActive}
            >

Tab Three

                  This is a third example tab.

            </Tab>
          </Tabs>
        );
        element = (
          <Tabs
            value={this.state.value}
            onChange={this.handleChangeTabs}
          >
            <Tab label="Tab A" value="a" >

Controllable Tab A

                  Tabs are also controllable if you want to programmatically pass them their values.
                  This allows for more functionality in Tabs such as not
                  having any Tab selected or assigning them different values.

            </Tab>
            <Tab label="Tab B" value="b">

Controllable Tab B

                  This is another example of a controllable tab. Remember, if you
                  use controllable Tabs, you need to give all of your tabs values or else
                  you wont be able to select them.

            </Tab>
          </Tabs>
        );
        const TabsExampleIcon = () => (
            <Tabs>
                <Tab icon={<FontIcon className="muidocs-icon-action-home" />} />
                <Tab icon={<ActionFlightTakeoff />} />
                <Tab icon={<FontIcon className="material-icons">favorite</FontIcon>} />
            </Tabs>
        );

        // "http://www.material-ui.com/#/components/text-field"
        const TextFieldExampleSimple = () => (

            <TextField
              hintText="Hint Text"
            />

            <TextField
              hintText="The hint text can be as long as you want, it will wrap."
            />

            <TextField
              defaultValue="Default Value"
            />

            <TextField
              hintText="Hint Text"
              floatingLabelText="Floating Label Text"
            />

            <TextField
              hintText="Password Field"
              floatingLabelText="Password"
              type="password"
            />

            <TextField
              hintText="MultiLine with rows: 2 and rowsMax: 4"
              multiLine={true}
              rows={2}
              rowsMax={4}
            />

            <TextField
              hintText="Message Field"
              floatingLabelText="MultiLine and FloatingLabel"
              multiLine={true}
              rows={2}
            />

        );
        const TextFieldExampleError = () => (

            <TextField
              hintText="Hint Text"
              errorText="This field is required"
            />

            <TextField
              hintText="Hint Text"
              errorText="The error text can be as long as you want, it will wrap."
            />

            <TextField
              hintText="Hint Text"
              errorText="This field is required"
              floatingLabelText="Floating Label Text"
            />

            <TextField
              hintText="Message Field"
              errorText="This field is required."
              floatingLabelText="MultiLine and FloatingLabel"
              multiLine={true}
              rows={2}
            />

        );
        const TextFieldExampleCustomize = () => (

            <TextField
              hintText="Styled Hint Text"
              hintStyle={styles.errorStyle}
            />

            <TextField
              hintText="Custom error color"
              errorText="This field is required."
              errorStyle={styles.errorStyle}
            />

            <TextField
              hintText="Custom Underline Color"
              underlineStyle={styles.underlineStyle}
            />

            <TextField
              hintText="Custom Underline Focus Color"
              underlineFocusStyle={styles.underlineStyle}
            />

        );
        const TextFieldExampleDisabled = () => (

            <TextField
              disabled={true}
              hintText="Disabled Hint Text"
            />

            <TextField
              disabled={true}
              defaultValue="Disabled Value"
            />

            <TextField
              disabled={true}
              hintText="Disabled Hint Text"
              floatingLabelText="Floating Label Text"
            />

            <TextField
              disabled={true}
              hintText="Disabled Hint Text"
              defaultValue="Disabled With Floating Label"
              floatingLabelText="Floating Label Text"
            />

        );
        element = <TextField
            hintText = "Hint Text"
            value = { this.state.value }
            underlineStyle = {{ borderColor: Colors.green500 }}
            onChange = { this.formEventHandler } />;

        // "http://www.material-ui.com/#/components/time-picker"
        const TimePickerExampleSimple = () => (

            <TimePicker
              hintText="12hr Format"
            />
            <TimePicker
              format="24hr"
              hintText="24hr Format"
            />

        );
        element = (

            <TimePicker
              ref={t => this.picker12hr = t}
              format="ampm"
              hintText="12hr Format"
              onChange={this.handleChangeTimePicker12}
            />
            <TimePicker
              ref={t => this.picker24hr = t}
              format="24hr"
              hintText="24hr Format"
              onChange={this.handleChangeTimePicker24}
            />

        );

        // "http://www.material-ui.com/#/components/toolbar"
        const ToolbarExamplesSimple = () => (
          <Toolbar>
            <ToolbarGroup firstChild={true} float="left">
              <DropDownMenu value={3}>
                <MenuItem value={1} primaryText="All Broadcasts" />
                <MenuItem value={2} primaryText="All Voice" />
                <MenuItem value={3} primaryText="All Text" />
                <MenuItem value={4} primaryText="Complete Voice" />
                <MenuItem value={5} primaryText="Complete Text" />
                <MenuItem value={6} primaryText="Active Voice" />
                <MenuItem value={7} primaryText="Active Text" />
              </DropDownMenu>
            </ToolbarGroup>
            <ToolbarGroup float="right">
              <ToolbarTitle text="Options" />
              <FontIcon className="muidocs-icon-custom-sort" />
              <IconMenu
                iconButtonElement={
                  <IconButton touch={true}>
                    <NavigationExpandMoreIcon />
                  </IconButton>
                }
              >
                <MenuItem primaryText="Download" />
                <MenuItem primaryText="More Info" />
              </IconMenu>
              <ToolbarSeparator />
              <RaisedButton label="Create Broadcast" primary={true} />
            </ToolbarGroup>
          </Toolbar>
        );

        return element;
    }
}

redpajama_set_name: RedPajamaGithub


text:
Humanity is 'frustratingly unprepared' for a supervolcano eruption
Benjamin Blair August 17, 2022 4 min read
The world is "frustratingly unprepared" for a massive volcanic eruption with effects being felt worldwide. Exceptionally Powerful volcanic eruptions can change the weather, disrupt supply chains, and even affect climate and food production.
That's what scientists at Cambridge and Oxford Universities warned us in a paper published in Nature, one of the world's most important science journals, where they say there is a common belief that the risk of such massive eruptions is low. not wrong.
They also add that most countries are not quite ready for it. Also, there is not enough network to monitor volcanoes. Researchers say this is completely reckless.
What are "giant volcanoes" and "super eruptions"? It's easy to guess what it's about Volcanic eruptions are thousands of times more powerful than the largest known eruptions of regular volcanoes.
They cause massive damage for thousands of kilometers. They throw hundreds of cubic kilometers (billions of cubic metres!) of gases and dust into the air. Including huge amounts of sulfur oxides that lower the temperature around the world for several years
It is included in the geological records Evidence of dozens of such super-explosions. The giant volcano in Yellowstone National Park recently erupted by 640,000 years ago. Toba in Sumatra – about 74 thousand years ago. Taupo in New Zealand about 26.5 thousand years ago.
Very powerful eruptions, defined as at least seven on an eight-point scale, don't happen very often, however, because on average every 50-100 thousand years. But, as it turned out, the effects of weaker eruptions, which are six on the scale, will be equally deplorable.
The eruption of the Tonga volcano in January this year was just six On the scale (volcanic eruption index). It was the most powerful volcanic eruption ever recorded by machines.
The researchers calculate that if an eruption lasts longer or a similar event is closer to civilization than it is in the central Pacific, the consequences would be dire.
They also analyzed the effects of ancient volcanic eruptions – the sulfur content in the cores of glaciers and ice sheets. On this basis, they calculate that the eruptions are a hundred times more powerful than the eruption of the Tonga volcano (that is, "sevens" on the scale) They occur on average once every 625 years – much more than previously thought.
The last such case was the eruption of the volcano Tambora in Indochina (today Indonesia) in 1815. Its effects were severe throughout the year around the world.
In 1815 frost was not common even in the middle of summer which was very cold and rainy. The resulting crop failure contributed to several local famines and the death of about 100,000 people. It also led to the emergence of many violent social events. He went down in history "a year without a summer"..
There are now eight times as many people living on Earth. Business networks are more complex. It's a recipe for disaster if something disrupts it – another volcanic eruption, for example.
The researchers added that only a few active volcanoes responsible for 97 very powerful eruptions were identified, and they found traces of them in the ice. This means that Most of these volcanoes remain dormant or are completely unknown to us.
Scientists add that it is not too late. The Lame Volcanoes Monitoring Network could be strengthened and was at risk of a supervolcanic eruption. We should also study volcanoes better, in the hope that their eruptions are predictable. We know little about it today.
Its strength is comparable to that of an asteroid with a diameter of one kilometer. But the risk of such a collision with the Earth is minimal, and the eruption of a supervolcano is hundreds of times greater. We watch asteroids carefully. Supervolcanoes don't do that. Only a quarter of the volcanoes that erupted after 1950 are observed using seismographs.
Volcanologists have called for years to build a satellite to monitor volcanoes. Today they have to rely on the generosity of private companies from which they get their photos, and Dr. Mani adds: "That has to change."
And is it possible to do something when such a volcanic eruption has already occurred? Today, such advanced geoengineering seems unimaginable to us. But let's think that decades ago it seemed unimaginable to us Track potential asteroids, or the possibility of pushing them away from the path of impact with the earth.
"Data collected from the ice core suggests that the risk of such a volcanic eruption over the next hundreds of years is one in six," said study co-author Dr Lata Mani. "Such giant eruptions in the past caused rapid climate change and contributed to the collapse of civilization," he adds.
"The danger of the Big Bang that harms civilization is great. Dr. Mani concludes that it is reckless not to invest to reduce the effects of such a disaster.
The video player requires JavaScript to run in the browser.
The lava destroyed the entire city. Will it happen again?
Interia.tv
Benjamin Blair
"Prone to fits of apathy. Introvert. Award-winning internet evangelist. Extreme beer expert."
See also Will the PS5 be compatible with devices from the time of the PS3? Sony has registered a new patent
Previous Cyberpunk 2077 with a new location; moder crosses another frontier [Aktualizacja]
Next Amazon's Fallout series in new images from the Vault (leak)
January 28, 2023 Benjamin Blair
Ctrl + Shift + T. This keyboard shortcut will get you out of trouble
Xiaomi POCO F4 GT with 12GB of RAM at a great price from Poland

redpajama_set_name: RedPajamaCommonCrawl


text:
Q: Why does bash freeze in windows? I am running the bash program in windows which was installed along with msys and mingw. I am trying to run ./configure. However whenever I do it the configuration freezes on "checking whether make sets $(MAKE)". Can you think of any reason why and how I can fix this issue.
I ran the command
sh -x ./configure

To see exactly where it freezes. The last run command is conftest.make which has the following code
SHELL = /bin/sh
all:
    @echo '@@@%%%=$(MAKE)=@@@%%%'

When I run this command by itself in command prompt make -f conftest.make the output is @@@%%%=make=@@@%%%. However if I start bash then run the same make command it freezes.
Why does it freeze here?

A: Are you using MinGW? If you have version 1.8* try to downgrade to 1.7. You can report this as a bug here: http://sourceforge.net/p/mingw/bugs/

redpajama_set_name: RedPajamaStackExchange


Make your own Scripture handwriting sheets!
Messianic homeschoolers need not fret! Here is a resource that will help you mold your curriculum the way the Holy Spirit meant for it. This website allows you to type your own text from single words, multi-word, name and sentence, and even paragraphs and turn them into handwriting practice sheets! Pretty cool, huh?
A tip I learned from Robin Sampson (Heart of Wisdom Homeschool Community Founder) was to read the Bible portion you plan on using that week (I personally use the weekly Torah portion, and see what sparks the kids' interest. One week they were intrigued with leprosy. Another was being "open-handed." And one week they learned what an "awl" was. I didn't even know what it was, but after our cute little handwriting sheet and added graphics, we all got the picture. So, have some fun with it and let the Holy Spirit lead you as you train your children in righteousness!
Yes, I'm sorry I did not post the link. Terrible error on my mistake. Now it is edited and there is the link for you. My apologies and thanks for the comment!


Dental Clinical Notes Template. dental programs auto clinical notes dental software. creating custom clinical note templates dentrix enewsletter tip 5 12 2011 clinical charting. patient notes template dental hygiene pinterest note templates and notes template. patient notes template dental hygiene pinterest notes template and dental hygiene. patient chart. the dentrix office manager blog are you an organizational freak. dentrix tip tuesdays dentrix notes part v treatment notes. so you want to be a volunteer registered dental hygienist. how to write carestream kodak practiceworks dental notes local anesthetics cape dental care. a click away registered dental hygienist. [Orangecountyseniorphotos.com].


When you are choosing a wig it is important to fall in love with the style, but it also an important consideration to look at the inside of the cap. It has a MONOFILAMENT crown which will create the impression that the hair is coming from your own scalp. Comfortable, realistic and quite cool to wear.
Here's the WOW factor! Here are OPEN WEFTS on incredibly slim strips of stretch material that actually mold to the shape of your head. Within an hour, this wig will memorise the contours of your head. Clever stuff!
*Standard Order: It will take 15-17 working days to produce wigs or extensions.
*Lace Front Wigs Order: It will take 18-22 working days to produce your wigs.
*Monofilament Order: It will take 25-30 working days to produce your wigs.
*Full Lace Wigs Order: It will take 22-25 working days to produce your wigs.
*Hand-tied Wigs Order: It will take 22-25 working days to produce your wigs.
PERFECTThis wig is perfect for me. The cap runs a little smaller (which is just right for me), the length is just like I wear my hair and it had a bit less hair so I didn't need to thin. Since I'm a new wig wearer (Alopecia) I prefer something that feels like ME! However, I get more brave everyday!
This wig is fantasticThis wig is fantastic! I have four of this style. My latest one I purchased is colour 15 and it may be the best colour yet. The wig was delivered within a week. I'll be back for more.
how much younger I lookedThe response to this wig was way, way above my expectation! Everyone was astonished at my new look and thought I had something done with my hair. My reason for getting the wig was that I find at age 63 the top of my head is really thinning out. I felt so self conscious because people kept staring at my head when they talk to me. EVERYONE remarked at how much younger I looked, and that put me at ease. I can't wait to order a few more in different colours. My hubby loves it too!
© 2008- Howigsau.com. All Rights Reserved.


text:
Q: Position of figure in a new page Writing my thesis, I have to put an image in a new page, but it is always in the middle of the page, and I want it on the top. To insert the image I use
\begin{figure}[t]
\centering
\hspace*{-2.0cm} \includegraphics[scale=0.5] {img.png}
\caption{text}
\label{fig:text}
\end{figure}

using the graphicx package and book as \documentclass.

A: If there is nothing follow the figure envrionment, the figure will appear in the middle of the page. Just try:
\documentclass{article}
\begin{document}
\begin{figure}[t]
\centering
\rule{4cm}{2cm} % dummy figure
\caption{DUMMY FIGURE}
\label{fig:text}
\end{figure}
\null % \hbox{}
\end{document}