Added CardArticle comp
This commit is contained in:
MaxOvs19 committed
1 parent
36bba6c5a1
commit
26eedabe0f
11 files changed
+108
-1
No files matched your search
@@ -0,0 +1,19 @@
|
||||
import React from "react";
|
||||
import cardCalendar from "../../../images/cardCalendar.svg";
|
||||
|
||||
import "./cardArticle.scss";
|
||||
|
||||
export const CardArticle = ({ images, title, data, id }) => {
|
||||
return (
|
||||
<div className="card-article">
|
||||
<img src={images} />
|
||||
<h5>{title}</h5>
|
||||
<div className="card-article__data">
|
||||
<img src={cardCalendar} />
|
||||
<p>{data}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CardArticle;
|
||||
@@ -0,0 +1,23 @@
|
||||
.card-article {
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
width: 344px;
|
||||
margin-bottom: 24px;
|
||||
|
||||
h5 {
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 17px;
|
||||
line-height: 20px;
|
||||
padding: 12px 16px 8px 16px;
|
||||
}
|
||||
|
||||
&__data {
|
||||
display: flex;
|
||||
padding: 0 0 14px 16px;
|
||||
|
||||
img {
|
||||
margin-right: 9px;
|
||||
}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 107 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 113 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
@@ -0,0 +1,4 @@
|
||||
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.70436 0.0130428C7.90089 0.196551 7.95622 0.426445 7.92326 0.684007C7.90862 0.797937 7.95012 0.833744 8.06649 0.831302C8.40503 0.823571 8.74397 0.826013 9.08291 0.829675C9.43934 0.833744 9.58949 0.984701 9.58989 1.3387C9.59071 4.05551 9.59071 6.77192 9.58989 9.48874C9.58989 9.84274 9.43487 9.99939 9.08453 9.99939C6.22531 10.0002 3.36608 10.0002 0.506848 9.99939C0.156921 9.99939 0.00108105 9.84192 0.00067416 9.48874C-0.000139623 6.77233 -0.000139623 4.05551 0.000267269 1.3387C0.000267269 0.984701 0.151224 0.83293 0.506848 0.829268C0.845382 0.825606 1.18432 0.823571 1.52326 0.830895C1.63963 0.833337 1.68195 0.798344 1.6669 0.684007C1.63231 0.426038 1.68968 0.196144 1.8858 0.0126359L1.88906 0.00693939C2.07379 0.00490493 2.2577 -0.000384668 2.44203 2.22238e-05C2.75248 0.000836007 2.9189 0.165627 2.92419 0.472017C2.92826 0.709642 3.04734 0.828454 3.28144 0.828454C4.35238 0.828454 5.42332 0.825199 6.49426 0.832116C6.63911 0.83293 6.68224 0.793868 6.66882 0.653084C6.64562 0.409355 6.66149 0.174579 6.90848 0.0325736C6.93004 0.0370494 6.94795 0.034608 6.95405 0.00897384C7.20307 0.00816006 7.45208 0.00775317 7.7007 0.00693939L7.70436 0.0126359V0.0130428ZM4.7963 3.12983C3.40026 3.12983 2.00462 3.13268 0.608571 3.12577C0.452731 3.12495 0.421807 3.16727 0.422214 3.31578C0.427504 5.33478 0.427097 7.35419 0.423028 9.37318C0.423028 9.5217 0.445407 9.58192 0.616708 9.58151C3.40188 9.57541 6.18665 9.57582 8.97183 9.58151C9.13947 9.58151 9.16835 9.5278 9.16795 9.37522C9.16306 7.36273 9.16266 5.35065 9.16876 3.33816C9.16917 3.175 9.13906 3.12454 8.96328 3.12577C7.57415 3.13431 6.18502 3.13065 4.79589 3.13024L4.7963 3.12983ZM4.77433 2.70504C5.52667 2.70504 6.27902 2.70504 7.03136 2.70504C7.6889 2.70504 8.34603 2.70423 9.00356 2.70585C9.1 2.70585 9.17039 2.70748 9.16795 2.57239C9.16022 2.17282 9.16306 1.77285 9.16673 1.37288C9.16754 1.28743 9.14475 1.25406 9.05361 1.25528C8.71467 1.25976 8.37573 1.25976 8.0372 1.25528C7.9489 1.25406 7.91635 1.2801 7.92204 1.37003C7.92856 1.47134 7.92937 1.57388 7.92123 1.67479C7.90251 1.90672 7.74179 2.06418 7.51719 2.07965C6.9687 2.11749 6.7384 2.03245 6.67899 1.75535C6.65661 1.65119 6.65783 1.53848 6.66882 1.43187C6.68347 1.28946 6.63749 1.25284 6.49345 1.25366C5.40216 1.26057 4.31129 1.25732 3.22 1.25732C3.02307 1.25732 2.92433 1.35579 2.92379 1.55272C2.92256 1.93886 2.783 2.07924 2.39849 2.08087C1.74787 2.08412 1.68521 2.02756 1.66893 1.39119C1.66608 1.28743 1.64289 1.25244 1.53425 1.25488C1.20914 1.2622 0.883629 1.26179 0.558523 1.25488C0.449883 1.25244 0.422214 1.28784 0.423842 1.39241C0.429538 1.76512 0.435235 2.13824 0.421807 2.51055C0.415704 2.67696 0.472262 2.70911 0.626881 2.70829C2.0095 2.7026 3.39212 2.70504 4.77474 2.70504H4.77433ZM2.50794 1.04411C2.50794 0.895184 2.4937 0.744634 2.5116 0.597746C2.5348 0.406914 2.42616 0.417493 2.29392 0.412204C2.14581 0.406507 2.07338 0.432955 2.08437 0.606698C2.10024 0.86304 2.08844 1.12101 2.08844 1.37816C2.08844 1.69269 2.08844 1.68862 2.39401 1.67031C2.4819 1.66502 2.51201 1.63898 2.50916 1.55191C2.50387 1.38264 2.50753 1.21337 2.50753 1.04411H2.50794ZM7.50254 1.05998C7.50254 0.890708 7.49399 0.721035 7.50498 0.552581C7.51597 0.378839 7.39838 0.411797 7.30438 0.418307C7.21283 0.42441 7.0753 0.354425 7.081 0.550547C7.08995 0.861819 7.0928 1.1735 7.07937 1.48436C7.07245 1.64183 7.12332 1.67153 7.27142 1.67398C7.44761 1.67682 7.53265 1.64183 7.50579 1.4453C7.4887 1.31917 7.50254 1.18855 7.50254 1.05998Z" fill="#6F6F6F"/>
|
||||
<path d="M4.78572 8.74616C3.80349 8.74616 2.82166 8.74291 1.83942 8.74982C1.69579 8.75064 1.66201 8.71239 1.66283 8.5712C1.66852 7.095 1.66934 5.61838 1.66161 4.14218C1.66079 3.9721 1.71735 3.94728 1.86749 3.94769C3.81813 3.95216 5.76877 3.95298 7.71941 3.94647C7.89234 3.94606 7.92815 3.99651 7.92733 4.16049C7.92082 5.62327 7.92123 7.08604 7.92733 8.54882C7.92774 8.70181 7.89722 8.75227 7.73203 8.75064C6.7502 8.74209 5.76796 8.74616 4.78572 8.74616ZM4.05169 6.86022C4.22503 6.85615 4.45207 6.94892 4.55786 6.83947C4.66243 6.73123 4.58635 6.50582 4.58716 6.33207C4.58757 6.17176 4.65755 5.9614 4.5599 5.86333C4.45248 5.75551 4.23927 5.832 4.07244 5.83038C3.90521 5.82834 3.68793 5.75673 3.58254 5.85764C3.46699 5.96831 3.54552 6.18966 3.54552 6.36218C3.54552 6.5282 3.46699 6.74954 3.58132 6.84435C3.67694 6.92369 3.89015 6.86063 4.05169 6.86063V6.86022ZM3.11624 7.82699C3.11624 7.82699 3.1138 7.82699 3.11258 7.82699C3.11258 7.65325 3.17931 7.42498 3.09427 7.32041C3.00394 7.20933 2.76632 7.28949 2.59298 7.28786C2.43267 7.28623 2.2223 7.21747 2.12465 7.31431C2.01682 7.42173 2.09088 7.63494 2.09128 7.80177C2.09128 7.9747 2.01316 8.205 2.12872 8.30509C2.22678 8.38973 2.45057 8.33642 2.61821 8.33113C2.78422 8.32584 3.00516 8.40763 3.09997 8.29614C3.17931 8.20256 3.11624 7.98812 3.11624 7.8274V7.82699ZM4.03623 8.33276C4.19532 8.33276 4.32431 8.32666 4.45207 8.33479C4.55624 8.3413 4.59855 8.31038 4.59123 8.20011C4.58228 8.06543 4.59082 7.92994 4.58879 7.79444C4.58635 7.63331 4.64209 7.4201 4.56071 7.32408C4.46428 7.21015 4.24374 7.29315 4.07773 7.28746C3.90968 7.28135 3.68915 7.22886 3.5858 7.31268C3.46454 7.41156 3.54674 7.64186 3.54552 7.81397C3.5443 7.98039 3.46902 8.19645 3.57766 8.30143C3.68508 8.40519 3.89992 8.31811 4.03623 8.33317V8.33276ZM5.49371 8.33276C5.65322 8.33276 5.78179 8.32706 5.90996 8.33439C6.01454 8.34049 6.05645 8.30753 6.04994 8.19808C6.0418 8.0634 6.05156 7.9275 6.04709 7.79241C6.04139 7.63169 6.11585 7.42295 6.0186 7.32245C5.91119 7.21137 5.69879 7.29234 5.53237 7.28705C5.36473 7.28135 5.14257 7.22927 5.04206 7.3135C4.92407 7.41278 5.00463 7.64267 5.00382 7.81519C5.00341 7.98161 4.92732 8.19849 5.03515 8.30184C5.14175 8.40397 5.357 8.31852 5.49331 8.33276H5.49371ZM6.4552 7.80014C6.46252 7.96534 6.40637 8.1936 6.49548 8.29817C6.58947 8.40844 6.82466 8.3291 6.99759 8.33032C7.1579 8.33195 7.36827 8.40071 7.46592 8.30387C7.57415 8.19645 7.49603 7.98324 7.5005 7.81642C7.50457 7.64878 7.55543 7.42905 7.47121 7.32692C7.37274 7.20771 7.14407 7.29315 6.97195 7.28705C6.81123 7.28135 6.60046 7.23049 6.50159 7.31065C6.38318 7.40627 6.48531 7.6268 6.4552 7.80014ZM2.55636 5.41168C2.59176 5.41168 2.59868 5.41168 2.60519 5.41168C2.77242 5.40802 2.99784 5.46824 3.09224 5.3832C3.20332 5.28351 3.12153 5.05403 3.12642 4.8811C3.13089 4.71997 3.18379 4.50147 3.1016 4.41154C3.00476 4.30534 2.78341 4.38103 2.61617 4.37981C2.44894 4.37859 2.23126 4.30657 2.1275 4.40666C2.01357 4.51652 2.09332 4.73828 2.09088 4.91039C2.08844 5.07071 2.02089 5.27822 2.11855 5.37913C2.21661 5.48086 2.42534 5.39704 2.55595 5.41128L2.55636 5.41168ZM6.97073 5.41616C7.14244 5.39175 7.37193 5.49062 7.47162 5.37384C7.55625 5.27456 7.50132 5.0528 7.50132 4.88517C7.50132 4.72444 7.55381 4.51164 7.47202 4.41602C7.37518 4.3029 7.15505 4.38469 6.98904 4.3794C6.8214 4.37411 6.59761 4.32162 6.49996 4.40666C6.38644 4.50513 6.46863 4.73462 6.46374 4.90714C6.45886 5.06786 6.40759 5.28189 6.48856 5.37588C6.58459 5.48696 6.80513 5.39297 6.97073 5.41657V5.41616ZM2.6353 6.87934C2.77608 6.87243 2.99703 6.92573 3.09631 6.83947C3.20088 6.74832 3.11747 6.52128 3.12804 6.35405C3.12845 6.34713 3.12804 6.34062 3.12804 6.3337C3.12357 6.17216 3.18053 5.95651 3.09834 5.86374C3.00109 5.75347 2.77975 5.83119 2.61292 5.83038C2.44609 5.82956 2.23126 5.75551 2.12384 5.86089C2.0156 5.9675 2.0921 6.18315 2.09088 6.35038C2.08966 6.51802 2.01682 6.7353 2.12017 6.84069C2.22352 6.94607 2.44121 6.85737 2.6353 6.87934ZM6.47676 6.35323C6.46903 6.35323 6.46171 6.35323 6.45398 6.35323C6.46212 6.52046 6.40881 6.74181 6.49548 6.84069C6.58663 6.94526 6.81367 6.87039 6.9809 6.86998C7.14814 6.86998 7.36582 6.94404 7.46958 6.84069C7.57415 6.73612 7.5005 6.51843 7.49969 6.35079C7.49888 6.18356 7.57497 5.96831 7.46714 5.8613C7.36013 5.7551 7.14529 5.82997 6.97846 5.82997C6.81164 5.82997 6.58215 5.75225 6.49426 5.86252C6.41248 5.96546 6.47676 6.18478 6.47676 6.35283V6.35323ZM4.58879 4.94864C4.58879 4.77734 4.58472 4.63574 4.59041 4.49414C4.59408 4.40625 4.56315 4.37452 4.47526 4.37777C4.32675 4.38306 4.17823 4.37899 4.02972 4.3794C3.54348 4.3794 3.54063 4.3794 3.54511 4.85506C3.54674 5.03531 3.46658 5.27212 3.57888 5.37995C3.68996 5.48655 3.92555 5.40762 4.10621 5.41046C4.26002 5.4129 4.46631 5.46173 4.55461 5.3832C4.65918 5.29002 4.57373 5.07885 4.58919 4.94905L4.58879 4.94864ZM5.5222 5.4186C5.5222 5.41616 5.5222 5.41372 5.5222 5.41128C5.52911 5.41128 5.53562 5.41128 5.54254 5.41128C5.70326 5.40639 5.91851 5.46295 6.01087 5.38117C6.12033 5.28433 6.04342 5.06379 6.04383 4.89778C6.04383 4.73136 6Line truncated
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.7 KiB |
+55
-1
@@ -1,15 +1,55 @@
|
||||
import React from "react";
|
||||
import React, { useState } from "react";
|
||||
|
||||
import AuthHeader from "../../components/AuthHeader/AuthHeader";
|
||||
import SideBar from "../../components/SideBar/SideBar";
|
||||
import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
|
||||
import { Footer } from "../../components/Footer/Footer";
|
||||
import CardArticle from "../../components/UI/CardArticle/CardArticle";
|
||||
|
||||
import arrowRight from "../../images/arrowRight.png";
|
||||
import cardImg1 from "../../images/cardArticleItem.png";
|
||||
import cardImg2 from "../../images/cardArticleItem2.png";
|
||||
import cardImg3 from "../../images/cardArticleItem3.png";
|
||||
import cardImg4 from "../../images/cardArticleItem4.png";
|
||||
import cardImg5 from "../../images/cardArticleItem5.png";
|
||||
import cardImg6 from "../../images/cardArticleItem6.png";
|
||||
|
||||
import "./blog.scss";
|
||||
|
||||
export const Blog = ({}) => {
|
||||
const [article] = useState([
|
||||
{
|
||||
image: cardImg1,
|
||||
title: "Аутстаффинг джунов: почему это выгодно",
|
||||
data: "1 марта, 2023",
|
||||
},
|
||||
{
|
||||
image: cardImg2,
|
||||
title: "Аутстаффинг джунов: почему это выгодно",
|
||||
data: "1 марта, 2023",
|
||||
},
|
||||
{
|
||||
image: cardImg3,
|
||||
title: "Аутстаффинг джунов: почему это выгодно",
|
||||
data: "1 марта, 2023",
|
||||
},
|
||||
{
|
||||
image: cardImg4,
|
||||
title: "Аутстаффинг джунов: почему это выгодно",
|
||||
data: "1 марта, 2023",
|
||||
},
|
||||
{
|
||||
image: cardImg5,
|
||||
title: "Аутстаффинг джунов: почему это выгодно",
|
||||
data: "1 марта, 2023",
|
||||
},
|
||||
{
|
||||
image: cardImg6,
|
||||
title: "Аутстаффинг джунов: почему это выгодно",
|
||||
data: "1 марта, 2023",
|
||||
},
|
||||
]);
|
||||
|
||||
return (
|
||||
<div className="blog">
|
||||
<AuthHeader />
|
||||
@@ -35,6 +75,20 @@ export const Blog = ({}) => {
|
||||
важными материалами, стремимся получать обратную связь
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="blog__body">
|
||||
{article.map((item, index) => {
|
||||
return (
|
||||
<CardArticle
|
||||
images={item.image}
|
||||
title={item.title}
|
||||
data={item.data}
|
||||
key={index}
|
||||
id={index}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
|
||||
@@ -9,6 +9,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 40px;
|
||||
|
||||
h1 {
|
||||
font-weight: 500;
|
||||
@@ -37,4 +38,10 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__body {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user