rajatk16

<script>
import firebase from 'firebase'
import { db } from '../main'

export default {
  name: 'Comics',
  data () {
    return {
      comics: [],
      name: '',

rajatk16

<template>
  <div>
    <button class="button logout" v-on:click="logout">Logout</button>
    <article class="covers" v-for="(comic, idx) in comics" :key="idx">
      <div>
        <img style="margin: 10px" :src="comic.image" height="291px" width="192px">
        <p >{{ comic.name }}</p>
        <hr>
        <button class="button" @click="deleteComic(comic.id)">
          Delete

rajatk16

export default [
  {
    "id": 1,
    "title": "Captain America: The First Avenger",
    "year": 2011,
    "rating": 6.9,
    "details": "Steve Rogers, a rejected military soldier transforms into Captain America after taking a dose of a Super-Soldier serum. But being Captain America comes at a price as he attempts to take down a war monger and a terrorist organization.",
    "director": "Joe Johnston",
    "starring": "Chris Evans, Hugo Weaving, Samuel L. Jackson, Hayley Atwell",
    "gross": "$176.65M",

rajatk16

import React, {Component} from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import Head from 'next/head';
import {
  PRIMARY_COLOR,
  PRIMARY_COLOR_TWO,
  PRIMARY_COLOR_THREE,
  ACCENT_COLOR_ONE,
  ACCENT_COLOR_TWO,

rajatk16

<span id="mainPage">
  <div class="row">
    <div class="col-1"></div>
    <div class="col-10 text-center">
      <h1>Welcome!</h1>
    </div>
    <div class="col-1"></div>
  </div>
</span>

rajatk16

<div class="collapse navbar-collapse" id="navbarSupportedContent">
  <ul class="navbar-nav mr-auto">
    <li class="nav-item active" data-route="#">
      <a class="nav-link" href="#">Home</a>
    </li>
    <li class="nav-item active" data-route="#">
      <a class="nav-link" href="#">Messages</a>
    </li>
    <li class="nav-item active" data-route="#">
      <a class="nav-link" href="#">Notifications</a>

rajatk16

  <div class="container container-fluid">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">A Simple Login Page with JWT Authentication</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    </nav>
  </div>

rajatk16

columns: {
  'column-1': {
    id: 'column-1',
    title: "Heroes",
    heroId: []    
  },
  'column-2': {
    id: 'column-2',
    title: 'Alive',
    heroId: [],

rajatk16

const data = {
  heroes: {
    'hero-1': {id: 'hero-1', name: 'Iron Man'},
    'hero-2': {id: 'hero-2', name: 'Thor'},
    'hero-3': {id: 'hero-3', name: 'Hulk'},
    'hero-4': {id: 'hero-4', name: 'Captain America'},
    'hero-5': {id: 'hero-5', name: 'Black Widow'},
    'hero-6': {id: 'hero-6', name: 'Dr. Strange'},
    'hero-7': {id: 'hero-7', name: 'War Machine'},
    'hero-8': {id: 'hero-8', name: 'Spider Man'},

rajatk16

{
  "rebirth": [
    {
      "id": "1",
      "name": "DC Comics Rebirth",
      "description": "It all begins here. Do not skip to the last page. Do not let a friend or message board ruin this comic for you. The future (and past) of the DC Universe starts here. Don’t say we didn’t warn you!",
      "image": "https://www.dccomics.com/sites/default/files/styles/covers192x291/public/comic-covers/2016/05/DCUREB_Cv1_ds_300dpi_cropped_5743b270aaaae3.39723701.jpg?itok=JpNJJ2_O",
      "price": "$2.99"
    },
    {