Skip to content

Commit a58f08d

Browse files
InbarDanieliMichalPorag
InbarDanieli
authored and
MichalPorag
committed
feat: os-rel-design
1 parent 5a0139f commit a58f08d

16 files changed

Lines changed: 423 additions & 1 deletion

‎components/layout/navbar/navbar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ const Navbar = ({ DesHeight }) => {
8888
</div>
8989
<Link shallow href="/">
9090
<a className={className}>
91-
<Img className="inner-logo" src="/images/logo-2.0.svg" />
91+
<Img layout="fill" className="inner-logo" src="/images/logo-2.0.svg" />
9292
</a>
9393
</Link>
9494
</div>

‎components/os-rel-design/ImageOptions/ImageOptions.module.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.FileOptionsContainer {
2+
display: flex;
3+
justify-content: space-between;
4+
}
5+
6+
.changeIconSizeText {
7+
margin: 16px 0 0 0;
8+
font-size: 16px;
9+
}

‎components/os-rel-design/ImageOptions/ImageOptions.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react';
2+
import style from './ImageOptions.module.scss';
3+
4+
function ImageOptions({ onSetImage, onSetSize, size, onRenderCanvas, imageUrl }) {
5+
function preview(event) {
6+
onSetImage(URL.createObjectURL(event.target.files[0]));
7+
}
8+
9+
return (
10+
<>
11+
<div className={style.FileOptionsContainer}>
12+
<input title="click to add icon" type="file" onChange={preview} />
13+
<button onClick={onRenderCanvas}>Download Image</button>
14+
</div>
15+
{imageUrl && (
16+
<div>
17+
<p className={style.changeIconSizeText}>change icon size</p>
18+
<input onChange={(e) => onSetSize(e.target.value)} value={size} type="number"></input>
19+
</div>
20+
)}
21+
</>
22+
);
23+
}
24+
25+
export default ImageOptions;

‎components/os-rel-design/rectangleComponent/RectangleComponent.module.scss‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
.container {
2+
background: linear-gradient(rgb(125, 125, 125, 0.1), rgb(125, 125, 125, 0.1)),
3+
url("../../../public/assets/rectangleBackground.svg");
4+
background-size: cover;
5+
width: 540px;
6+
height: 124px;
7+
padding: 0 24px;
8+
display: flex;
9+
align-items: center;
10+
justify-content: space-evenly;
11+
12+
.logoBackground {
13+
min-height: 84px;
14+
min-width: 84px;
15+
width: 84px;
16+
height: 84px;
17+
background: linear-gradient(60deg, #01007d 0%, #832ec6 47.92%, #dc665e 100%);
18+
border-radius: 18px;
19+
margin: 0 12px;
20+
display: flex;
21+
align-items: center;
22+
justify-content: center;
23+
transform: rotate(-45deg);
24+
25+
.logo {
26+
width: 100%;
27+
height: 80%;
28+
transform: rotate(45deg);
29+
}
30+
}
31+
32+
.heart {
33+
width: 86px;
34+
}
35+
36+
.uploadImageContainer {
37+
display: flex;
38+
height: 100%;
39+
align-items: center;
40+
41+
.ImageUpload {
42+
width: auto;
43+
}
44+
}
45+
}

‎components/os-rel-design/rectangleComponent/RectangleComponent.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
/* eslint-disable @next/next/no-img-element */
2+
import React, { useRef, useState } from 'react';
3+
import style from './RectangleComponent.module.scss';
4+
import logo from '../../../public/assets/logo.svg';
5+
import heart from '../../../public/assets/Heart.svg';
6+
import ImageOptions from '../ImageOptions/ImageOptions';
7+
import { renderCanvas } from '../../../utils/canvas';
8+
9+
export default function RectangleLogoGenerator() {
10+
const [size, setSize] = useState(94);
11+
const [imageUrl, setImageUrl] = useState('');
12+
13+
const inputRef = useRef();
14+
15+
return (
16+
<>
17+
<div ref={inputRef} className={style.container}>
18+
{/* pull request logo */}
19+
<div className={style.logoBackground}>
20+
<img className={style.logo} src={logo.src} alt="logo" />
21+
</div>
22+
{/* heart */}
23+
<img className={style.heart} src={heart.src} alt="heart" />
24+
{/* image upload */}
25+
<div className={style.uploadImageContainer}>
26+
{!!imageUrl && (
27+
// eslint-disable-next-line @next/next/no-img-element
28+
<img className={style.ImageUpload} alt={'upload-img'} src={imageUrl} height={size} />
29+
)}
30+
</div>
31+
</div>
32+
<ImageOptions
33+
imageUrl={imageUrl}
34+
onSetImage={(e) => setImageUrl(e)}
35+
onSetSize={(e) => setSize(e)}
36+
size={size}
37+
onRenderCanvas={() => renderCanvas(inputRef)}
38+
/>
39+
</>
40+
);
41+
}

‎components/os-rel-design/squerComponent/SquerComponent.module.scss‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
.container {
2+
background-image: url("../../../public/assets/squerBackground.svg");
3+
width: 480px;
4+
height: 480px;
5+
background-repeat: no-repeat;
6+
background-size: cover;
7+
display: flex;
8+
flex-direction: column;
9+
align-items: center;
10+
11+
.logoContainer {
12+
margin: 36px 0;
13+
width: 124px;
14+
background: linear-gradient(60deg, #01007d 0%, #832ec6 47.92%, #dc665e 100%);
15+
border-radius: 24px;
16+
display: flex;
17+
align-items: center;
18+
justify-content: center;
19+
transform: rotate(-45deg);
20+
21+
&::after {
22+
content: "";
23+
padding-bottom: 100%;
24+
}
25+
26+
.logo {
27+
width: 100%;
28+
height: 78%;
29+
transform: rotate(45deg);
30+
}
31+
}
32+
33+
.heartsContainer {
34+
display: flex;
35+
gap: 30px;
36+
.heart {
37+
width: 56px;
38+
}
39+
}
40+
.uploadImageContainer {
41+
height: 100%;
42+
display: flex;
43+
align-items: center;
44+
45+
.ImageApload {
46+
width: auto;
47+
}
48+
}
49+
}

‎components/os-rel-design/squerComponent/SquerComponent.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
/* eslint-disable @next/next/no-img-element */
2+
import React, { useRef, useState } from 'react';
3+
import style from './SquerComponent.module.scss';
4+
import logo from '../../../public/assets/logo.svg';
5+
import heart from '../../../public/assets/Heart.svg';
6+
import ImageOptions from '../ImageOptions/ImageOptions';
7+
import { renderCanvas } from '../../../utils/canvas';
8+
9+
export default function SquerLogoGenerator() {
10+
const [size, setSize] = useState(120);
11+
const [imageUrl, setImageUrl] = useState('');
12+
13+
const inputRef = useRef();
14+
15+
return (
16+
<>
17+
<div ref={inputRef} className={style.container}>
18+
<div className={style.logoContainer}>
19+
<img className={style.logo} src={logo.src} alt="logo" />
20+
</div>
21+
<div className={style.heartsContainer}>
22+
<img className={style.heart} src={heart.src} alt="heart" />
23+
<img className={style.heart} src={heart.src} alt="heart" />
24+
<img className={style.heart} src={heart.src} alt="heart" />
25+
</div>
26+
<div className={style.uploadImageContainer}>
27+
{!!imageUrl && (
28+
<img className={style.ImageApload} alt="upload-img" src={imageUrl} height={size} />
29+
)}
30+
</div>
31+
</div>
32+
<ImageOptions
33+
imageUrl={imageUrl}
34+
onSetImage={(e) => setImageUrl(e)}
35+
onSetSize={(e) => setSize(e)}
36+
size={size}
37+
onRenderCanvas={() => renderCanvas(inputRef)}
38+
/>
39+
</>
40+
);
41+
}

‎package-lock.json‎

Lines changed: 83 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"dependencies": {
1616
"@mdi/js": "^5.6.55",
1717
"@mdi/react": "^1.4.0",
18+
"html2canvas": "^1.4.1",
1819
"next": "^11.0.0",
1920
"next-themes": "^0.1.1",
2021
"react": "^17.0.2",

0 commit comments

Comments
 (0)