Preact-Photon

by Jason Miller

HTML

<link rel="stylesheet" href="https://cdn.rawgit.com/connors/photon/v0.1.1-alpha/dist/css/photon.css">
<script src="https://wzrd.in/standalone/[email protected]"></script>
<script src="https://cdn.rawgit.com/developit/preact/1.5.1/preact.js"></script>

SCSS

/* demo purposes */
.window {
    position: fixed;
    left: 20px;
    top: 20px;
    right: 20px;
    bottom: 20px;
    overflow: hidden;
    box-shadow: 0 0 30px rgba(0,0,0,.1);
    border: 1px solid #bebebe;
    border-radius: 6px;
}

.sidebar {
    /*width: 150px;*/
    flex: 0;
}

Babel + JSX

/** @jsx h */
const { h, render } = preact;
const { Header, Title, Footer, Button, ButtonGroup, NavGroup, Table } = preactPhoton;


const FileList = ({ files }) => (
    <Table striped>
        <thead>
            <tr>
                <th>Name</th>
                <th>Kind</th>
                <th>Date Modified</th>
                <th>Author</th>
            </tr>
        </thead>
        <tbody>{
    		files.map( file => <FileListItem {...file} /> )
    	}</tbody>
    </Table>
);

const FileListItem = ({ name, type, date, author }) => (
    <tr>
        <td>{ name }</td>
        <td>{ type }</td>
        <td>{ date }</td>
        <td>{ author }</td>
    </tr>
);

const Sidebar = () => (
    <div class="pane pane-sm sidebar">
        <NavGroup>
            <NavGroup.Title>Places</NavGroup.Title>
            <NavGroup.Item icon="home">Home</NavGroup.Item>
            <NavGroup.Item icon="folder">Documents</NavGroup.Item>
            <NavGroup.Item icon="download">Downloads</NavGroup.Item>
            <NavGroup.Item icon="cloud">Desktop</NavGroup.Item>
        </NavGroup>
    </div>
);


let files = [
    { name:'index.html', type:'HTML', date:'Yesterday', author:'developit' },
    { name:'bundle.js', type:'JavaScript', date:'10:01 am', author:'developit' },
    { name:'photon.css', type:'CSS', date:'9:15 am', author:'connors' }
];

render((
    <div class="window">
        <Header>
            <Title>Preact-Photon Demo</Title>
    		<div class="toolbar-actions">
    			<ButtonGroup>
    				<Button icon="left" />
    				<Button icon="right" />
				</ButtonGroup>
	            <Button icon="home">Home</Button>
    		</div>
        </Header>

        <div class="window-content">
    		<div class="pane-group">
				<Sidebar />
    			<div class="pane">
					<FileList files={files} />
				</div>
			</div>
        </div>

        <Footer>
            <Title>
    			{ files.length.toLocaleString() + ' items' }
            </Title>
        </Footer>
    </div>
),...