Skip to content

Instantly share code, notes, and snippets.

Avatar
😀
Always available

Ekene Eze kenny-io

😀
Always available
View GitHub Profile
View 1-index.tsx
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}
View cloudinary-supabase-register-use.js
//components/RegiterUser.js
import { useState } from "react";
import { Form, Button } from "react-bootstrap";
import { supabase } from "../utils/Utils";
const initialState = {
firstName: "",
lastName: "",
email: "",
avatar: "",
View minified-style.css
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}
View style.css
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%;
View bootstrapvue-update-helloworld.js
//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"
View bootstrapvue-app.js
//App.vue
<template>
<div id="app">
<Navbar />
<HelloWorld/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
View bootstrapvue-helloworld.js
//src/components/HelloWorld.vue
<template>
<div>
<Cards />
</div>
</template>
<script>
import Cards from './Cards.vue'
View bootstrapvue-card.js
//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"
View bootstrapvue-navbar.js
//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 -->
View bootstrapvue-main.js
//src/main.js
import Vue from 'vue'
import App from './App.vue'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)
Vue.config.productionTip = false