Skip to content

Instantly share code, notes, and snippets.

View pranotobudi's full-sized avatar

pranoto budi pranotobudi

19 followers · 143 following
View GitHub Profile
@pranotobudi
pranotobudi / Header.js
Last active October 13, 2021 07:32
blank Header
function Header(){
return (
<div> My Header Component.. </div>
)
}
export default Header
@pranotobudi
pranotobudi / index.js
Last active October 13, 2021 08:23
Import Header Component from index.js
import Head from "next/head";
import Header from "../components/Header";
export default function Home() {
return (
<div>
<Head>
<link rel="shortcut icon" href="/favicon.png" />
<title>Gophers Art Shop</title>
</Head>
@pranotobudi
pranotobudi / index.js
Created October 13, 2021 08:35
replace favicon
<Head>
<link rel="shortcut icon" href="/favicon.png" />
<title>Gophers Art Shop</title>
</Head>
@pranotobudi
pranotobudi / global.css
Created October 13, 2021 08:37
tailwind settings
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.link {
@apply cursor-pointer hover:underline;
}
.button {
@apply p-2 text-xs md:text-sm bg-gradient-to-b from-yellow-200 to-yellow-400 border border-yellow-300 rounded-sm focus:outline-none focus:ring-2 focus:ring-yellow-500 active:from-yellow-500;
@pranotobudi
pranotobudi / Header.js
Last active October 13, 2021 08:40
import Image from "next/image";
import {
MenuIcon,
SearchIcon,
ShoppingCartIcon,
} from "@heroicons/react/outline";
function Header(){
return (
@pranotobudi
pranotobudi / index.js
Created October 13, 2021 08:46
initial page
import Head from 'next/head'
export default function Home() {
return (
<div>
<Head>
<title>Gophers Art Shop</title>
</Head>
Header..
<main className="max-w-screen-2xl mx-auto">
{/* Product List */}
@pranotobudi
pranotobudi / tailwind.config.js
Last active October 13, 2021 23:31
purge: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
@pranotobudi
pranotobudi / Product.js
Created October 14, 2021 09:09
ecommerce - part 04
import { StarIcon } from "@heroicons/react/solid";
import Image from "next/image";
function Product({id, title, price, description, category, image, rating}){
return (
<div className="relative flex flex-col m-5 bg-white z-30 p-10">
<Image src={image} height={200} width={200} objectFit="contain" />
<h4 className="my-3 self-center">{title}</h4>
@pranotobudi
pranotobudi / ProductContainer.js
Created October 14, 2021 09:10
ecommerce - part 4
import Product from "./Product"
function ProductContainer({ productLists }){
return(
<div className="grid grid-flow-row-dense md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mx-auto">
{productLists.slice(0,productLists.length).map(({id, title, price, description, category, image})=>(
<Product
key = {id}
id = {id}
title = {title}
@pranotobudi
pranotobudi / global.css
Created October 14, 2021 09:13
ecommerce - part 4
@layer components {
.link {
@apply cursor-pointer hover:underline;
}
.button {
@apply p-2 text-xs md:text-sm bg-gradient-to-b from-yellow-200 to-yellow-400 border border-yellow-300 rounded-sm focus:outline-none focus:ring-2 focus:ring-yellow-500 active:from-yellow-500;
}
}