Skip to content

Commit d689c6c

Browse files
chengluyuchengluyu
authored
Merge pull request #1 from gossip-ink/feat/browser-page
feat: prototype the browser page
2 parents 357ceed + 4c1c999 commit d689c6c

11 files changed

+242
-17
lines changed

‎package.json

+3
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,9 @@
3737
"webpack-merge": "^5.7.3"
3838
},
3939
"dependencies": {
40+
"@fortawesome/fontawesome-svg-core": "^1.2.32",
41+
"@fortawesome/free-solid-svg-icons": "^5.15.1",
42+
"@fortawesome/react-fontawesome": "^0.1.14",
4043
"prop-types": "^15.7.2",
4144
"react": "^17.0.1",
4245
"react-dom": "^17.0.1",

‎src/components/Container.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import styled from "styled-components";
22

3-
const Container = styled.div.attrs({ className: "container" })``;
3+
const Container = styled.div.attrs({
4+
className: "w-screen h-screen grid grid-rows-holy-grail" as string,
5+
})``;
46

57
export default Container;

‎src/components/FileCard.tsx

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React from "react";
2+
import PropTypes from "prop-types";
3+
import { Link } from "react-router-dom";
4+
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
5+
6+
const FileCard: React.FC<FileCardProps> = ({}) => (
7+
<Link
8+
to="/editor"
9+
className="relative m-0 h-0 pt-full bg-gray-50 border border-gray-300 rounded shadow-md transition duration-150 hover:border-blue-400"
10+
>
11+
<footer className="absolute right-0 bottom-0 left-0 pt-4 pb-3 pl-4 pr-2 border-t border-gray-300">
12+
<div className="font-bold text-gray-900 overflow-ellipsis overflow-hidden">
13+
My first presentation
14+
</div>
15+
<div className="flex items-center">
16+
<span className="text-gray-600 text-sm">
17+
<FontAwesomeIcon className="mr-1" icon="calendar" fixedWidth />
18+
<span>last week</span>
19+
</span>
20+
<button className="w-8 h-8 ml-auto rounded-full transition duration-150 hover:bg-white hover:shadow">
21+
<FontAwesomeIcon className="" icon="ellipsis-h" fixedWidth />
22+
</button>
23+
</div>
24+
</footer>
25+
</Link>
26+
);
27+
28+
FileCard.propTypes = {};
29+
30+
export default FileCard;
31+
32+
export type FileCardProps = {};

‎src/components/Header.tsx

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React from "react";
2+
import PropTypes from "prop-types";
3+
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
4+
5+
const Header: React.FC<HeaderProps> = ({ className }) => (
6+
<header
7+
className={
8+
(className ? className + " " : "") +
9+
"px-6 w-full h-14 flex items-center bg-white border-b border-gray-200 shadow-sm"
10+
}
11+
>
12+
<div className="font-brand text-3xl text-gray-900 translate-y-4">Gossip</div>
13+
<form className="px-4 h-10 ml-auto flex items-center border border-gray-200 rounded-full shadow-sm">
14+
<input
15+
className="p-0 border-0"
16+
type="text"
17+
name="search"
18+
id="search"
19+
placeholder="Search"
20+
autoComplete="off"
21+
aria-label="search"
22+
/>
23+
<button className="ml-1" type="submit">
24+
<FontAwesomeIcon icon="search" fixedWidth />
25+
</button>
26+
</form>
27+
<button className="ml-4 w-10 h-10 text-lg rounded-full hover:bg-gray-100">
28+
<FontAwesomeIcon icon="bell" fixedWidth />
29+
</button>
30+
<button className="ml-4 w-10 h-10 text-lg rounded-full hover:bg-gray-100">
31+
<FontAwesomeIcon icon="user-circle" fixedWidth />
32+
</button>
33+
</header>
34+
);
35+
36+
Header.propTypes = { className: PropTypes.string };
37+
38+
export default Header;
39+
40+
export type HeaderProps = { className?: string };

‎src/components/Navigation.tsx

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import React from "react";
2+
import PropTypes from "prop-types";
3+
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
4+
5+
const Navigation: React.FC<NavigationProps> = ({ width }) => (
6+
<aside
7+
className="h-full flex flex-col bg-gray-50 border-r border-gray-200 shadow-sm"
8+
style={{ width: `${width}px` }}
9+
>
10+
<section className="p-2">
11+
<a className="block px-4 py-1 rounded-full cursor-pointer transition duration-150 hover:bg-white hover:shadow-sm">
12+
<FontAwesomeIcon className="mr-1" icon="inbox" fixedWidth />
13+
<span>Inbox</span>
14+
</a>
15+
<a className="block px-4 py-1 rounded-full cursor-pointer transition duration-150 hover:bg-white hover:shadow-sm">
16+
<FontAwesomeIcon className="mr-1" icon="users" fixedWidth />
17+
<span>Shared</span>
18+
</a>
19+
<a className="block px-4 py-1 rounded-full cursor-pointer transition duration-150 hover:bg-white hover:shadow-sm">
20+
<FontAwesomeIcon className="mr-1" icon="star" fixedWidth />
21+
<span>Starred</span>
22+
</a>
23+
<a className="block px-4 py-1 rounded-full cursor-pointer transition duration-150 hover:bg-white hover:shadow-sm">
24+
<FontAwesomeIcon className="mr-1" icon="trash-alt" fixedWidth />
25+
<span>Trash</span>
26+
</a>
27+
</section>
28+
<section className="p-2 border-t">
29+
<header className="mb-2 mx-2 text-gray-700 font-bold text-sm uppercase">
30+
Personal Workspace
31+
</header>
32+
<a className="block px-4 py-1 rounded-full cursor-pointer transition duration-150 hover:bg-white hover:shadow-sm">
33+
<FontAwesomeIcon className="mr-1" icon="folder" fixedWidth />
34+
<span>My First Folder</span>
35+
</a>
36+
</section>
37+
<section className="p-2 border-t">
38+
<header className="mb-2 mx-2 text-gray-700 font-bold text-sm uppercase">
39+
Team Workspaces
40+
</header>
41+
<a className="block px-4 py-1 rounded-full cursor-pointer transition duration-150 hover:bg-white hover:shadow-sm">
42+
<FontAwesomeIcon className="mr-1" icon="building" fixedWidth />
43+
<span>Gossip Inc</span>
44+
</a>
45+
<a className="block px-4 py-1 rounded-full cursor-pointer transition duration-150 hover:bg-white hover:shadow-sm">
46+
<FontAwesomeIcon className="mr-1" icon="building" fixedWidth />
47+
<span>Alibaba Group</span>
48+
</a>
49+
<a className="block px-4 py-1 rounded-full cursor-pointer transition duration-150 hover:bg-white hover:shadow-sm">
50+
<FontAwesomeIcon className="mr-1" icon="building" fixedWidth />
51+
<span>IDEAS Lab</span>
52+
</a>
53+
</section>
54+
</aside>
55+
);
56+
57+
Navigation.propTypes = {
58+
width: PropTypes.number.isRequired,
59+
};
60+
61+
export default Navigation;
62+
63+
export type NavigationProps = {
64+
width: number;
65+
};

‎src/helpers/icon.ts

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { library } from "@fortawesome/fontawesome-svg-core";
2+
import {
3+
faBell,
4+
faBuilding,
5+
faCalendar,
6+
faEllipsisH,
7+
faFolder,
8+
faInbox,
9+
faSearch,
10+
faStar,
11+
faTrashAlt,
12+
faUserCircle,
13+
faUsers,
14+
} from "@fortawesome/free-solid-svg-icons";
15+
16+
library.add(
17+
faSearch,
18+
faBell,
19+
faUserCircle,
20+
faInbox,
21+
faFolder,
22+
faUsers,
23+
faStar,
24+
faTrashAlt,
25+
faBuilding,
26+
faEllipsisH,
27+
faCalendar
28+
);

‎src/index.html

+6-1
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,13 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>Gossip</title>
7+
<link rel="preconnect" href="https://fonts.gstatic.com" />
8+
<link
9+
href="https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap"
10+
rel="stylesheet"
11+
/>
712
</head>
8-
<body>
13+
<body class="bg-gray-100">
914
<div id="app"></div>
1015
<noscript>This app requires JavaScript to be enabled.</noscript>
1116
</body>

‎src/index.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import "./helpers/icon";
12
import React from "react";
23
import ReactDOM from "react-dom";
34
import App from "./App";

‎src/pages/BrowserPage.tsx

+22-14
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,28 @@
1-
import React from "react";
2-
import { Link } from "react-router-dom";
1+
import React, { useState } from "react";
32
import Container from "../components/Container";
3+
import FileCard from "../components/FileCard";
4+
import Header from "../components/Header";
5+
import Navigation from "../components/Navigation";
46
// import PropTypes from "prop-types";
57

6-
const BrowserPage: React.FC<BrowserPageProps> = () => (
7-
<Container>
8-
<h1 className="text-lg">Gossip</h1>
9-
<p>
10-
Please head to the editor:{" "}
11-
<Link className="text-red-500" to="/editor">
12-
click me
13-
</Link>
14-
.
15-
</p>
16-
</Container>
17-
);
8+
const BrowserPage: React.FC<BrowserPageProps> = () => {
9+
const [navigationWidth, setNavigationWidth] = useState(240);
10+
return (
11+
<Container>
12+
<Header />
13+
<div className="flex">
14+
<Navigation width={navigationWidth} />
15+
<main className="h-full flex-1 overflow-y-auto">
16+
<div className="p-6 grid grid-cols-files grid-rows-files gap-4">
17+
<FileCard />
18+
<FileCard />
19+
<FileCard />
20+
</div>
21+
</main>
22+
</div>
23+
</Container>
24+
);
25+
};
1826

1927
BrowserPage.propTypes = {};
2028

‎tailwind.config.js

+16-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,22 @@ module.exports = {
44
purge: ["./src/**/*.html", "./src/**/*.tsx"],
55
darkMode: "media",
66
theme: {
7-
extend: {},
7+
extend: {
8+
fontFamily: {
9+
brand: ["'Luckiest Guy'", "cursive"],
10+
},
11+
gridTemplateColumns: {
12+
files: "repeat(auto-fill, minmax(16rem, 1fr))",
13+
},
14+
gridTemplateRows: {
15+
files: "1fr",
16+
"holy-grail": "3.5rem minmax(0, 1fr)",
17+
},
18+
padding: {
19+
full: "100%",
20+
"3/4": "75%",
21+
},
22+
},
823
},
924
variants: {
1025
extend: {},

‎yarn.lock

+26
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,32 @@
141141
resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
142142
integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
143143

144+
"@fortawesome/fontawesome-common-types@^0.2.32":
145+
version "0.2.32"
146+
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.32.tgz#3436795d5684f22742989bfa08f46f50f516f259"
147+
integrity sha512-ux2EDjKMpcdHBVLi/eWZynnPxs0BtFVXJkgHIxXRl+9ZFaHPvYamAfCzeeQFqHRjuJtX90wVnMRaMQAAlctz3w==
148+
149+
"@fortawesome/fontawesome-svg-core@^1.2.32":
150+
version "1.2.32"
151+
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.32.tgz#da092bfc7266aa274be8604de610d7115f9ba6cf"
152+
integrity sha512-XjqyeLCsR/c/usUpdWcOdVtWFVjPbDFBTQkn2fQRrWhhUoxriQohO2RWDxLyUM8XpD+Zzg5xwJ8gqTYGDLeGaQ==
153+
dependencies:
154+
"@fortawesome/fontawesome-common-types" "^0.2.32"
155+
156+
"@fortawesome/free-solid-svg-icons@^5.15.1":
157+
version "5.15.1"
158+
resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.1.tgz#e1432676ddd43108b41197fee9f86d910ad458ef"
159+
integrity sha512-EFMuKtzRMNbvjab/SvJBaOOpaqJfdSap/Nl6hst7CgrJxwfORR1drdTV6q1Ib/JVzq4xObdTDcT6sqTaXMqfdg==
160+
dependencies:
161+
"@fortawesome/fontawesome-common-types" "^0.2.32"
162+
163+
"@fortawesome/react-fontawesome@^0.1.14":
164+
version "0.1.14"
165+
resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.14.tgz#bf28875c3935b69ce2dc620e1060b217a47f64ca"
166+
integrity sha512-4wqNb0gRLVaBm/h+lGe8UfPPivcbuJ6ecI4hIgW0LjI7kzpYB9FkN0L9apbVzg+lsBdcTf0AlBtODjcSX5mmKA==
167+
dependencies:
168+
prop-types "^15.7.2"
169+
144170
"@fullhuman/postcss-purgecss@^3.0.0":
145171
version "3.1.3"
146172
resolved "https://registry.yarnpkg.com/@fullhuman/postcss-purgecss/-/postcss-purgecss-3.1.3.tgz#47af7b87c9bfb3de4bc94a38f875b928fffdf339"

0 commit comments

Comments
 (0)