Skip to content

Instantly share code, notes, and snippets.

View adevinwild's full-sized avatar
🧙‍♂️
Looking for new opportunities!

adil adevinwild

🧙‍♂️
Looking for new opportunities!
View GitHub Profile
@adevinwild
adevinwild / file-upload.tsx
Last active March 7, 2024 10:39
A simple and reusable file upload component made for React with TailwindCSS
import { useRef, useState, type ChangeEvent, type DragEvent } from "react";
import { cn } from "~/lib/utils";
type FileUploadProps = {
onUpload?: (_files: File[]) => void;
accept: string[];
error?: string;
className?: string;
multiple?: boolean;
text?: React.ReactElement | string;
@adevinwild
adevinwild / tailwind.config.js
Created February 26, 2024 14:28
Animated your icons SVGs with a simple keyframe
/** @type {import('tailwindcss').Config} */
export default {
// Other values...
theme: {
extend: {
keyframes: {
svg: {
from: {
strokeDasharray: "1000",
strokeDashoffset: "1000",
@adevinwild
adevinwild / animated-number-display.tsx
Last active February 26, 2024 10:24
An animated number made with Framer Motion and TailwindCSS
import { memo, useEffect, useRef, useState } from 'react'
import { useAnimate } from 'framer-motion'
import { cn } from '~/utils/cn'
/**
* @name AnimatedNumberDisplay
* @description A component that animates a number from an initial value to a new value
*
* @param {Object} props - The options for the component
* @param {string | number} props.initialValue - The initial value of the number
@adevinwild
adevinwild / stepper.tsx
Created February 22, 2024 20:19
A simple Stepper made with TailwindCSS, you'll need `tailwind-merge` and `clsx` (`cn` function we can found for example inside `shadcn/ui`)
"use client";
import React, {
Fragment,
createContext,
useContext,
type HTMLAttributes,
type ReactNode,
} from "react";
@adevinwild
adevinwild / scroll-area.tsx
Last active February 4, 2024 09:42
A shadcn/ui like scroll area that adds a little gradient inside the list with TailwindCSS
import clsx from "clsx";
import {
useEffect,
useRef,
useState,
type HTMLAttributes,
type ReactNode,
type RefObject,
} from "react";
@adevinwild
adevinwild / link-with-before-unload.tsx
Created January 30, 2024 13:59
A component to override the Next.js 13+ Link App Router component to block internal changes based on a URL parameter.
@adevinwild
adevinwild / dev-indicator.tsx
Created December 31, 2023 07:24
A simple dev indicator for React using TailwindCSS
const isDev = process.env.NODE_ENV === "development";
const DevIndicator = () => {
if (!isDev) {
return null;
}
return (
<>
<div className="w-full h-full fixed ring-4 opacity-80 ring-orange-300 ring-inset z-[9999]"></div>
@adevinwild
adevinwild / react-quick-classname.code-snippets
Created October 6, 2023 13:16
VSCode - Quickly add React className attribute
{
"Add React className": {
"scope": "javascript,javascriptreact,typescriptreact",
"prefix": "cn",
"body": [
"className='${1}'"
],
"description": "Quickly add a React className attribute"
}
}
@adevinwild
adevinwild / server-cli.ts
Last active January 26, 2023 13:32
Handle medusa.js insertion inside a table without the medusa-cli
import { User, UserRoles } from '@medusajs/medusa'
import { CreateUserInput } from '@medusajs/medusa/dist/types/user'
import { validateEmail } from '@medusajs/medusa/dist/utils/is-email'
import arg from 'arg'
import Scrypt from 'scrypt-kdf'
import { getConnection, Repository } from 'typeorm'
type ArgOption = {
createUser?: boolean
@adevinwild
adevinwild / store.entity.ts
Created December 29, 2022 18:59
ExtendedStoreEntity for Medusa
import { Store as MedusaStore } from "@medusajs/medusa/dist";
import { Column, Entity, JoinColumn, OneToMany } from "typeorm";
import { Entity as MedusaEntity } from "medusa-extender";
import { User } from "../../user/entities/user.entity";
import { ProductVariant } from "../../product-variant/entities/product-variant.entity";
@MedusaEntity({ override: MedusaStore })
@Entity()
export class Store extends MedusaStore {
@OneToMany(() => User, (user) => user.store)