From a178640e8b29ab336266e3a79246542c93a2be1a Mon Sep 17 00:00:00 2001
From: Yashu Mittal <mittalyashu77@gmail.com>
Date: Tue, 8 Oct 2019 14:38:32 +0530
Subject: [PATCH] Create session page

---
 src/pages/session.vue | 81 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 81 insertions(+)
 create mode 100644 src/pages/session.vue

diff --git a/src/pages/session.vue b/src/pages/session.vue
new file mode 100644
index 00000000..ee93e053
--- /dev/null
+++ b/src/pages/session.vue
@@ -0,0 +1,81 @@
+<template>
+	<layout>
+		<div class="session">
+			<container>
+				<h2 class="session__heading">Pair programming session</h2>
+
+				<div
+					v-for="{ node } in $page.pp.edges"
+					:key="node.key"
+					class="session__list"
+				>
+					<div class="session__list-item">
+						<div class="session__item-date">
+							{{ node.date }}
+						</div>
+
+						<div class="session__item-dot"></div>
+
+						<div class="session__item-name">
+							{{ node.name }}
+						</div>
+					</div>
+				</div>
+			</container>
+		</div>
+	</layout>
+</template>
+
+<page-query>
+query Blog {
+	pp: allPairProgrammingSession(order: DESC) {
+		edges {
+			node {
+				id
+				name
+				date
+			}
+		}
+	}
+}
+</page-query>
+
+<script>
+import Container from "../layouts/Container";
+
+export default {
+	name: "Session",
+	components: {
+		Container
+	}
+}
+</script>
+
+<style lang="sass">
+.session
+	&__heading
+		text-align: center
+		margin-top: 3rem
+		margin-bottom: 2rem
+
+	&__list-item
+		border-radius: 20px
+		padding: .5rem 1rem
+		display: flex
+		align-items: center
+
+		&:hover
+			background-color: rgba(32, 33, 36, 0.039)
+
+.session__item
+	&-dot
+		margin-left: 1rem
+		margin-right: 1rem
+		background-color: #00ADB5
+		width: 12px
+		height: 12px
+		border-radius: 6px
+
+	&-name
+		font-weight: bold
+</style>