kenny-io

import type { NextPage } from "next";
import styles from "./categories.module.scss";
import BookCat from "../../assets/bookcat.png";
import Image from "next/image";
import BookIcon from "../../assets/3D.svg";

const Categories = () => {
  const categories = [
    {
      title: "Made By Experts",

kenny-io

import {ReactNode, useState} from "react";

export function Section({
                            children,
                            hideHeading,
                            className
                        }: { children?: ReactNode, className?: string, hideHeading?: boolean }) {
    return <div style={{padding: 64}} className={className}>
        {!hideHeading && <h1>My Hero</h1>}
        {children}

kenny-io

//components/RegiterUser.js

import { useState } from "react";
import { Form, Button } from "react-bootstrap";
import { supabase } from "../utils/Utils";
const initialState = {
  firstName: "",
  lastName: "",
  email: "",
  avatar: "",

kenny-io

h1{color:purple;font-family:"Gill Sans","Gill Sans MT",Calibri,"Trebuchet MS",sans-serif;font-size:5px;font-style:italic;animation:slidein 10s Linear Alternate Infinite}@keyframes slidein{from{margin-left:100%;width:300%}to{margin-left:0;width:100%}}#blonde{width:350px;height:350px;animation:blondie 5s Linear 2s infinite alternate;position:relative;display:inline-block}.box{width:200px;height:175px;padding-left:50px;padding-right:50px;padding-top:60px;padding-bottom:60px}p{font-family:"Lucida Sans","Lucida Sans Regular","Lucida Grande","Lucida Sans Unicode",Geneva,Verdana,sans-serif;font-size:12px;color:#fff;font-style:italic}

kenny-io

h1 {
  color: purple;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  font-size: 5px;
  font-style: italic;
  animation: slidein 10s Linear Alternate Infinite;
}
@keyframes slidein {
  from {
    margin-left: 100%;

kenny-io

//src/components/HelloWorld.vue
<template>
  <b-container>
    <div v-if="meals.length">
      <b-row>
        <div v-bind:key="data.index" v-for="data in meals">
          <b-col l="4">
            <b-card
              v-bind:title="data.strCategory"

kenny-io

//App.vue
<template>
  <div id="app">
    <Navbar />
    <HelloWorld/>
  </div>
</template>
<script>
 import HelloWorld from './components/HelloWorld.vue'

kenny-io

//src/components/HelloWorld.vue
<template>
  <div>
    <Cards />
  </div>
</template>

<script>
import Cards from './Cards.vue'

kenny-io

    //src/components/Cards.vue
    <template>
      <b-container>
        <div v-if="meals.length">
          <b-row>
            <div v-bind:key="data.index" v-for="data in meals">
              <b-col l="4">
                <b-card
                  v-bind:title="data.strCategory"

kenny-io

//src/components/Navbar.vue
<template>
    <div>
      <b-navbar toggleable="lg" type="dark" variant="success">
        <b-container>
            <b-navbar-brand href="#">Mealzers</b-navbar-brand>
            <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
            <b-collapse id="nav-collapse" is-nav>
              <!-- Right aligned nav items -->