Skip to content

Instantly share code, notes, and snippets.

View danieljpgo's full-sized avatar
🚀
raising the bar

Daniel Jorge danieljpgo

🚀
raising the bar
View GitHub Profile
function MenuIcon() {
return (
<svg
overflow="visible"
preserveAspectRatio="none"
className="h-6 w-6 origin-center"
viewBox="0 0 4 4"
stroke="currentColor"
strokeWidth="2"
>
"use client";
import { useHydrated } from "~/hooks/use-hydrated";
export function ClientOnly({ children }: React.PropsWithChildren) {
const hydrated = useHydrated();
return hydrated ? children : null;
}
import * as React from "react";
import { cxm } from "ui/lib/cva";
const speeds = {
slow: "40s",
fast: "20s",
} as const;
const directions = {
import { type ImageProps, getImageProps } from "next/image";
type DynamicImageProps = Omit<React.ComponentProps<"img">, "src"> & {
alt: string;
src: ImageProps["src"];
srcMobile: ImageProps["src"];
srcTablet: ImageProps["src"];
srcDesktop: ImageProps["src"];
priority?: ImageProps["priority"];
quality?: ImageProps["quality"];
export type ObjectValues<T> = T[keyof T];
export type LooseAutocomplete<T extends string> = T | Omit<string, T>;
export type PropsFrom<Component> = Component extends React.FunctionComponent<
infer Props
>
? Props
: never;
export function useSupportWebGL() {
const [hasWebGLSupport, setHasWebGLSupport] = useState<boolean>();
useEffect(() => {
const canvas = window.document.createElement('canvas');
try {
const gl = canvas.getContext('webgl');
if (gl === null) throw new Error('not supported');
gl.getSupportedExtensions();
setHasWebGLSupport(true);
@danieljpgo
danieljpgo / useForm.ts
Created January 7, 2023 20:42
react-hook-form + zod
import {
useForm as useHookForm,
UseFormProps as useHookFormProps,
} from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { TypeOf, ZodSchema } from "zod";
interface UseFormProps<Z extends ZodSchema>
extends Exclude<useHookFormProps<TypeOf<Z>>, "resolver"> {
schema: Z;
@danieljpgo
danieljpgo / tailwind.config.js
Created November 2, 2022 21:58
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
// "./src/app/**/*.{js,ts,jsx,tsx}",
// "./src/pages/**/*.{js,ts,jsx,tsx}",
// "./src/components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
screens: {
@danieljpgo
danieljpgo / .lib
Last active November 2, 2022 05:06
/lib
Lib folder that every project needs
@danieljpgo
danieljpgo / Auth.tsx
Created August 31, 2022 19:13
Render Prop example
import { useAuth } from '~/hooks';
type AuthProps = {
children: ({ auth }: { auth: ReturnType<typeof useAuth> }) => JSX.Element;
};
export default function Auth(props: AuthProps) {
const auth = useAuth();
return props.children({ auth });
};