Skip to content

Instantly share code, notes, and snippets.

Avatar

William Chuloo

View GitHub Profile
@Chuloo
Chuloo / lens.vue
Created Mar 31, 2022
Product image zoom lens
View lens.vue
<template>
<div>
<p class="text-center text-4xl text-gray-900 font-bold mt-8 pt-8">
E-commerce product image zoom lens in Nuxtjs
</p>
</div>
</template>
<script>
@Chuloo
Chuloo / comment.vue
Created Mar 29, 2022
Single comment box
View comment.vue
<template>
<div class="comment">
<div class="comment__flex">
<p>I found this article helpful</p>
<div class="comment__flex-btn">
<button class="update">Update</button>
<button class="del">Delete</button>
</div>
</div>
View homepage.vue
<template>
<div class="container">
<Blog />
</div>
</template>
<script>
import Blog from '@/components/Blog.vue';
export default {
@Chuloo
Chuloo / blogpage.vue
Last active Mar 29, 2022
A sample blog page
View blogpage.vue
<template>
<section class="section">
<div class="section__details">
<div class="section__details-info">
<h1>{{ title }}</h1>
<div class="section__details-img">
<img
src="https://res.cloudinary.com/terieyenike/image/upload/v1644896156/vvasmj6onychxlkkynua.png"
alt="anime character"
/>
@Chuloo
Chuloo / preview.jsx
Created Mar 9, 2022
Autoplay a video preview on hover in React.js
View preview.jsx
const Home = () => {
const media_urls = [
{
id: 1,
title: 'Video One',
video_url:
'https://res.cloudinary.com/chris101/video/upload/v1645684691/video_1.mp4',
},
{
@Chuloo
Chuloo / home.jsx
Created Oct 31, 2021
Home component for a live-stream simulation player
View home.jsx
import Head from "next/head";
import React, { useState } from "react";
import { MemoizedVideoPlayer } from "../component/video-player";
import styles from "../styles/Home.module.css";
const Home = () => {
const [startTime, setStartTime] = useState(1633538276355);
const [controls, setControls] = useState(true);
const [ended, setEnded] = useState(false);
const [duration, setDuration] = useState(null);
@Chuloo
Chuloo / post-checkout.js
Created Oct 28, 2021
Post checkout page template for shoppable video
View post-checkout.js
import router from "next/router";
export default function Checkout() {
return (
<div
style={{
display: "flex",
justifyContent: "center",
}}
>
View video-skit-maker-transformations.jsx
import React, { useState } from "react";
import { Helmet } from "react-helmet";
import TransformVideo from "../components/video";
const App = () => {
const [videoPublicId, setVideoPublicId] = useState("");
const [alt, setAlt] = useState("");
const [audioPublicId, setAudioPublicId] = useState("");
const [textValue, setTextValue] = useState(" ");
const [color, setColor] = useState("green");
@Chuloo
Chuloo / product_data.js
Created Jul 4, 2021
Shoppable video product data
View product_data.js
const data = [
{
id: "forest_bike",
name: "Forest Bike",
imageUrl:
"https://res.cloudinary.com/dwbggi96z/image/upload/v1622914696/0efbcdf473436391b6a5a731a000fadc_rs6z0z.jpg",
price: "$400",
},
{
@Chuloo
Chuloo / sea_turtle.js
Created Jul 4, 2021
Shoppable video configuration for a sea turtle
View sea_turtle.js
var sea_turtle = {
shoppable: {
showPostPlayOverlay: true,
transformation: {
crop: "pad",
aspect_ratio: "1",
},
products: [
{
productId: 1,