mirror of
https://github.com/snowball-tools/snowballtools-base
synced 2024-11-17 20:19:18 +00:00
Implement page for creating new project (#8)
* 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:
GitHub
parent
c6c3ab03c3
commit
4b5949cd81
@ -16,7 +16,8 @@
|
||||
"react-router-dom": "^6.20.1",
|
||||
"react-scripts": "5.0.1",
|
||||
"typescript": "^4.9.5",
|
||||
"web-vitals": "^2.1.4"
|
||||
"web-vitals": "^2.1.4",
|
||||
"luxon": "^3.4.4"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
@ -46,6 +47,7 @@
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/luxon": "^3.3.7",
|
||||
"@typescript-eslint/eslint-plugin": "^6.13.2",
|
||||
"@typescript-eslint/parser": "^6.13.2",
|
||||
"eslint": "^8.55.0",
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
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`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
<title>Snowball</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
|
||||
26
packages/frontend/src/assets/repository.json
Normal file
26
packages/frontend/src/assets/repository.json
Normal 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
22
packages/frontend/src/assets/template.json
Normal 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
24
packages/frontend/src/components/ProjectRepoCard.tsx
Normal 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
29
packages/frontend/src/components/RepositoryList.tsx
Normal 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
20
packages/frontend/src/components/TemplateCard.tsx
Normal 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;
|
||||
@ -1,4 +1,5 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import SearchBar from '../components/SearchBar';
|
||||
import Card from '../components/Card';
|
||||
@ -21,9 +22,11 @@ const Projects = () => {
|
||||
</div>
|
||||
<div>
|
||||
{/* TODO: Create button component */}
|
||||
<button className="bg-sky-600 text-white text-sm px-4 py-2 border rounded-full">
|
||||
Create project
|
||||
</button>
|
||||
<Link to="/projects/create">
|
||||
<button className="bg-sky-600 text-white text-sm px-4 py-2 border rounded-full">
|
||||
Create project
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-5 p-5">
|
||||
|
||||
@ -1,8 +1,35 @@
|
||||
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 = () => {
|
||||
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
10
yarn.lock
@ -2475,6 +2475,11 @@
|
||||
resolved "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz"
|
||||
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":
|
||||
version "1.3.5"
|
||||
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"
|
||||
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:
|
||||
version "1.5.0"
|
||||
resolved "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user