Skip to content

Instantly share code, notes, and snippets.

View mhaecal's full-sized avatar

Muhaecal D. Khatami mhaecal

View GitHub Profile
@mhaecal
mhaecal / AdminLayout.vue
Created August 7, 2022 07:30
Vue Router Layout System
<script setup lang="ts"></script>
<template>
<h1>admin layout</h1>
<router-view></router-view>
</template>
@mhaecal
mhaecal / ArrowIcon.tsx
Last active August 7, 2022 05:33
Carousel Slider with React Splidejs + Tailwind CSS
import React from 'react'
function ArrowIcon() {
return (
<svg
width="7"
height="12"
viewBox="0 0 7 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
@mhaecal
mhaecal / index.vue
Last active July 31, 2023 02:36
Vue 3 Form Validation with Vee Validate + Yup
<script setup lang="ts">
import { Form, Field, ErrorMessage } from 'vee-validate'
import * as yup from 'yup'
const schema = yup.object().shape({
email: yup
.string()
.email('Email tidak valid')
.required((data) => `${data.path} harus diisi`),
password: yup
@mhaecal
mhaecal / _app.tsx
Last active July 23, 2022 09:05
Nextjs Multiple Layouts
import '../styles/globals.css'
import type { AppProps } from 'next/app'
import type { NextPage } from 'next'
import type { ReactElement, ReactNode } from 'react'
export type NextPageWithLayout = NextPage & {
getLayout?: (page: ReactElement) => ReactNode
}
type AppPropsWithLayout = AppProps & {
@mhaecal
mhaecal / middleware.ts
Created July 19, 2022 08:25
Protected Routes Middleware NextJS 12
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
export function middleware(req: NextRequest) {
// get cookie token
const hasToken = req.cookies.get('token')
// protected routes (admin routes)
if (req.nextUrl.pathname.startsWith('/admin')) {
if (hasToken) {
@mhaecal
mhaecal / index.js
Created June 18, 2022 08:49
onClick Child Component to Fire a function in Parent Component (onClink Props React)
const { useState } = React;
function PageComponent() {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1)
}
return (
<div className="App">
@mhaecal
mhaecal / index.md
Created June 13, 2022 15:34
Checkbox w/ Custom Background Image (Tailwind)
@mhaecal
mhaecal / index.js
Created June 7, 2022 14:16
Sort JavaScript Array of Objects Numerically / Alphabetically
items.sort(function(a, b) {
return a.id - b.id || a.name.localeCompare(b.name);
});
@mhaecal
mhaecal / App.tsx
Last active February 20, 2022 04:47
React Router 6
import React from 'react'
import { Outlet } from 'react-router-dom'
export default function App() {
return <Outlet />
}
@mhaecal
mhaecal / App.tsx
Created February 19, 2022 04:32
RTK Query with TypeScript
import React, { useState } from 'react'
import {
useGetPokemonByIdQuery,
useGetPokemonByNameQuery,
} from './services/pokemon'
function App() {
const [id, setId] = useState<number>(5)
const [name, setName] = useState<string>('bulbasaur')