deep-stack/snowballtools-base
3
0
Fork 0
forked from cerc-io/snowballtools-base
Code Pull Requests Actions Activity

Create layout for home page (#6)

Browse Source 
* Create layout for sidebar and projects page

* Refactor routes for dashboard

* Add navigation to sidebar elements

* Update README

* Remove space in class name

---------

Co-authored-by: neeraj <neeraj.rtly@gmail.com>
This commit is contained in:
Nabarun Gogoi 2023-12-11 20:05:34 +05:30 committed by GitHub
parent 4f0363e8e2
commit 4f6a523f56
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 175 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
README.md
View File

@ -1 +1,27 @@
# snowballtools
- Clone the `snowballtools` repo
```bash
git clone git@github.com:deep-stack/snowballtools.git
```
- In root of the repo, install depedencies
```bash
yarn
```
- Change directory to `packages/frontend`
```bash
cd packages/frontend
```
- Start the React application
```bash
yarn start
```
- The React application will be running in `http://localhost:3000/`

1
packages/frontend/package.json
View File

@ -12,6 +12,7 @@
"@types/react-dom": "^18.2.17",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.20.1",
"react-scripts": "5.0.1",
"typescript": "^4.9.5",
"web-vitals": "^2.1.4"

2
packages/frontend/public/index.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />

36
packages/frontend/src/App.tsx
View File

@ -1,29 +1,19 @@
import React from 'react';
import logo from './logo.svg';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Dashboard from './pages/dashboard';
import { dashboardRoutes } from './pages/dashboard/routes';
const router = createBrowserRouter([
{
path: '/',
element: <Dashboard />,
children: dashboardRoutes,
},
]);
function App() {
return (
<div className="text-center">
<header className="bg-gray-900 min-h-screen flex flex-col items-center justify-center text-white text-2xl">
<img
src={logo}
className="animate-spin pointer-events-none h-96"
alt="logo"
/>
<p>
Edit <code>src/App.tsx</code> and save to reload.
</p>
<a
className="text-blue-400"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
return <RouterProvider router={router} />;
}
export default App;

37
packages/frontend/src/components/dashboard/Sidebar.tsx Normal file
View File

@ -0,0 +1,37 @@
import React from 'react';
import { NavLink } from 'react-router-dom';
const Sidebar = () => {
return (
<div className="flex flex-col h-full p-4">
<div className="basis-1/2 flex flex-col justify-start gap-4">
<div>
<h3 className="text-black text-2xl">Snowball</h3>
</div>
<div>Organization</div>
<div>
<NavLink
to="/"
className={({ isActive }) => (isActive ? 'text-blue-500' : '')}
>
Projects
</NavLink>
</div>
<div>
<NavLink
to="/settings"
className={({ isActive }) => (isActive ? 'text-blue-500' : '')}
>
Settings
</NavLink>
</div>
</div>
<div className="basis-1/2 flex flex-col justify-end gap-4">
<div>Documentation</div>
<div>Support</div>
</div>
</div>
);
};
export default Sidebar;

9
packages/frontend/src/pages/dashboard/CreateProject.tsx Normal file
View File

@ -0,0 +1,9 @@
import React from 'react';
const CreateProject = () => {
return (
<div className="bg-white rounded-3xl h-full">Create new project page</div>
);
};
export default CreateProject;

10
packages/frontend/src/pages/dashboard/Project.tsx Normal file
View File

@ -0,0 +1,10 @@
import React from 'react';
import { useParams } from 'react-router-dom';
const Project = () => {
const { id } = useParams();
return <div className="bg-white rounded-3xl h-full">Project page: {id}</div>;
};
export default Project;

7
packages/frontend/src/pages/dashboard/Projects.tsx Normal file
View File

@ -0,0 +1,7 @@
import React from 'react';
const Projects = () => {
return <div className="bg-white rounded-3xl h-full">Projects</div>;
};
export default Projects;

7
packages/frontend/src/pages/dashboard/Settings.tsx Normal file
View File

@ -0,0 +1,7 @@
import React from 'react';
const Settings = () => {
return <div className="bg-white rounded-3xl h-full">Settings page</div>;
};
export default Settings;

19
packages/frontend/src/pages/dashboard/index.tsx Normal file
View File

@ -0,0 +1,19 @@
import React from 'react';
import { Outlet } from 'react-router-dom';
import Sidebar from '../../components/dashboard/Sidebar';
const Dashboard = () => {
return (
<div className="grid grid-cols-5 h-screen bg-sky-100">
<div className="h-screen">
<Sidebar />
</div>
<div className="col-span-4 h-screen p-3">
<Outlet />
</div>
</div>
);
};
export default Dashboard;

25
packages/frontend/src/pages/dashboard/routes.tsx Normal file
View File

@ -0,0 +1,25 @@
import React from 'react';
import Projects from './Projects';
import Project from './Project';
import Settings from './Settings';
import CreateProject from './CreateProject';
export const dashboardRoutes = [
{
path: '/',
element: <Projects />,
},
{
path: 'settings',
element: <Settings />,
},
{
path: ':id',
element: <Project />,
},
{
path: 'create',
element: <CreateProject />,
},
];

20
yarn.lock
View File

@ -2014,6 +2014,11 @@
schema-utils "^3.0.0"
source-map "^0.7.3"
"@remix-run/router@1.13.1":
version "1.13.1"
resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.13.1.tgz#07e2a8006f23a3bc898b3f317e0a58cc8076b86e"
integrity sha512-so+DHzZKsoOcoXrILB4rqDkMDy7NLMErRdOxvzvOKb507YINKUP4Di+shbTZDhSE/pBZ+vr7XGIpcOO0VLSA+Q==
"@rollup/plugin-babel@^5.2.0":
version "5.3.1"
resolved "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz"
@ -10140,6 +10145,21 @@ react-refresh@^0.11.0:
resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz"
integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
react-router-dom@^6.20.1:
version "6.20.1"
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.20.1.tgz#e34f8075b9304221420de3609e072bb349824984"
integrity sha512-npzfPWcxfQN35psS7rJgi/EW0Gx6EsNjfdJSAk73U/HqMEJZ2k/8puxfwHFgDQhBGmS3+sjnGbMdMSV45axPQw==
dependencies:
"@remix-run/router" "1.13.1"
react-router "6.20.1"
react-router@6.20.1:
version "6.20.1"
resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.20.1.tgz#e8cc326031d235aaeec405bb234af77cf0fe75ef"
integrity sha512-ccvLrB4QeT5DlaxSFFYi/KR8UMQ4fcD8zBcR71Zp1kaYTC5oJKYAp1cbavzGrogwxca+ubjkd7XjFZKBW8CxPA==
dependencies:
"@remix-run/router" "1.13.1"
react-scripts@5.0.1:
version "5.0.1"
resolved "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz"