Selaa lähdekoodia

home page - profile image prgoress bar UI

master
kj1352 4 vuotta sitten
vanhempi
commit
56a0471c06
2 muutettua tiedostoa jossa 25 lisäystä ja 5 poistoa
  1. +14
    -5
      src/components/home/Home.module.scss
  2. +11
    -0
      src/components/home/Home.tsx

+ 14
- 5
src/components/home/Home.module.scss Näytä tiedosto

@@ -19,6 +19,14 @@
width: 10rem;
height: 10rem;

[class*="CircularProgressbar"] {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}

img {
width: 100%;
height: 100%;
@@ -26,11 +34,12 @@
object-fit: cover;
object-position: center;
display: block;
transform: scale(0.8);
}
svg {
position: absolute;
bottom: -2rem;
bottom: -1rem;
right: calc(50% - 3rem);
width: 6rem;
height: 6rem;
@@ -306,8 +315,8 @@ $block-padding: 0 2rem;
}

.icon {
width: 4rem;
height: 4rem;
width: 4.5rem;
height: 4.5rem;
background-color: var(--grey);
display: flex;
align-items: center;
@@ -316,12 +325,12 @@ $block-padding: 0 2rem;

svg {
fill: white;
width: 3rem;
width: 2rem;
}
}

.info {
width: calc(100% - 5rem);
width: calc(100% - 5.5rem);

label, span {
display: block;


+ 11
- 0
src/components/home/Home.tsx Näytä tiedosto

@@ -29,6 +29,17 @@ export const Home: React.FC = () => {
<section className={styles.upfold}>
<div className={styles.profileImage}>
{/* eslint-disable-next-line */}
<CircularProgressbar value={70} strokeWidth={4}
styles={{
path: {
stroke: '#d45b63',
strokeLinecap: 'round',
},
trail: {
stroke: 'rgba(255, 255, 255, 0)',
strokeLinecap: 'round',
}}
} />
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSERA5Pm3aRBV7AaI8tvpZfzpD24ZgrU1_8NA&usqp=CAU" alt="profile-image" />
<InternBadge />
</div>


Ladataan…
Peruuta
Tallenna