Skip to content

Instantly share code, notes, and snippets.

View YDrogen's full-sized avatar
🎯
Focusing

YDrogen YDrogen

🎯
Focusing
View GitHub Profile
@YDrogen
YDrogen / point-plugin.ts
Last active January 29, 2024 10:27
Kysely Point Plugin that transform weird point to normal MySQL point
import type {
KyselyPlugin,
PluginTransformQueryArgs,
PluginTransformResultArgs,
QueryResult,
RootOperationNode,
UnknownRow,
} from 'kysely';
type SomeObject = {
@YDrogen
YDrogen / TailwindIndicator.tsx
Created November 22, 2023 10:50
A simple React component to use with Tailwind that shows the current breakpoint value
export function TailwindIndicator() {
return process.env.NODE_ENV === 'production' ? undefined : (
<div className='fixed bottom-1 right-1 z-50 flex h-6 w-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-white'>
<div className='block sm:hidden'>{'xs'}</div>
<div className='hidden sm:block md:hidden'>{'sm'}</div>
<div className='hidden md:block lg:hidden'>{'md'}</div>
<div className='hidden lg:block xl:hidden'>{'lg'}</div>
<div className='hidden xl:block 2xl:hidden'>{'xl'}</div>
<div className='hidden 2xl:block'>{'2xl'}</div>
</div>
@YDrogen
YDrogen / ThemeProvider.tsx
Last active November 22, 2023 11:26
A React theme provider which stores the current theme in the localStorage
import { createContext, useContext, useEffect, useMemo, useState } from 'react';
type Theme = 'system' | 'light' | 'dark';
type ThemeProviderProps = {
readonly children: React.ReactNode;
readonly defaultTheme?: Theme;
readonly storageKey?: string;
};