add logo lost

Signed-off-by: Tanuj22 <[email protected]>

.eslintrc.json

@@ -1,7 +1,8 @@
 {
  "env": {
- "browser": true,
- "es2020": true
+ "browser": true,
+ "es2020": true,
+ "amd": true
  },
  "settings": {
  "react": {
@@ -22,7 +23,7 @@
  },
  "plugins": [
  "react"
- 
+
  ],
  "rules": {
  "no-unused-vars": [

src/components/Animated-steps-list/Steps-list/Step/Step.style.js

@@ -20,4 +20,8 @@ export const StepWrapper = styled.li`
  color: var(--gray-2);
  }
  }
+ 
+ & > .logo-list {
+ margin-top: 38px;
+ }
 `;

src/components/Animated-steps-list/Steps-list/Step/index.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { useInView } from "react-intersection-observer";
+import LogoList from "../../../Logo-List";
 import { StepWrapper } from "./Step.style";
 
 const Step =({ name, description, logos, onInViewStatusChanged }) => {
@@ -17,6 +18,7 @@ const Step =({ name, description, logos, onInViewStatusChanged }) => {
  <StepWrapper ref={ref}>
  <h2>{name}</h2>
  <div className="description">{description}</div>
+ <LogoList className="logo-list" logos={logos} />
  </StepWrapper>
  );
 };

src/components/Logo-List/LogoList.style.js

@@ -0,0 +1,22 @@
+import styled from "styled-components";
+
+export const LogoListWrapper = styled.div`
+ ul {
+ list-style: none;
+ padding: 0;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ margin: -10px -16px;
+
+ & > li {
+ height: 32px;
+ margin: 10px 16px;
+
+ & img {
+ max-height: 32px;
+ max-width: 96px;
+ }
+ }
+ }
+`;

src/components/Logo-List/index.js

@@ -0,0 +1,18 @@
+import React from "react";
+import {LogoListWrapper} from "./LogoList.style";
+
+const LogoList = ({ logos, className }) => {
+ return (
+ <LogoListWrapper className={className}>
+ <ul>
+ {logos.map((logo) => (
+ <li key={logo.url}>
+ <img src={logo.url} alt={logo.alt} />
+ </li>
+ ))}
+ </ul>
+ </LogoListWrapper>
+ );
+};
+
+export default LogoList;

src/pages/animated-terminal.js

@@ -47,10 +47,10 @@ const temp = () => (
  </>
  ),
  logos: [
- // {
- //  url: require("../assets/images/mesheryctl/kubernetes.svg"),
- //  alt: "Kubernetes",
- // }
+ {
+ url: require("../assets/images/mesheryctl/kubernetes.svg"),
+ alt: "Kubernetes",
+ }
  // {
  // url: require('./img/step-logos/react.svg'),
  // alt: 'React',
@@ -190,7 +190,7 @@ const temp = () => (
  ],
  short: true,
  color: "gray",
- }, 
+ },
  {
  frames: 5,
  code: [

src/sections/Events/index.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { MeetupStyle } from "./meetups.style";
-import Card from "../../components/EventCard"
+import Card from "../../components/EventCard";
 import {Col, Container, Row} from "../../reusecore/Layout";
 import PageHeader from "../../reusecore/PageHeader";