Skip to content

Commit 1592c20

Browse files
yash-thakuryash-thakur
authored
Merge pull request #1 from zeel123/master
Implement semantic-ui with pawjs
2 parents 577db2c + fddb842 commit 1592c20

File tree

8 files changed

+11963
-6
lines changed

8 files changed

+11963
-6
lines changed

‎package-lock.json‎

Lines changed: 11736 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
{
2-
"name": "example-pawjs-tailwind",
2+
"name": "example-pawjs-semantic-ui",
33
"version": "1.0.0",
4-
"description": "Example on using Tailwind CSS with PawJS",
4+
"description": "Example on using Semantic-UI with PawJS",
55
"scripts": {
66
"start": "pawjs --env=development start",
77
"build": "pawjs --env=production --config=prod.pawconfig.json build"
88
},
99
"repository": {
1010
"type": "git",
11-
"url": "git+https://github.com/Atyantik/example-pawjs-tailwind.git"
11+
"url": "git+https://github.com/Atyantik/example-pawjs-semantic-ui.git"
1212
},
1313
"author": {
1414
"name": "Atyantik Technologies",
@@ -28,11 +28,15 @@
2828
}
2929
],
3030
"devDependencies": {
31-
"@pawjs/pawjs": "^2.1.10"
31+
"@pawjs/pawjs": "^2.2.3"
3232
},
3333
"license": "MIT",
3434
"bugs": {
35-
"url": "https://github.com/Atyantik/example-pawjs-tailwind/issues"
35+
"url": "https://github.com/Atyantik/example-pawjs-semantic-ui/issues"
3636
},
37-
"homepage": "https://github.com/Atyantik/example-pawjs-tailwind#readme"
37+
"homepage": "https://github.com/Atyantik/example-pawjs-semantic-ui#readme",
38+
"dependencies": {
39+
"semantic-ui-css": "^2.4.1",
40+
"semantic-ui-react": "^0.82.5"
41+
}
3842
}

‎src/app/components/home.js‎

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
import { Link } from "react-router-dom";
2+
import React from "react";
3+
import {
4+
Button,
5+
Container,
6+
Divider,
7+
Grid,
8+
Header,
9+
Icon,
10+
Image,
11+
List,
12+
Segment,
13+
} from "semantic-ui-react";
14+
15+
16+
const Home = () => (
17+
<div>
18+
<Segment
19+
inverted
20+
textAlign="center"
21+
style={{ minHeight: 700, padding: "1em 0em" }}
22+
vertical
23+
>
24+
<Container text>
25+
<Header
26+
as="h1"
27+
content="Imagine-a-Company"
28+
inverted
29+
style={{
30+
fontSize: "4em",
31+
fontWeight: "normal",
32+
marginBottom: 0,
33+
marginTop: "3em",
34+
}}
35+
/>
36+
<Header
37+
as="h2"
38+
content="Do whatever you want when you want to."
39+
inverted
40+
style={{
41+
fontSize: "1.7em",
42+
fontWeight: "normal",
43+
marginTop: "1.5em",
44+
}}
45+
/>
46+
<Button className="ui animated fade button primary huge" to="/reducer">
47+
<div className="visible content">
48+
Call to action
49+
</div>
50+
<div className="hidden content">
51+
Click here
52+
<Icon name="right arrow" />
53+
</div>
54+
</Button>
55+
</Container>
56+
</Segment>
57+
<Segment style={{ padding: "8em 0em" }} vertical>
58+
<Grid container stackable verticalAlign="middle">
59+
<Grid.Row>
60+
<Grid.Column width={8}>
61+
<Header as="h3" style={{ fontSize: "2em" }}>
62+
We Help Companies and Companions
63+
</Header>
64+
<p style={{ fontSize: "1.33em" }}>
65+
We can give your company superpowers to do things that they never
66+
thought possible. Let us delight your customers and empower your
67+
needs... through pure data analytics.
68+
</p>
69+
<Header as="h3" style={{ fontSize: "2em" }}>
70+
We Make Bananas That Can Dance
71+
</Header>
72+
<p style={{ fontSize: "1.33em" }}>
73+
{`Yes that's right, you thought it was the stuff of dreams, but even bananas can be
74+
bioengineered.`}
75+
</p>
76+
</Grid.Column>
77+
<Grid.Column floated="right" width={6}>
78+
<Image bordered rounded size="large" src="http://react.semantic-ui.com/images/wireframe/white-image.png" />
79+
</Grid.Column>
80+
</Grid.Row>
81+
<Grid.Row>
82+
<Grid.Column textAlign="center">
83+
<Button size="huge">Check Them Out</Button>
84+
</Grid.Column>
85+
</Grid.Row>
86+
</Grid>
87+
</Segment>
88+
<Segment style={{ padding: "0em" }} vertical>
89+
<Grid celled="internally" columns="equal" stackable>
90+
<Grid.Row textAlign="center">
91+
<Grid.Column style={{ paddingBottom: "5em", paddingTop: "5em" }}>
92+
<Header as="h3" style={{ fontSize: "2em" }}>
93+
{"What a Company"}
94+
</Header>
95+
<p style={{ fontSize: "1.33em" }}>That is what they all say about us</p>
96+
</Grid.Column>
97+
<Grid.Column style={{ paddingBottom: "5em", paddingTop: "5em" }}>
98+
<Header as="h3" style={{ fontSize: "2em" }}>
99+
{"I shouldn't have gone with their competitor."}
100+
</Header>
101+
<p style={{ fontSize: "1.33em" }}>
102+
<Image avatar src="http://react.semantic-ui.com/images/avatar/large/nan.jpg" />
103+
<b>Nan</b>
104+
Chief Fun Officer Acme Toys
105+
</p>
106+
</Grid.Column>
107+
</Grid.Row>
108+
</Grid>
109+
</Segment>
110+
<Segment style={{ padding: "8em 0em" }} vertical>
111+
<Container text>
112+
<Header as="h3" style={{ fontSize: "2em" }}>
113+
Breaking The Grid, Grabs Your Attention
114+
</Header>
115+
<p style={{ fontSize: "1.33em" }}>
116+
Instead of focusing on content creation and hard work,
117+
we have learned how to master the art of doing nothing by providing
118+
massive amounts of whitespace and generic content that
119+
can seem massive, monolithic and worth your attention.
120+
</p>
121+
<Button as="a" size="large">
122+
Read More
123+
</Button>
124+
<Divider
125+
as="h4"
126+
className="header"
127+
horizontal
128+
style={{ margin: "3em 0em", textTransform: "uppercase" }}
129+
>
130+
<Link to="/">Case Studies</Link>
131+
</Divider>
132+
<Header as="h3" style={{ fontSize: "2em" }}>
133+
Did We Tell You About Our Bananas?
134+
</Header>
135+
<p style={{ fontSize: "1.33em" }}>
136+
{`Yes I know you probably disregarded the earlier boasts as non-sequitur filler content,
137+
but it's really true. It took years of gene splicing and combinatory DNA research,
138+
but our bananas can really dance.`}
139+
</p>
140+
<Button as="a" size="large">
141+
{"I'm Still Quite Interested"}
142+
</Button>
143+
</Container>
144+
</Segment>
145+
<Segment inverted vertical style={{ padding: "5em 0em" }}>
146+
<Container>
147+
<Grid divided inverted stackable>
148+
<Grid.Row>
149+
<Grid.Column width={3}>
150+
<Header inverted as="h4" content="About" />
151+
<List link inverted>
152+
<List.Item as="a">Sitemap</List.Item>
153+
<List.Item as="a">Contact Us</List.Item>
154+
<List.Item as="a">Religious Ceremonies</List.Item>
155+
<List.Item as="a">Gazebo Plans</List.Item>
156+
</List>
157+
</Grid.Column>
158+
<Grid.Column width={3}>
159+
<Header inverted as="h4" content="Services" />
160+
<List link inverted>
161+
<List.Item as="a">Banana Pre-Order</List.Item>
162+
<List.Item as="a">DNA FAQ</List.Item>
163+
<List.Item as="a">How To Access</List.Item>
164+
<List.Item as="a">Favorite X-Men</List.Item>
165+
</List>
166+
</Grid.Column>
167+
<Grid.Column width={7}>
168+
<Header as="h4" inverted>
169+
Footer Header
170+
</Header>
171+
<p>
172+
Extra space for a call to action inside the footer that could help
173+
re-engage users.
174+
</p>
175+
</Grid.Column>
176+
</Grid.Row>
177+
</Grid>
178+
</Container>
179+
</Segment>
180+
</div>
181+
);
182+
183+
export default Home;

‎src/client.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import "semantic-ui-css/semantic.css";
2+
3+
export default class Client {}

‎src/pages/home.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import Home from "../app/components/home";
2+
export default [
3+
{
4+
path: "/",
5+
exact: true,
6+
component: Home,
7+
seo: {
8+
title: "Semantic-UI React Demo",
9+
name: "Semantic-UI React Demo | Yash Thakur",
10+
description: "An implementation of Semantic-UI with Pawjs Demo version.",
11+
type: "article",
12+
url: "http://yashthakur.in/",
13+
site_name: "PawJS Semantic-UI",
14+
image: "http://react.semantic-ui.com/images/wireframe/white-image.png",
15+
},
16+
},
17+
];

‎src/routes.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import HomeRoute from "./pages/home";
2+
export default class Routes {
3+
apply(routeHandler) {
4+
const routes = [
5+
...HomeRoute,
6+
];
7+
8+
routeHandler.hooks.initRoutes.tapPromise("AppRoutes", async () => {
9+
routeHandler.addRoutes(routes);
10+
});
11+
}
12+
}

‎src/server.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export default class Server {}

‎src/webpack.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export default class ProjectWebpack {}

0 commit comments

Comments
 (0)