initial commit

src/ui/ProjectBadge/ProjectLinkBadge.sass

@@ -0,0 +1,3 @@
+.ProjectLinkBadge
+  &:not(:last-child)
+    margin-right: 8px

src/ui/ProjectBadge/ProjectLinkBadge.tsx

@@ -0,0 +1,34 @@
+import './ProjectLinkBadge.sass';
+
+type Props = {
+  linkImage: ProjectLink
+  linkText?: string
+};
+
+const color = 'd8858d';
+
+const linkImages = {
+  github: `https://img.shields.io/badge/-{0}-222?style=for-the-badge&logo=github&logoColor=ffffff&color=${color}&labelColor=222`,
+  git: `https://img.shields.io/badge/-{0}-222?style=for-the-badge&logo=gitea&logoColor=609926&color=${color}&labelColor=222`,
+
+  vk: `https://img.shields.io/badge/-{0}-222?style=for-the-badge&logo=VK&logoColor=0077ff&color=${color}&labelColor=222`,
+
+  web: `https://img.shields.io/badge/-{0}-222?style=for-the-badge&logo=addthis&logoColor=e34f26&color=${color}&labelColor=222`,
+};
+const defaultLinksText = {
+  github: 'GitHub',
+  git: 'Git',
+  vk: 'VK',
+  web: 'Web'
+}
+
+const ProjectLinkBadge = ({ linkImage, linkText }: Props) => {
+  let formattedString = linkImages[linkImage];
+  formattedString = formattedString.replaceAll('{0}', linkText ?? defaultLinksText[linkImage]);
+
+  return (
+    <img src={formattedString} alt={linkText} className='ProjectLinkBadge'/>
+  );
+};
+
+export default ProjectLinkBadge;

src/ui/ProjectBadge/ProjectStackBadge.sass

@@ -0,0 +1,3 @@
+.ProjectStackBadge
+  &:not(:last-child)
+    margin-right: 8px

src/ui/ProjectBadge/ProjectStackBadge.tsx

@@ -0,0 +1,29 @@
+import './ProjectStackBadge.sass';
+
+type Props = {
+  stack: ProjectStack
+};
+
+const color = 'd8858d';
+
+const stackImage = {
+  css: `https://img.shields.io/badge/-CSS3-222?style=for-the-badge&logo=CSS3&logoColor=1572b6&color=${color}&labelColor=222`,
+  html: `https://img.shields.io/badge/-HTML5-222?style=for-the-badge&logo=HTML5&logoColor=e34f26&color=${color}&labelColor=222`,
+  js: `https://img.shields.io/badge/-JavaScript-222?style=for-the-badge&logo=CSS3&logoColor=f7df1e&color=${color}&labelColor=222`,
+  ts: `https://img.shields.io/badge/-TypeScript-222?style=for-the-badge&logo=CSS3&logoColor=3178C6&color=${color}&labelColor=222`,
+  sass: `https://img.shields.io/badge/-SASS-222?style=for-the-badge&logo=sass&logoColor=CC6699&color=${color}&labelColor=222`,
+
+  java: `https://img.shields.io/badge/-Java-222?style=for-the-badge&logo=Java&logoColor=fff007396&color=${color}&labelColor=222`,
+  kotlin: `https://img.shields.io/badge/-Kotlin-222?style=for-the-badge&logo=kotlin&logoColor=7f52ff&color=${color}&labelColor=222`,
+  python: `https://img.shields.io/badge/-Python-222?style=for-the-badge&logo=python&logoColor=3776ab&color=${color}&labelColor=222`,
+  go: `https://img.shields.io/badge/-GoLang-222?style=for-the-badge&logo=go&logoColor=00ADD8&color=${color}&labelColor=222`,
+
+  react: `https://img.shields.io/badge/-React-222?style=for-the-badge&logo=react&logoColor=61DAFB&color=${color}&labelColor=222`,
+  gulp: `https://img.shields.io/badge/-Gulp-222?style=for-the-badge&logo=gulp&logoColor=CF4647&color=${color}&labelColor=222`
+};
+
+const ProjectStackBadge = ({ stack }: Props) => (
+  <img src={stackImage[stack]} alt={stack} className='ProjectStackBadge'/>
+);
+
+export default ProjectStackBadge;

src/ui/ProjectBadge/ProjectStatusBadge.sass

@@ -0,0 +1,17 @@
+.ProjectStatus
+  font-size: 16px
+  font-weight: 300
+  height: fit-content
+  padding: 2px 6px
+
+  &__Development
+    background-color: #ff9c1b
+
+  &__Release
+    background-color: #ab1bff
+
+  &__Frozen
+    background-color: #19b3a6
+
+  &__Dropped
+    background-color: #ff1b1b

src/ui/ProjectBadge/ProjectStatusBadge.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { capitalize } from "../../utils";
+import './ProjectStatusBadge.sass';
+
+type Props = {
+    status: ProjectStatus
+}
+const localized = {
+    development: 'В разработке',
+    release: 'Готово',
+    frozen: 'Заморожено',
+    dropped: 'Брошено'
+}
+
+const ProjectStatusBadge = ({ status }: Props) => {
+  return (
+    <div className={`ProjectStatus ProjectStatus__${capitalize(status)}`}>
+        {localized[status]}
+    </div>
+  );
+}
+
+export default ProjectStatusBadge;

src/ui/ProjectCard/ProjectCard.sass

@@ -0,0 +1,23 @@
+.ProjectCard
+  background-color: #333
+  padding: 8px
+  margin: 0 8px 8px 0
+  box-sizing: border-box
+  border: 2px solid var(--accent-color)
+
+  &__Title
+    display: flex
+    justify-content: space-between
+    margin-bottom: 4px
+
+  &__Content, &__Links, &__Stack
+    border-top: 1px solid #d8858d
+    padding-top: 4px
+    
+  &__Content, &__Stack
+    margin-bottom: 4px
+
+  &__Links
+    font-weight: 500
+    &_Link:not(:first-child)
+      margin-left: 4px

src/ui/ProjectCard/ProjectCard.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import ProjectLinkBadge from "../ProjectBadge/ProjectLinkBadge";
+import ProjectStackBadge from "../ProjectBadge/ProjectStackBadge";
+import ProjectStatusBadge from "../ProjectBadge/ProjectStatusBadge";
+import './ProjectCard.sass';
+
+type Props = {
+    title: string
+    status?: 'development' | 'release' | 'frozen' | 'dropped'
+    links?: ProjectLinkType[]
+    stack?: ProjectStack[]
+    children?: React.ReactNode
+}
+
+class ProjectCard extends React.Component<Props> {
+  render() {
+    const { title, status, links, stack, children } = this.props;
+
+    return (
+      <div className="ProjectCard">
+        <h2 className="ProjectCard__Title">
+          {title}
+
+          {status && <ProjectStatusBadge status={status}/>}
+        </h2>
+
+        {children && <div className="ProjectCard__Content">
+          {children}
+        </div>}
+
+        {stack && stack.length > 0 && (
+            <div className="ProjectCard__Stack">
+              {stack.map(s => (
+                <ProjectStackBadge stack={s} key={s}/>
+              ))}
+            </div>
+        )}
+
+        {links && links.length > 0 && <div className="ProjectCard__Links">
+          {links.map(link => (
+            <a className="ProjectCard__Links_Link" href={link.url} target='_blank' rel='noreferrer' key={link.name} title={link.name}>
+              <ProjectLinkBadge linkImage={link.type} linkText={link.name}/>
+            </a>
+          ))}
+        </div>}
+      </div>
+    );
+  }
+}
+
+export default ProjectCard;