Skip to content

Instantly share code, notes, and snippets.

View Thisisjuke's full-sized avatar
📦
TypeScript, Coffee & Cats

Liège Arthur Thisisjuke

📦
TypeScript, Coffee & Cats
  • Wizards Technologies
  • Paris
View GitHub Profile
@Thisisjuke
Thisisjuke / Editor.stories.tsx
Last active February 11, 2025 02:16
EditorJS component to easily create custom Blocks/Tool with Typescript and React (usable in NextJS)
import type { Meta, StoryObj } from '@storybook/react'
import { useState } from 'react'
import type { OutputData } from '@editorjs/editorjs'
import Editor from './Editor'
const meta: Meta<typeof Editor> = {
title: 'Components/Editor',
component: Editor,
tags: ['autodocs'],
@Thisisjuke
Thisisjuke / useAudioPlayer.tsx
Created July 10, 2023 10:30
Simple useAudioPlayer hook 🎵 to create a Music player from a Blob ⏯️
import { useEffect, useRef, useState } from 'react'
function useAudioPlayer() {
const audioContextRef = useRef<AudioContext | null>(null)
const sourceRef = useRef<AudioBufferSourceNode | null>(null)
const [isPlaying, setIsPlaying] = useState<boolean>(false)
const [audioBlob, setAudioBlob] = useState<Blob | null>(null)
const [totalTime, setTotalTime] = useState<number>(0)
const createAudioSource = (): void => {
@Thisisjuke
Thisisjuke / Actions.tsx
Created June 19, 2023 20:15
Actions : a custom Component to use as Action inside Tanstack Table using <Sheet /> from Shadcn
import { MoreHorizontal } from 'lucide-react'
import { useState } from 'react'
import Link from 'next/link'
import type { MyResourceType } from '@shared/interfaces/my-resource'
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
@Thisisjuke
Thisisjuke / BigModal.tsx
Created June 19, 2023 20:09
BigModal : a full-height modal with disabled exit to edit content easily using Shadcn-UI
import type { ReactNode } from 'react'
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from '@/modules/design-system/primitives/Dialog'
@Thisisjuke
Thisisjuke / ResourceDeletion.tsx
Last active September 25, 2023 08:52
ValidationPanel : a custom Component to handle form submission or action validation using Shadcn <Sheet />
import React from 'react'
import { Button } from '@/modules/design-system/primitives/Button'
import { deleteResourceById } from '@/modules/crud/queries/resource'
import { ValidationPanel } from '@/modules/design-system/components/SidePanel/SidePanel'
export interface ResourceDeletionProps {
resource: any
refetch: () => void
}