home page is done
This commit is contained in:
Nikolai Petukhov
parent
2ce5bb8d7a
commit
93ed4ce7fc
18
images/chat.svg
Normal file
18
images/chat.svg
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||||
|
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
viewBox="0 0 58 58" xml:space="preserve">
|
||||||
|
<g>
|
||||||
|
<path style="fill:#FFA500FF;" d="M25,9.586C11.193,9.586,0,19.621,0,32c0,4.562,1.524,8.803,4.135,12.343
|
||||||
|
C3.792,48.433,2.805,54.194,0,57c0,0,8.47-1.191,14.273-4.651c0.006-0.004,0.009-0.01,0.014-0.013
|
||||||
|
c1.794-1.106,3.809-2.397,4.302-2.783c0.301-0.417,0.879-0.543,1.328-0.271c0.298,0.181,0.487,0.512,0.488,0.86
|
||||||
|
c0.003,0.582-0.008,0.744-3.651,3.018c2.582,0.81,5.355,1.254,8.245,1.254c13.807,0,25-10.035,25-22.414S38.807,9.586,25,9.586z"/>
|
||||||
|
<path style="fill:#EF9400FF;" d="M58,23.414C58,11.035,46.807,1,33,1c-9.97,0-18.575,5.234-22.589,12.804
|
||||||
|
C14.518,11.153,19.553,9.586,25,9.586c13.807,0,25,10.035,25,22.414c0,4.735-1.642,9.124-4.437,12.743
|
||||||
|
C51.162,47.448,58,48.414,58,48.414c-2.805-2.805-3.792-8.566-4.135-12.657C56.476,32.217,58,27.976,58,23.414z"/>
|
||||||
|
<path style="fill:#FFFFFF;" d="M32.5,26h-14c-0.552,0-1-0.447-1-1s0.448-1,1-1h14c0.552,0,1,0.447,1,1S33.052,26,32.5,26z"/>
|
||||||
|
<path style="fill:#FFFFFF;" d="M38,33H13c-0.552,0-1-0.447-1-1s0.448-1,1-1h25c0.552,0,1,0.447,1,1S38.552,33,38,33z"/>
|
||||||
|
<path style="fill:#FFFFFF;" d="M38,40H13c-0.552,0-1-0.447-1-1s0.448-1,1-1h25c0.552,0,1,0.447,1,1S38.552,40,38,40z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
18
images/chat2.svg
Normal file
18
images/chat2.svg
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||||
|
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
viewBox="0 0 58 58" xml:space="preserve">
|
||||||
|
<g>
|
||||||
|
<path style="fill:#0391FD;" d="M25,9.586C11.193,9.586,0,19.621,0,32c0,4.562,1.524,8.803,4.135,12.343
|
||||||
|
C3.792,48.433,2.805,54.194,0,57c0,0,8.47-1.191,14.273-4.651c0.006-0.004,0.009-0.01,0.014-0.013
|
||||||
|
c1.794-1.106,3.809-2.397,4.302-2.783c0.301-0.417,0.879-0.543,1.328-0.271c0.298,0.181,0.487,0.512,0.488,0.86
|
||||||
|
c0.003,0.582-0.008,0.744-3.651,3.018c2.582,0.81,5.355,1.254,8.245,1.254c13.807,0,25-10.035,25-22.414S38.807,9.586,25,9.586z"/>
|
||||||
|
<path style="fill:#0F71D3;" d="M58,23.414C58,11.035,46.807,1,33,1c-9.97,0-18.575,5.234-22.589,12.804
|
||||||
|
C14.518,11.153,19.553,9.586,25,9.586c13.807,0,25,10.035,25,22.414c0,4.735-1.642,9.124-4.437,12.743
|
||||||
|
C51.162,47.448,58,48.414,58,48.414c-2.805-2.805-3.792-8.566-4.135-12.657C56.476,32.217,58,27.976,58,23.414z"/>
|
||||||
|
<path style="fill:#FFFFFF;" d="M32.5,26h-14c-0.552,0-1-0.447-1-1s0.448-1,1-1h14c0.552,0,1,0.447,1,1S33.052,26,32.5,26z"/>
|
||||||
|
<path style="fill:#FFFFFF;" d="M38,33H13c-0.552,0-1-0.447-1-1s0.448-1,1-1h25c0.552,0,1,0.447,1,1S38.552,33,38,33z"/>
|
||||||
|
<path style="fill:#FFFFFF;" d="M38,40H13c-0.552,0-1-0.447-1-1s0.448-1,1-1h25c0.552,0,1,0.447,1,1S38.552,40,38,40z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
125
package-lock.json
generated
125
package-lock.json
generated
@ -17,6 +17,7 @@
|
|||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-dom": "^18.3.1",
|
"react-dom": "^18.3.1",
|
||||||
"react-router-dom": "^6.26.1",
|
"react-router-dom": "^6.26.1",
|
||||||
|
"styled-components": "^6.1.13",
|
||||||
"typescript": "^5.5.4"
|
"typescript": "^5.5.4"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -2615,6 +2616,27 @@
|
|||||||
"node": ">=10.0.0"
|
"node": ">=10.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@emotion/is-prop-valid": {
|
||||||
|
"version": "1.2.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz",
|
||||||
|
"integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@emotion/memoize": "^0.8.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@emotion/memoize": {
|
||||||
|
"version": "0.8.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
|
||||||
|
"integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
|
"node_modules/@emotion/unitless": {
|
||||||
|
"version": "0.8.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
|
||||||
|
"integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/@ijl/cli": {
|
"node_modules/@ijl/cli": {
|
||||||
"version": "5.1.0",
|
"version": "5.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/@ijl/cli/-/cli-5.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/@ijl/cli/-/cli-5.1.0.tgz",
|
||||||
@ -3117,6 +3139,12 @@
|
|||||||
"resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.6.tgz",
|
"resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.6.tgz",
|
||||||
"integrity": "sha512-5JcVt1u5HDmlXkwOD2nslZVllBBc7HDuOICfiZah2Z0is8M8g+ddAEawbmd3VjedfDHBzxCaXLs07QEmb7y54g=="
|
"integrity": "sha512-5JcVt1u5HDmlXkwOD2nslZVllBBc7HDuOICfiZah2Z0is8M8g+ddAEawbmd3VjedfDHBzxCaXLs07QEmb7y54g=="
|
||||||
},
|
},
|
||||||
|
"node_modules/@types/stylis": {
|
||||||
|
"version": "4.2.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz",
|
||||||
|
"integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/@types/tapable": {
|
"node_modules/@types/tapable": {
|
||||||
"version": "1.0.12",
|
"version": "1.0.12",
|
||||||
"resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.12.tgz",
|
"resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.12.tgz",
|
||||||
@ -3832,6 +3860,15 @@
|
|||||||
"node": ">=6"
|
"node": ">=6"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/camelize": {
|
||||||
|
"version": "1.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
|
||||||
|
"integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/caniuse-lite": {
|
"node_modules/caniuse-lite": {
|
||||||
"version": "1.0.30001658",
|
"version": "1.0.30001658",
|
||||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001658.tgz",
|
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001658.tgz",
|
||||||
@ -4248,6 +4285,15 @@
|
|||||||
"node": ">= 8"
|
"node": ">= 8"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/css-color-keywords": {
|
||||||
|
"version": "1.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
|
||||||
|
"integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
|
||||||
|
"license": "ISC",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=4"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/css-loader": {
|
"node_modules/css-loader": {
|
||||||
"version": "6.11.0",
|
"version": "6.11.0",
|
||||||
"resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.11.0.tgz",
|
"resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.11.0.tgz",
|
||||||
@ -4293,6 +4339,17 @@
|
|||||||
"node": ">=10"
|
"node": ">=10"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/css-to-react-native": {
|
||||||
|
"version": "3.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
|
||||||
|
"integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"camelize": "^1.0.0",
|
||||||
|
"css-color-keywords": "^1.0.0",
|
||||||
|
"postcss-value-parser": "^4.0.2"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/cssesc": {
|
"node_modules/cssesc": {
|
||||||
"version": "3.0.0",
|
"version": "3.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
|
||||||
@ -8585,6 +8642,74 @@
|
|||||||
"webpack": "^5.0.0"
|
"webpack": "^5.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/styled-components": {
|
||||||
|
"version": "6.1.13",
|
||||||
|
"resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.13.tgz",
|
||||||
|
"integrity": "sha512-M0+N2xSnAtwcVAQeFEsGWFFxXDftHUD7XrKla06QbpUMmbmtFBMMTcKWvFXtWxuD5qQkB8iU5gk6QASlx2ZRMw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@emotion/is-prop-valid": "1.2.2",
|
||||||
|
"@emotion/unitless": "0.8.1",
|
||||||
|
"@types/stylis": "4.2.5",
|
||||||
|
"css-to-react-native": "3.2.0",
|
||||||
|
"csstype": "3.1.3",
|
||||||
|
"postcss": "8.4.38",
|
||||||
|
"shallowequal": "1.1.0",
|
||||||
|
"stylis": "4.3.2",
|
||||||
|
"tslib": "2.6.2"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 16"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/styled-components"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": ">= 16.8.0",
|
||||||
|
"react-dom": ">= 16.8.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/styled-components/node_modules/postcss": {
|
||||||
|
"version": "8.4.38",
|
||||||
|
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
|
||||||
|
"integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
|
||||||
|
"funding": [
|
||||||
|
{
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/postcss/"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "tidelift",
|
||||||
|
"url": "https://tidelift.com/funding/github/npm/postcss"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "github",
|
||||||
|
"url": "https://github.com/sponsors/ai"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"nanoid": "^3.3.7",
|
||||||
|
"picocolors": "^1.0.0",
|
||||||
|
"source-map-js": "^1.2.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": "^10 || ^12 || >=14"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/styled-components/node_modules/tslib": {
|
||||||
|
"version": "2.6.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
|
||||||
|
"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
|
||||||
|
"license": "0BSD"
|
||||||
|
},
|
||||||
|
"node_modules/stylis": {
|
||||||
|
"version": "4.3.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz",
|
||||||
|
"integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/supports-color": {
|
"node_modules/supports-color": {
|
||||||
"version": "7.2.0",
|
"version": "7.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
|
||||||
|
|||||||
@ -9,6 +9,7 @@
|
|||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-dom": "^18.3.1",
|
"react-dom": "^18.3.1",
|
||||||
"react-router-dom": "^6.26.1",
|
"react-router-dom": "^6.26.1",
|
||||||
|
"styled-components": "^6.1.13",
|
||||||
"typescript": "^5.5.4"
|
"typescript": "^5.5.4"
|
||||||
},
|
},
|
||||||
"main": "./src/index.tsx",
|
"main": "./src/index.tsx",
|
||||||
|
|||||||
77
src/components/home/Card.jsx
Normal file
77
src/components/home/Card.jsx
Normal file
@ -0,0 +1,77 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { URLs } from "../../__data__/urls";
|
||||||
|
|
||||||
|
import styled from "styled-components";
|
||||||
|
|
||||||
|
const Card = (props) => {
|
||||||
|
const interlocutorId = props.id
|
||||||
|
|
||||||
|
const hexToRgb = (hex) => {
|
||||||
|
hex = hex.replace(/^#/, '');
|
||||||
|
|
||||||
|
let r = parseInt(hex.slice(0, 2), 16);
|
||||||
|
let g = parseInt(hex.slice(2, 4), 16);
|
||||||
|
let b = parseInt(hex.slice(4, 6), 16);
|
||||||
|
|
||||||
|
return `${r}, ${g}, ${b}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleClick = (event, id) => {
|
||||||
|
localStorage.setItem('interlocutorId', id);
|
||||||
|
};
|
||||||
|
|
||||||
|
const StyledCard = styled.div`
|
||||||
|
box-shadow: 0 10px 40px rgba(176, 175, 189, 0.85);
|
||||||
|
|
||||||
|
padding: 2vw;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
border-radius: 2vw;
|
||||||
|
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
background-color: ${props => props.color
|
||||||
|
? `rgba(${hexToRgb(props.color)}, 0.63)`
|
||||||
|
: 'rgba(255, 255, 255, 0.63)'};
|
||||||
|
|
||||||
|
transition: box-shadow 0.3s ease-in;
|
||||||
|
|
||||||
|
div, h2 {
|
||||||
|
transition: color 0.3s ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
box-shadow: 0 10px 40px rgb(${hexToRgb(props.color)});
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
div, h2 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 800px) {
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
border-radius: 2vh;
|
||||||
|
padding: 3vw;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
return (
|
||||||
|
<a
|
||||||
|
href={URLs.chat.url}
|
||||||
|
className="ChatCard"
|
||||||
|
onClick={(event) => handleClick(event, interlocutorId)}
|
||||||
|
>
|
||||||
|
<StyledCard color={props.color}>
|
||||||
|
<h2>{props.name}</h2>
|
||||||
|
<div className="lastMessageStyle">{props.lastMessage}</div>
|
||||||
|
</StyledCard>
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Card;
|
||||||
41
src/components/home/ChatsList.jsx
Normal file
41
src/components/home/ChatsList.jsx
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import Card from "./Card.jsx";
|
||||||
|
|
||||||
|
const ChatsList = (props) => {
|
||||||
|
const { chats } = props;
|
||||||
|
|
||||||
|
const colorMap = {
|
||||||
|
orange: 'FFA500FF',
|
||||||
|
aqua: '00FFFFFF',
|
||||||
|
crimson: 'DC143CFF',
|
||||||
|
red: 'FF0000FF',
|
||||||
|
violet: '8A2BE2FF',
|
||||||
|
seagreen: '20B2AAFF',
|
||||||
|
green: 'ADFF2FFF',
|
||||||
|
blue: '0000FFFF',
|
||||||
|
pink: 'FF1493FF',
|
||||||
|
cyan: '72FAFAFF'
|
||||||
|
}
|
||||||
|
|
||||||
|
function getColor(chatId) {
|
||||||
|
const keys = Object.keys(colorMap);
|
||||||
|
const index = chatId % keys.length;
|
||||||
|
return colorMap[keys[index]];
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="ChatsList">
|
||||||
|
{chats.map((item, index) => (
|
||||||
|
<Card
|
||||||
|
key={index}
|
||||||
|
name={item.name}
|
||||||
|
lastMessage={item.lastMessage}
|
||||||
|
id={item.id}
|
||||||
|
color={getColor(item.id)}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ChatsList;
|
||||||
14
src/components/home/HomeTitle.jsx
Normal file
14
src/components/home/HomeTitle.jsx
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import chatIcon from './../../../images/chat.svg';
|
||||||
|
import { URLs } from "../../__data__/urls";
|
||||||
|
|
||||||
|
const HomeTitle = () => {
|
||||||
|
return (
|
||||||
|
<a className="homeTitleWrapper" href={URLs.baseUrl}>
|
||||||
|
<h1 className="montecarlo-regular homeTitle">Enterfront</h1>
|
||||||
|
<img src={chatIcon} alt="Chat Icon" className="chatIcon"/>
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default HomeTitle;
|
||||||
46
src/components/home/css/card.css
Normal file
46
src/components/home/css/card.css
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
.ChatsList {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
margin: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ChatCard {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
max-width: 30vw;
|
||||||
|
min-width: 20vw;
|
||||||
|
|
||||||
|
margin-left: 1.2vw;
|
||||||
|
margin-right: 1.2vw;
|
||||||
|
|
||||||
|
border-radius: 2vw;
|
||||||
|
|
||||||
|
transition: transform 0.2s ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lastMessageStyle {
|
||||||
|
width: 80%;
|
||||||
|
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 800px) {
|
||||||
|
.ChatCard {
|
||||||
|
width: 30vw;
|
||||||
|
max-width: 30vw;
|
||||||
|
|
||||||
|
margin-left: 4vw;
|
||||||
|
margin-right: 4vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ChatsList {
|
||||||
|
margin: 10vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ChatCard:hover {
|
||||||
|
transform: translate(2px, -10px);
|
||||||
|
}
|
||||||
25
src/components/home/css/homeTitle.css
Normal file
25
src/components/home/css/homeTitle.css
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
.homeTitleWrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.homeTitle {
|
||||||
|
font-size: 5vw;
|
||||||
|
transition: color 0.3s ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
.homeTitleWrapper:hover h1 {
|
||||||
|
color: orange;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media only screen and (max-width: 800px) {
|
||||||
|
.homeTitle {
|
||||||
|
font-size: 8vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.chatIcon {
|
||||||
|
width: 6vw;
|
||||||
|
margin-left: 3vw;
|
||||||
|
}
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@import url("./css/card.css");
|
||||||
|
@import url("./css/homeTitle.css");
|
||||||
@ -1,6 +1,7 @@
|
|||||||
@import url('https://fonts.googleapis.com/css2?family=MonteCarlo&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
|
@import url('https://fonts.googleapis.com/css2?family=MonteCarlo&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Metal+Mania&display=swap');
|
@import url('https://fonts.googleapis.com/css2?family=Metal+Mania&display=swap');
|
||||||
@import url('https://fonts.googleapis.com/css2?family=McLaren&display=swap');
|
@import url('https://fonts.googleapis.com/css2?family=McLaren&display=swap');
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=MonteCarlo&display=swap');
|
||||||
|
|
||||||
@import url("pages/index.css");
|
@import url("pages/index.css");
|
||||||
@import url("outer/index.css");
|
@import url("outer/index.css");
|
||||||
@ -25,6 +26,7 @@ code {
|
|||||||
font-size: 1.2vw;
|
font-size: 1.2vw;
|
||||||
font-family: "Montserrat", 'sans-serif';
|
font-family: "Montserrat", 'sans-serif';
|
||||||
color: black;
|
color: black;
|
||||||
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Mobile devices */
|
/* Mobile devices */
|
||||||
@ -50,3 +52,10 @@ html {
|
|||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.montecarlo-regular {
|
||||||
|
font-family: "MonteCarlo", cursive;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,8 +1,20 @@
|
|||||||
import React from 'react';
|
import React, {useEffect, useState} from 'react';
|
||||||
|
|
||||||
const Chat = () => {
|
const Chat = () => {
|
||||||
|
const [interlocutorId, setInterlocutorId] = useState(0); // State to hold the interlocutorId
|
||||||
|
|
||||||
|
function getInterlocutorId() {
|
||||||
|
const id = localStorage.getItem('interlocutorId');
|
||||||
|
return id ? id : 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const id = getInterlocutorId();
|
||||||
|
setInterlocutorId(id);
|
||||||
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<h2>Chat with ...</h2>
|
<h2>Chat with ... (id = {interlocutorId})</h2>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -1,9 +1,69 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
|
import HomeTitle from "../components/home/HomeTitle.jsx";
|
||||||
|
import ChatsList from "../components/home/ChatsList.jsx";
|
||||||
|
|
||||||
const Home = () => {
|
const Home = () => {
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
|
|
||||||
|
// temp for testing
|
||||||
|
const chats = [
|
||||||
|
{
|
||||||
|
name: "Alice Johnson",
|
||||||
|
id: 123456,
|
||||||
|
lastMessage: "See you later!"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Bob Smith",
|
||||||
|
id: 654321,
|
||||||
|
lastMessage: "Got it, thanks!"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Charlie Brown",
|
||||||
|
id: 234567,
|
||||||
|
lastMessage: "How's the project going? How's the project going? How's the project going?" +
|
||||||
|
"How's the project going? How's the project going?"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "David Clark",
|
||||||
|
id: 765432,
|
||||||
|
lastMessage: "I'll send the files."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Eve Adams",
|
||||||
|
id: 345678,
|
||||||
|
lastMessage: "Let's meet tomorrow."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Frank Wright",
|
||||||
|
id: 876543,
|
||||||
|
lastMessage: "Can you review this?"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Grace Lee",
|
||||||
|
id: 456789,
|
||||||
|
lastMessage: "Thanks for your help!"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Hannah Scott",
|
||||||
|
id: 987654,
|
||||||
|
lastMessage: "See you at the meeting."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Ian Davis",
|
||||||
|
id: 567890,
|
||||||
|
lastMessage: "Let me know when you're free."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Jill Thompson",
|
||||||
|
id: 678901,
|
||||||
|
lastMessage: "I'll catch up with you later."
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="homeWrapper">
|
||||||
|
<HomeTitle/>
|
||||||
|
<p>Your chats</p>
|
||||||
|
<ChatsList chats={chats} />
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
25
src/pages/css/home.css
Normal file
25
src/pages/css/home.css
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
.homeWrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.homeWrapper p {
|
||||||
|
font-size: 2.5vw;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 800px) {
|
||||||
|
.homeWrapper p {
|
||||||
|
font-size: 3vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ChatsList {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
margin: 3rem;
|
||||||
|
}
|
||||||
@ -1 +1,2 @@
|
|||||||
@import url("css/init.css");
|
@import url("css/init.css");
|
||||||
|
@import url("css/home.css");
|
||||||
Loading…
Reference in New Issue
Block a user