kj
/
anamnesis
1
0
Fork 0
Código Incidencias 0 Pull Requests 0 Lanzamientos 0 Wiki Actividad
Explorar el Código

categories page UI

master
kj1352 hace 4 años
padre
8dd3ab570e
commit
93e7e1f811
Se han modificado 4 ficheros con 273 adiciones y 7 borrados
Dividir vista
Opciones de diferencias
Mostrar estadísticas Descargar archivo de parche Descargar archivo de diferencias
  1. +3
    -3
      src/assets/icons/plus-circle.svg
  2. +193
    -0
      src/components/categories/Categories.module.scss
  3. +74
    -1
      src/components/categories/Categories.tsx
  4. +3
    -3
      src/components/home/Home.tsx

+ 3
- 3
src/assets/icons/plus-circle.svg Ver fichero

@@ -1,5 +1,5 @@
<svg id="plus-circle" xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21">
<path id="Path_6147" data-name="Path 6147" d="M13.781,7.875a.656.656,0,0,1,.656.656v5.25a.656.656,0,0,1-.656.656H8.531a.656.656,0,0,1,0-1.312h4.594V8.531A.656.656,0,0,1,13.781,7.875Z" transform="translate(-3.281 -3.281)" fill="#f1be83" fill-rule="evenodd"/>
<path id="Path_6148" data-name="Path 6148" d="M16.875,17.531a.656.656,0,0,1,.656-.656h5.25a.656.656,0,0,1,0,1.313H18.188v4.594a.656.656,0,0,1-1.312,0Z" transform="translate(-7.031 -7.031)" fill="#f1be83" fill-rule="evenodd"/>
<path id="Path_6149" data-name="Path 6149" d="M10.5,19.688A9.188,9.188,0,1,0,1.313,10.5,9.187,9.187,0,0,0,10.5,19.688ZM10.5,21A10.5,10.5,0,1,0,0,10.5,10.5,10.5,0,0,0,10.5,21Z" fill="#f1be83" fill-rule="evenodd"/>
<path id="Path_6147" data-name="Path 6147" d="M13.781,7.875a.656.656,0,0,1,.656.656v5.25a.656.656,0,0,1-.656.656H8.531a.656.656,0,0,1,0-1.312h4.594V8.531A.656.656,0,0,1,13.781,7.875Z" transform="translate(-3.281 -3.281)" fill-rule="evenodd"/>
<path id="Path_6148" data-name="Path 6148" d="M16.875,17.531a.656.656,0,0,1,.656-.656h5.25a.656.656,0,0,1,0,1.313H18.188v4.594a.656.656,0,0,1-1.312,0Z" transform="translate(-7.031 -7.031)" fill-rule="evenodd"/>
<path id="Path_6149" data-name="Path 6149" d="M10.5,19.688A9.188,9.188,0,1,0,1.313,10.5,9.187,9.187,0,0,0,10.5,19.688ZM10.5,21A10.5,10.5,0,1,0,0,10.5,10.5,10.5,0,0,0,10.5,21Z" fill-rule="evenodd"/>
</svg>

+ 193
- 0
src/components/categories/Categories.module.scss Ver fichero

@@ -0,0 +1,193 @@
.pageHeader {
background-color: transparent;
text-align: center;
padding: 1.5rem 0;
position: relative;

figure {
display: block;
position: absolute;
right: 1rem;
top: 1rem;

img {
display: block;
width: 4rem;
height: 4rem;
border-radius: 50%;
border: 1px solid var(--creamy-white);
}
}
}

.tabHeading {
background-color: transparent;
position: relative;
padding: 3rem 0 8rem;
text-align: center;

&::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: var(--teal);
border-top-left-radius: 3rem;
border-top-right-radius: 3rem;
}

&>* {
position: relative;
}

h4 {
color: white;
font-size: 2.2rem;
}

p {
color: white;
font-size: 1.4rem;
}
}

.searchHolder {
position: relative;
&::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: var(--creamy-white);
border-top-left-radius: 3rem;
border-top-right-radius: 3rem;
}

&>* {
position: relative;
}

.searchBar {
background-color: white;
display: flex;
border-radius: 3rem;
height: 5rem;
width: calc(100% - 6rem);
margin: -2.5rem auto 0;
align-items: center;
justify-content: space-between;
box-shadow: 0px 5px 30px -20px var(--grey);
transform: translateY(-2.5rem);
input {
height: 100%;
border: 0;
width: calc(100% - 5rem);
background-color: transparent;
padding-left: 2rem;
font-size: 1.4rem;
}
svg {
width: 5rem;
fill: var(--red);
}
}
}

.addButton {
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: calc(100% - 4rem);
border: 0.2rem dashed var(--orange);
border-radius: 3rem;
background-color: transparent;
height: 5rem;
color: var(--orange);
cursor: pointer;
font-weight: 700;

svg {
width: 2rem;
height: 2rem;
margin-right: 1rem;
fill: var(--orange);
}
}

$block-padding: 2.5rem 2rem;

.Grid {
padding: #{$block-padding};

ul {
list-style: none;
display: grid;
grid-gap: 2rem;
grid-template-columns: 1fr 1fr;
}

li {
display: flex;
justify-content: space-between;
align-items: center;

&:nth-child(1) .icon {
background-color: var(--orange);
}

&:nth-child(2) .icon {
background-color: var(--blue);
}

&:nth-child(3) .icon {
background-color: var(--red);
}

&:nth-child(4) .icon {
background-color: var(--teal);
}
}

.icon {
width: 4.5rem;
height: 4.5rem;
background-color: var(--grey);
display: flex;
align-items: center;
justify-content: center;
border-radius: 1rem;

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

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

label, span {
display: block;
}

label {
font-size: 1.2rem;
color: var(--black);
font-weight: 700;
}

span {
font-size: 1rem;
color: var(--grey);
font-weight: 500;
}
}
}

+ 74
- 1
src/components/categories/Categories.tsx Ver fichero

@@ -1,8 +1,81 @@
import React from "react";
import styles from './Categories.module.scss';
import { ReactComponent as LogoIcon } from '../../assets/icons/anamnesis.svg';
import { ReactComponent as SearchIcon } from '../../assets/icons/bx-search-alt.svg';
import { ReactComponent as PlusCircledIcon } from '../../assets/icons/plus-circle.svg';

import { ReactComponent as TimeIcon } from '../../assets/icons/time.svg';
import { ReactComponent as PersonSpeakerIcon } from '../../assets/icons/user-speaker.svg';
import { ReactComponent as BookMarkIcon } from '../../assets/icons/bookmark.svg';
import { ReactComponent as BrainIcon } from '../../assets/icons/bx-brain.svg';

export const Categories: React.FC = () => {
return <section className="page">
categories
<header className={styles.pageHeader}>
<LogoIcon />

<figure>
{/* eslint-disable-next-line */}
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSERA5Pm3aRBV7AaI8tvpZfzpD24ZgrU1_8NA&usqp=CAU" alt="profile-image" />
</figure>
</header>
<header className={styles.tabHeading}>
<h4> Categories </h4>
<p> 4 Types </p>
</header>
<section className={styles.searchHolder}>
<div className={styles.searchBar}>
<input type="text" placeholder={'Search Category'} />
<SearchIcon />
</div>
</section>

<button className={styles.addButton}>
<PlusCircledIcon /> Add Category
</button>


<section className={styles.Grid}>
<ul>
<li>
<div className={styles.icon}>
<TimeIcon />
</div>
<div className={styles.info}>
<label> Vocabulary </label>
<span> 5 Shelves </span>
</div>
</li>
<li>
<div className={styles.icon}>
<BookMarkIcon />
</div>
<div className={styles.info}>
<label> Books </label>
<span> 3 Shelves </span>
</div>
</li>
<li>
<div className={styles.icon}>
<PersonSpeakerIcon />
</div>
<div className={styles.info}>
<label> IELTS </label>
<span> 5 Shelves </span>
</div>
</li>
<li>
<div className={styles.icon}>
<BrainIcon />
</div>
<div className={styles.info}>
<label> GRE </label>
<span> 2 Shelves </span>
</div>
</li>
</ul>
</section>
</section>
}

+ 3
- 3
src/components/home/Home.tsx Ver fichero

@@ -16,7 +16,7 @@ import { ReactComponent as PersonSpeakerIcon } from '../../assets/icons/user-spe
import { ReactComponent as BrainIcon } from '../../assets/icons/bx-brain.svg';
import { ReactComponent as InternBadge } from '../../assets/icons/intern-badge.svg';

import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
import { CircularProgressbar } from 'react-circular-progressbar';


export const Home: React.FC = () => {
@@ -27,8 +27,7 @@ export const Home: React.FC = () => {
</header>

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


Escribir Vista previa
Cargando…
Cancelar
Guardar