Skip to content

Instantly share code, notes, and snippets.

View h-jennings's full-sized avatar

Hunter Jennings h-jennings

View GitHub Profile
@h-jennings
h-jennings / Tooltip.tsx
Last active June 4, 2024 17:24
Linear-style tooltip UX with Radix UI Primitives
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
import * as React from 'react';
import { twMerge } from 'tailwind-merge';
/**
* With this component, if the user moves the cursor between tooltip group, the
* delay is set to 0, this makes the next tooltip appear immediately.
*/
export const TooltipGroup = React.forwardRef<
HTMLDivElement,
const AudioPrimitiveContext = React.createContext<InterpreterFrom<
typeof audioMachine
> | null>(null);
export const AudioPrimitiveProvider = ({
children,
}: {
children?: React.ReactNode;
}) => {
const [machine] = React.useState(() => {
import { createVar, style } from '@vanilla-extract/css';
import { calc } from '@vanilla-extract/css-utils';
export const gridColumnCount = createVar();
export const gridItemMinWidth = createVar();
export const gridLayoutGapX = createVar();
export const gridLayoutGapY = createVar();
export const gapCount = createVar();
export const totalGapWidth = createVar();
export const gridItemMaxWidth = createVar();
@h-jennings
h-jennings / some-helpful-ts-utils.ts
Last active November 4, 2021 15:12
Helpful TS utils
type ArrayItemType<T extends unknown[]> = T extends unknown[]
? T extends (infer U)[]
? U
: never
: never;
type Entries<T> = {
[K in keyof T]: [K, T[K]];
}[keyof T][];
@h-jennings
h-jennings / karabiner.edn
Last active February 13, 2025 14:39
Karabiner edn file
;; ! | means mandatory
;; # | means optional
;; C | left_command
;; T | left_control
;; O | left_option
;; S | left_shift
;; F | fn
;; Q | right_command
;; W | right_control
;; E | right_option
@h-jennings
h-jennings / create-array-groups.ts
Last active October 24, 2020 14:14
function that creates a group of arrays with length limit given an array and a max array length (number)
function createArrayGroups(
data: any[],
maxArrayLength: number
): (any | any[])[] {
let array = [...data];
let groups: (any | any[])[] = [];
do {
groups.push(array.splice(0, maxArrayLength));
} while (array.length > 0);
@h-jennings
h-jennings / SketchSystems.spec
Last active October 1, 2020 14:59
Main Navigation
Main Navigation
nav_closed*
MOUSE_IN -> nav_open
nav_open
MOUSE_OUT -> nav_closed
Panel_One&
PANEL_CLICK -> panel_open
panel_closed*
panel_open
PANEL_CLICK -> panel_closed
@h-jennings
h-jennings / coc-settings.json
Last active October 5, 2022 19:13
Coc config
{
"suggest.noselect": false,
"coc.preferences.formatOnSaveFiletypes": [
"javascript",
"typescript",
"typescriptreact",
"json",
"javascriptreact",
"typescript.tsx",
"scss",
MWR_PANEL*
IDLE*
click -> FETCHING_DATA
fetch -> FETCHING_DATA
FETCHING_DATA
success -> COMPONENT_HYDRATED
fail -> ERROR
ERROR
retry -> FETCHING_DATA
COMPONENT_HYDRATED
@h-jennings
h-jennings / react-btn-w-icon.jsx
Last active June 17, 2020 12:23
Button in react, with icon component
import React, { ReactNode } from 'react';
type ButtonVariants = 'orange' | 'light';
interface ButtonProps {
children: ReactNode;
variant?: ButtonVariants;
icon?: ReactNode;
clickFn?: () => any;
}