Replaced react starter app
This commit is contained in:
Prozilla
parent
e1111886f6
commit
6f8b991120
13 changed files with 306 additions and 133 deletions
48
package-lock.json
generated
48
package-lock.json
generated
|
|
@ -8,6 +8,9 @@
|
|||
"name": "prozilla-os",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "^6.4.0",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.4.0",
|
||||
"@fortawesome/react-fontawesome": "^0.2.0",
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
|
|
@ -2377,6 +2380,51 @@
|
|||
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@fortawesome/fontawesome-common-types": {
|
||||
"version": "6.4.0",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.0.tgz",
|
||||
"integrity": "sha512-HNii132xfomg5QVZw0HwXXpN22s7VBHQBv9CeOu9tfJnhsWQNd2lmTNi8CSrnw5B+5YOmzu1UoPAyxaXsJ6RgQ==",
|
||||
"hasInstallScript": true,
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/@fortawesome/fontawesome-svg-core": {
|
||||
"version": "6.4.0",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.0.tgz",
|
||||
"integrity": "sha512-Bertv8xOiVELz5raB2FlXDPKt+m94MQ3JgDfsVbrqNpLU9+UE2E18GKjLKw+d3XbeYPqg1pzyQKGsrzbw+pPaw==",
|
||||
"hasInstallScript": true,
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-common-types": "6.4.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/@fortawesome/free-solid-svg-icons": {
|
||||
"version": "6.4.0",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.0.tgz",
|
||||
"integrity": "sha512-kutPeRGWm8V5dltFP1zGjQOEAzaLZj4StdQhWVZnfGFCvAPVvHh8qk5bRrU4KXnRRRNni5tKQI9PBAdI6MP8nQ==",
|
||||
"hasInstallScript": true,
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-common-types": "6.4.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/@fortawesome/react-fontawesome": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz",
|
||||
"integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==",
|
||||
"dependencies": {
|
||||
"prop-types": "^15.8.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "~1 || ~6",
|
||||
"react": ">=16.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@humanwhocodes/config-array": {
|
||||
"version": "0.11.10",
|
||||
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz",
|
||||
|
|
|
|||
|
|
@ -3,6 +3,9 @@
|
|||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "^6.4.0",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.4.0",
|
||||
"@fortawesome/react-fontawesome": "^0.2.0",
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
content="ProzillaOS"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!--
|
||||
|
|
@ -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>ProzillaOS</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"short_name": "React App",
|
||||
"name": "Create React App Sample",
|
||||
"short_name": "ProzillaOS",
|
||||
"name": "ProzillaOS",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
|
|
|
|||
BIN
public/media/wallpaper.webp
Normal file
BIN
public/media/wallpaper.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
|
|
@ -1,5 +1,9 @@
|
|||
.App {
|
||||
background-image: url("/public/media/wallpaper.webp");
|
||||
background-size: cover;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.App-logo {
|
||||
|
|
@ -14,7 +18,6 @@
|
|||
}
|
||||
|
||||
.App-header {
|
||||
background-color: #282c34;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
19
src/App.js
19
src/App.js
|
|
@ -1,23 +1,10 @@
|
|||
import logo from './logo.svg';
|
||||
import './App.css';
|
||||
import "./App.css";
|
||||
import { TaskBar } from "./components/TaskBar.js";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className="App">
|
||||
<header className="App-header">
|
||||
<img src={logo} className="App-logo" alt="logo" />
|
||||
<p>
|
||||
Edit <code>src/App.js</code> and save to reload.
|
||||
</p>
|
||||
<a
|
||||
className="App-link"
|
||||
href="https://reactjs.org"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Learn React
|
||||
</a>
|
||||
</header>
|
||||
<TaskBar/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { render, screen } from '@testing-library/react';
|
||||
import App from './App';
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import App from "./App";
|
||||
|
||||
test('renders learn react link', () => {
|
||||
test("renders learn react link", () => {
|
||||
render(<App />);
|
||||
const linkElement = screen.getByText(/learn react/i);
|
||||
expect(linkElement).toBeInTheDocument();
|
||||
|
|
|
|||
61
src/components/TaskBar.css
Normal file
61
src/components/TaskBar.css
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
.Task-bar {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: rgba(0, 0, 0, 75%);
|
||||
}
|
||||
|
||||
button {
|
||||
color: white;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: rgba(255, 255, 255, 5%);
|
||||
}
|
||||
|
||||
.Program-icons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.Program-icons > * {
|
||||
height: 100%;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.Program-icons > * > svg {
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.Util-icons {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.Util-icons > * {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.Util-icons > * > svg {
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
#desktop-button {
|
||||
border-left: 1px solid rgba(255, 255, 255, 50%);
|
||||
height: 100%;
|
||||
width: 0.5rem;
|
||||
padding: 0;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
66
src/components/TaskBar.js
Normal file
66
src/components/TaskBar.js
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
import { useEffect, useState } from "react";
|
||||
import "./TaskBar.css";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faBatteryFull, faCamera, faCode, faFolder, faGlobe, faSearch, faTerminal, faVolumeHigh, faWifi } from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
export function TaskBar() {
|
||||
const [date, setDate] = useState(new Date());
|
||||
|
||||
useEffect(() => {
|
||||
setInterval(() => {
|
||||
setDate(new Date());
|
||||
}, 30000);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="Task-bar">
|
||||
<div className="Program-icons">
|
||||
<button>
|
||||
<FontAwesomeIcon icon={faSearch}/>
|
||||
</button>
|
||||
<button>
|
||||
<FontAwesomeIcon icon={faFolder}/>
|
||||
</button>
|
||||
<button>
|
||||
<FontAwesomeIcon icon={faTerminal}/>
|
||||
</button>
|
||||
<button>
|
||||
<FontAwesomeIcon icon={faCode}/>
|
||||
</button>
|
||||
<button>
|
||||
<FontAwesomeIcon icon={faCamera}/>
|
||||
</button>
|
||||
<button>
|
||||
<FontAwesomeIcon icon={faGlobe}/>
|
||||
</button>
|
||||
</div>
|
||||
<div className="Util-icons">
|
||||
<button>
|
||||
<FontAwesomeIcon icon={faBatteryFull}/>
|
||||
</button>
|
||||
<button>
|
||||
<FontAwesomeIcon icon={faWifi}/>
|
||||
</button>
|
||||
<button>
|
||||
<FontAwesomeIcon icon={faVolumeHigh}/>
|
||||
</button>
|
||||
<button>
|
||||
{date.toLocaleString("en-US", {
|
||||
hour: "numeric",
|
||||
minute: "numeric",
|
||||
hour12: false,
|
||||
})}
|
||||
<br/>
|
||||
{date.toLocaleDateString("en-GB", {
|
||||
day: "numeric",
|
||||
month: "short",
|
||||
year: "numeric",
|
||||
})}
|
||||
</button>
|
||||
<button id="desktop-button">
|
||||
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -11,3 +11,8 @@ code {
|
|||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
}
|
||||
|
||||
html, body, #root {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
12
src/index.js
12
src/index.js
|
|
@ -1,10 +1,10 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
import reportWebVitals from './reportWebVitals';
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import "./index.css";
|
||||
import App from "./App";
|
||||
import reportWebVitals from "./reportWebVitals";
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
const root = ReactDOM.createRoot(document.getElementById("root"));
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
const reportWebVitals = onPerfEntry => {
|
||||
if (onPerfEntry && onPerfEntry instanceof Function) {
|
||||
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
|
||||
import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
|
||||
getCLS(onPerfEntry);
|
||||
getFID(onPerfEntry);
|
||||
getFCP(onPerfEntry);
|
||||
|
|
|
|||
Loading…
Reference in a new issue