expanding cards

src/meta/play-meta.js

@@ -1,5 +1,6 @@
 import {
-  BasicTree, CdTimerComp,
+  BasicTree,
+  CdTimerComp,
   CurrentTimer,
   MovieContainer,
   WhyReact,
@@ -8,124 +9,170 @@ import {
   SocialCard,
   RandomMemeGenerator,
   ReactTodoApp,
+  ExpandingCards,
   //import play here
 } from "plays";
 
 export const plays = [
   {
-    id: 'pl-0001',
-    name: 'Why React',
-    description: 'A simple application to demonstrate JSX usages',
-    component: () => { return <WhyReact /> },
-    path: '/plays/why-react',
+    id: "pl-0001",
+    name: "Why React",
+    description: "A simple application to demonstrate JSX usages",
+    component: () => {
+      return <WhyReact />;
+    },
+    path: "/plays/why-react",
     index: true,
-    level: 'Beginner',
-    tags: 'JSX',
-    github: 'atapas'
+    level: "Beginner",
+    tags: "JSX",
+    github: "atapas",
   },
   {
-    id: 'pl-0002',
-    name: 'Clock',
-    description: 'This application shows the current time and it increases every second',
-    component: () => { return <CurrentTimer /> },
-    path: '/plays/clock',
-    level: 'Beginner',
-    tags: 'JSX, Schedule',
-    github: 'atapas',
-    blog: 'https://blog.greenroots.info',
-    video: 'https://youtube.com/tapasadhikary'
+    id: "pl-0002",
+    name: "Clock",
+    description:
+      "This application shows the current time and it increases every second",
+    component: () => {
+      return <CurrentTimer />;
+    },
+    path: "/plays/clock",
+    level: "Beginner",
+    tags: "JSX, Schedule",
+    github: "atapas",
+    blog: "https://blog.greenroots.info",
+    video: "https://youtube.com/tapasadhikary",
   },
   {
-    id: 'pl-0003',
-    name: 'Countdown Timer',
-    description: 'It is a timer that fires every second and decreases the time',
-    component: () => { return <CdTimerComp /> },
-    path: '/plays/date-time-counter',
-    level: 'Intermediate',
-    tags: 'Schedule, Component Structure, Hooks, Custom Hooks',
-    github: 'atapas',
-    blog: 'https://blog.greenroots.info/how-to-create-a-countdown-timer-using-react-hooks',
+    id: "pl-0003",
+    name: "Countdown Timer",
+    description: "It is a timer that fires every second and decreases the time",
+    component: () => {
+      return <CdTimerComp />;
+    },
+    path: "/plays/date-time-counter",
+    level: "Intermediate",
+    tags: "Schedule, Component Structure, Hooks, Custom Hooks",
+    github: "atapas",
+    blog: "https://blog.greenroots.info/how-to-create-a-countdown-timer-using-react-hooks",
   },
   {
-    id: 'pl-0004',
-    name: 'Movies',
-    description: 'A list of movies from API call.',
-    component: () => { return <MovieContainer /> },
-    path: '/plays/movies',
-    level: 'Intermediate',
-    tags: 'Fetch Data, Hooks',
-    github: 'atapas',
+    id: "pl-0004",
+    name: "Movies",
+    description: "A list of movies from API call.",
+    component: () => {
+      return <MovieContainer />;
+    },
+    path: "/plays/movies",
+    level: "Intermediate",
+    tags: "Fetch Data, Hooks",
+    github: "atapas",
     featured: true,
-    blog: 'https://blog.openreplay.com/understanding-the-container-component-pattern-with-react-hooks'
+    blog: "https://blog.openreplay.com/understanding-the-container-component-pattern-with-react-hooks",
   },
   {
-    id: 'pl-0005',
-    name: 'Organization Tree',
-    description: 'A simple org tree',
-    component: () => { return <BasicTree /> },
-    path: '/plays/org-tree',
-    level: 'Intermediate',
-    tags: 'Recursion, Tree',
-    github: 'green-roots',
-    featured: true
-  }, {
-    id: 'pl-counter',
-    name: 'Counter',
-    description: 'A simple counter which increments the value upto a certain limit!',
-    component: () => { return <CounterApp /> },
-    path: '/plays/counter',
-    level: 'Beginner',
-    tags: 'JSX, State, Props',
-    github: 'murtuzaalisurti',
-    featured: true
-  }, {
-    id: 'pl-states',
-    name: 'States',
-    description: 'States in Functional Components',
-    component: () => { return <States /> },
-    path: '/plays/states',
-    level: 'Beginner',
-    tags: 'Hooks,State,JSX',
-    github: 'Abhishek-90',
-    cover: '',
-    blog: 'https://abhishek-90.github.io/My-Portfolio/'
-  }, {
-    id: 'pl-social-card',
-    name: 'Social Card',
-    description: 'The Social Card helps you telling who you are using photo, name, and other social footprints.',
-    component: () => { return <SocialCard /> },
-    path: '/plays/social-card',
-    level: 'Intermediate',
-    tags: 'Form,Events,Complex State',
-    github: 'atapas',
-    cover: '',
-    blog: 'https://blog.greenroots.info/how-to-create-react-form-with-a-single-change-event-handler',
-    video: ''
-  }, {
-    id: 'pl-random-meme-generator',
-    name: 'Random Meme Generator',
-    description: 'A project to demonstrate the use of API to fetch random memes! It also demonstrates how you can do event handling!',
-    component: () => { return <RandomMemeGenerator /> },
-    path: '/plays/random-meme-generator',
-    level: 'Beginner',
-    tags: 'JSX,Hooks,API,EventHandling',
-    github: 'murtuzaalisurti',
-    cover: '',
-    blog: '',
-    video: ''
-  }, {
-    id: 'pl-react-todo-app',
-    name: 'React Todo App',
-    description: 'It is a simple Todo App which keeps track of your regular work',
-    component: () => { return <ReactTodoApp /> },
-    path: '/plays/react-todo-app',
-    level: 'Beginner',
-    tags: 'ReactHooks, JavaScript, Css, React State',
-    github: 'nirban256',
-    cover: 'https://res.cloudinary.com/atapas/image/upload/v1650866465/demos/cover_y20bzk.png',
-    blog: '',
-    video: ''
+    id: "pl-0005",
+    name: "Organization Tree",
+    description: "A simple org tree",
+    component: () => {
+      return <BasicTree />;
+    },
+    path: "/plays/org-tree",
+    level: "Intermediate",
+    tags: "Recursion, Tree",
+    github: "green-roots",
+    featured: true,
+  },
+  {
+    id: "pl-counter",
+    name: "Counter",
+    description:
+      "A simple counter which increments the value upto a certain limit!",
+    component: () => {
+      return <CounterApp />;
+    },
+    path: "/plays/counter",
+    level: "Beginner",
+    tags: "JSX, State, Props",
+    github: "murtuzaalisurti",
+    featured: true,
+  },
+  {
+    id: "pl-states",
+    name: "States",
+    description: "States in Functional Components",
+    component: () => {
+      return <States />;
+    },
+    path: "/plays/states",
+    level: "Beginner",
+    tags: "Hooks,State,JSX",
+    github: "Abhishek-90",
+    cover: "",
+    blog: "https://abhishek-90.github.io/My-Portfolio/",
+  },
+  {
+    id: "pl-social-card",
+    name: "Social Card",
+    description:
+      "The Social Card helps you telling who you are using photo, name, and other social footprints.",
+    component: () => {
+      return <SocialCard />;
+    },
+    path: "/plays/social-card",
+    level: "Intermediate",
+    tags: "Form,Events,Complex State",
+    github: "atapas",
+    cover: "",
+    blog: "https://blog.greenroots.info/how-to-create-react-form-with-a-single-change-event-handler",
+    video: "",
+  },
+  {
+    id: "pl-random-meme-generator",
+    name: "Random Meme Generator",
+    description:
+      "A project to demonstrate the use of API to fetch random memes! It also demonstrates how you can do event handling!",
+    component: () => {
+      return <RandomMemeGenerator />;
+    },
+    path: "/plays/random-meme-generator",
+    level: "Beginner",
+    tags: "JSX,Hooks,API,EventHandling",
+    github: "murtuzaalisurti",
+    cover: "",
+    blog: "",
+    video: "",
+  },
+  {
+    id: "pl-react-todo-app",
+    name: "React Todo App",
+    description:
+      "It is a simple Todo App which keeps track of your regular work",
+    component: () => {
+      return <ReactTodoApp />;
+    },
+    path: "/plays/react-todo-app",
+    level: "Beginner",
+    tags: "ReactHooks, JavaScript, Css, React State",
+    github: "nirban256",
+    cover:
+      "https://res.cloudinary.com/atapas/image/upload/v1650866465/demos/cover_y20bzk.png",
+    blog: "",
+    video: "",
+  },
+  {
+    id: "pl-expanding-cards",
+    name: "Expanding-Cards",
+    description:
+      "this project shows bunch of striped cards on screen if you want to show the card. you just have to click to expand it",
+    component: () => {
+      return <ExpandingCards />;
+    },
+    path: "/plays/expanding-cards",
+    level: "Beginner",
+    tags: "Jsx, useState, hooks, toggle, React, css-transitions",
+    github: "Deepak8717",
+    cover: "",
+    blog: "",
+    video: "",
   }, //replace new play item here
 ];
-
-

src/plays/expanding-cards/Expanding-Card-Images.jsx

@@ -0,0 +1,25 @@
+const data = [
+  {
+    title: "Title One",
+    url: "https://images.unsplash.com/photo-1511028931355-082bb4781053",
+  },
+  {
+    title: "Title Two",
+    url: "https://images.unsplash.com/flagged/photo-1559511331-7649f05944e3?",
+  },
+  {
+    title: "Title Three",
+    url: "https://images.unsplash.com/photo-1611773951628-0d5b4c2507fb?",
+  },
+  {
+    title: "Title Four",
+    url: "https://images.unsplash.com/photo-1608822246990-be7bc0d9b2d7?",
+  },
+
+  {
+    title: "Title Five",
+    url: "https://images.unsplash.com/photo-1567117439290-a8b5ef5bab89?",
+  },
+];
+
+export default data;

src/plays/expanding-cards/ExpandingCards.css

@@ -0,0 +1,76 @@
+.play-container {
+  width: 100%;
+  margin: 0 auto;
+  text-align: center;
+}
+.card-container {
+  width: 100%;
+  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+}
+
+.Expanding-card {
+  width: 80px;
+  height: 400px;
+  cursor: pointer;
+  margin: 20px;
+  position: relative;
+  transition: width 1s;
+  -webkit-backface-visibility: hidden;
+}
+
+.active {
+  width: 600px;
+}
+.Expanding-card-imgage {
+  width: 100%;
+  height: 400px;
+  object-fit: cover;
+  border-radius: 50px;
+}
+.info {
+  position: absolute;
+  bottom: 10%;
+  left: 5%;
+  opacity: 0;
+  color: #fff;
+  font-size: 35px;
+  font-weight: bold;
+  transition: opacity 2s;
+  background-color: rgba(27, 27, 27, 0.5);
+  padding: 0 5%;
+  border-radius: 10px;
+}
+.active .info {
+  opacity: 1;
+}
+@media only screen and (max-width: 600px) {
+  .card-container {
+    flex-direction: column;
+    align-items: center;
+  }
+  .Expanding-card {
+    width: 100%;
+    height: 50px;
+    transition: height 1s;
+  }
+  .Expanding-card .Expanding-card-imgage {
+    height: 50px;
+    transition: height 1s;
+  }
+  .active {
+    height: 250px;
+  }
+  .active .Expanding-card-imgage {
+    height: 250px;
+  }
+  .info {
+    bottom: 5%;
+    font-size: 25px;
+    transition: opacity 1s;
+  }
+  .Expanding-card-imgage {
+    border-radius: 30px;
+  }
+}