cerc-io/snowballtools-base
16
0
Fork 2
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

Implement page for creating new project (#8)

Browse Source 
* Implement basic layout to create new project

* Use dummy datas to populate the cards

* Format repository updated time using luxon

* Move repository list to components folder

---------

Co-authored-by: neeraj <neeraj.rtly@gmail.com>
This commit is contained in:
Nabarun Gogoi 2023-12-13 13:55:25 +05:30 committed by GitHub
parent c6c3ab03c3
commit 4b5949cd81
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 169 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/frontend/package.json
View File

@ -16,7 +16,8 @@
"react-router-dom": "^6.20.1", "react-router-dom": "^6.20.1",
"react-scripts": "5.0.1", "react-scripts": "5.0.1",
"typescript": "^4.9.5", "typescript": "^4.9.5",
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4",
"luxon": "^3.4.4"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "react-scripts start",
@ -46,6 +47,7 @@
] ]
}, },
"devDependencies": { "devDependencies": {
"@types/luxon": "^3.3.7",
"@typescript-eslint/eslint-plugin": "^6.13.2", "@typescript-eslint/eslint-plugin": "^6.13.2",
"@typescript-eslint/parser": "^6.13.2", "@typescript-eslint/parser": "^6.13.2",
"eslint": "^8.55.0", "eslint": "^8.55.0",

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

@ -24,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>React App</title> <title>Snowball</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>

26
packages/frontend/src/assets/repository.json Normal file
View File

@ -0,0 +1,26 @@
[
{
"title": "Project-101",
"updatedTime": "2023-05-15T08:30:00"
},
{
"title": "Project-102",
"updatedTime": "2023-05-15T08:30:00"
},
{
"title": "Project-103",
"updatedTime": "2023-12-11T04:20:00"
},
{
"title": "Project-104",
"updatedTime": "2023-12-11T04:27:00"
},
{
"title": "Project-105",
"updatedTime": "2023-12-11T04:41:00"
},
{
"title": "Project-106",
"updatedTime": "2023-12-11T04:32:00"
}
]

22
packages/frontend/src/assets/template.json Normal file
View File

@ -0,0 +1,22 @@
[
{
"framework": "React",
"icon": "^"
},
{
"framework": "Reactnative",
"icon": "^"
},
{
"framework": "Kotlin",
"icon": "^"
},
{
"framework": "Swift",
"icon": "^"
},
{
"framework": "Webapp",
"icon": "^"
}
]

24
packages/frontend/src/components/ProjectRepoCard.tsx Normal file
View File

@ -0,0 +1,24 @@
import React from 'react';
import { DateTime } from 'luxon';
interface RepositoryDetails {
title: string;
updatedTime: string;
}
interface ProjectRepoCardProps {
repository: RepositoryDetails;
}
const ProjectRepoCard: React.FC<ProjectRepoCardProps> = ({ repository }) => {
return (
<div className="flex text-gray-500 text-xs bg-gray-100 m-2">
<div>^</div>
<div className="grow">
<p>{repository.title}</p>
<p>{DateTime.fromISO(repository.updatedTime).toRelative()}</p>
</div>
</div>
);
};
export default ProjectRepoCard;

29
packages/frontend/src/components/RepositoryList.tsx Normal file
View File

@ -0,0 +1,29 @@
import React from 'react';
import SearchBar from './SearchBar';
import ProjectRepoCard from './ProjectRepoCard';
import repositoryDetails from '../assets/repository.json';
const RepositoryList = () => {
return (
<div className="p-4">
<div className="flex">
<div className="basis-1/3">
<input
type="text"
placeholder="All accounts"
className="text-gray-700 text-xs w-full border-none focus:outline-none"
/>
</div>
<div className="basis-2/3">
<SearchBar handler={() => {}} placeholder="Search for repositorry" />
</div>
</div>
{repositoryDetails.map((repo, key) => {
return <ProjectRepoCard repository={repo} key={key} />;
})}
</div>
);
};
export default RepositoryList;

20
packages/frontend/src/components/TemplateCard.tsx Normal file
View File

@ -0,0 +1,20 @@
import React from 'react';
interface TemplateDetails {
framework: string;
icon: string;
}
interface TemplateCardProps {
framework: TemplateDetails;
}
const TemplateCard: React.FC<TemplateCardProps> = ({ framework }) => {
return (
<div className="bg-gray-200 text-gray-500 text-xs border-gray-200 rounded-lg shadow p-4">
{framework.icon}
{framework.framework}
</div>
);
};
export default TemplateCard;

9
packages/frontend/src/pages/Projects.tsx
View File

@ -1,4 +1,5 @@
import React from 'react'; import React from 'react';
import { Link } from 'react-router-dom';
import SearchBar from '../components/SearchBar'; import SearchBar from '../components/SearchBar';
import Card from '../components/Card'; import Card from '../components/Card';
@ -21,9 +22,11 @@ const Projects = () => {
</div> </div>
<div> <div>
{/* TODO: Create button component */} {/* TODO: Create button component */}
<button className="bg-sky-600 text-white text-sm px-4 py-2 border rounded-full"> <Link to="/projects/create">
Create project <button className="bg-sky-600 text-white text-sm px-4 py-2 border rounded-full">
</button> Create project
</button>
</Link>
</div> </div>
</div> </div>
<div className="grid grid-cols-3 gap-5 p-5"> <div className="grid grid-cols-3 gap-5 p-5">

29
packages/frontend/src/pages/projects/CreateProject.tsx
View File

@ -1,8 +1,35 @@
import React from 'react'; import React from 'react';
import { Link } from 'react-router-dom';
import templateDetails from '../../assets/template.json';
import TemplateCard from '../../components/TemplateCard';
import RepositoryList from '../../components/RepositoryList';
const CreateProject = () => { const CreateProject = () => {
return ( return (
<div className="bg-white rounded-3xl h-full">Create new project page</div> <div className="bg-white rounded-3xl h-full">
<div className="flex p-2">
<div className="grow p-4">
<h3 className="text-gray-750 text-2xl">Create new project</h3>
</div>
<div className="p-4">
<Link to="/">
<button className="bg-slate-300 text-gray-700 text-sm px-4 py-2 border rounded-full">
X
</button>
</Link>
</div>
</div>
<hr className="h-px bg-slate-200 border-0" />
<h5 className="mt-4 ml-4">Start with template</h5>
<div className="grid grid-cols-3 p-4 gap-4">
{templateDetails.map((framework, key) => {
return <TemplateCard framework={framework} key={key} />;
})}
</div>
<h5 className="mt-4 ml-4">Import a repository</h5>
<RepositoryList />
</div>
); );
}; };

10
yarn.lock
View File

@ -2475,6 +2475,11 @@
resolved "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz" resolved "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz"
integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ== integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
"@types/luxon@^3.3.7":
version "3.3.7"
resolved "https://registry.yarnpkg.com/@types/luxon/-/luxon-3.3.7.tgz#043d413b6492a012de47503907bdf3ec4f827933"
integrity sha512-gKc9P2d4g5uYwmy4s/MO/yOVPmvHyvzka1YH6i5dM03UrFofHSmgc0D0ymbDRStFWHusk6cwwF6nhLm/ckBbbQ==
"@types/mime@*", "@types/mime@^1": "@types/mime@*", "@types/mime@^1":
version "1.3.5" version "1.3.5"
resolved "https://registry.npmjs.org/@types/mime/-/mime-1.3.5.tgz" resolved "https://registry.npmjs.org/@types/mime/-/mime-1.3.5.tgz"
@ -8070,6 +8075,11 @@ lru-cache@^7.4.4, lru-cache@^7.5.1, lru-cache@^7.7.1:
resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.1.0.tgz#2098d41c2dc56500e6c88584aa656c84de7d0484" resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.1.0.tgz#2098d41c2dc56500e6c88584aa656c84de7d0484"
integrity sha512-/1clY/ui8CzjKFyjdvwPWJUYKiFVXG2I2cY0ssG7h4+hwk+XOIX7ZSG9Q7TW8TW3Kp3BUSqgFWBLgL4PJ+Blag== integrity sha512-/1clY/ui8CzjKFyjdvwPWJUYKiFVXG2I2cY0ssG7h4+hwk+XOIX7ZSG9Q7TW8TW3Kp3BUSqgFWBLgL4PJ+Blag==
luxon@^3.4.4:
version "3.4.4"
resolved "https://registry.yarnpkg.com/luxon/-/luxon-3.4.4.tgz#cf20dc27dc532ba41a169c43fdcc0063601577af"
integrity sha512-zobTr7akeGHnv7eBOXcRgMeCP6+uyYsczwmeRCauvpvaAltgNyTbLH/+VaEAPUeWBT+1GuNmz4wC/6jtQzbbVA==
lz-string@^1.5.0: lz-string@^1.5.0:
version "1.5.0" version "1.5.0"
resolved "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz" resolved "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz"