Skip to content

Instantly share code, notes, and snippets.

View pdevito3's full-sized avatar

Paul DeVito pdevito3

View GitHub Profile
@mjbalcueva
mjbalcueva / calendar.tsx
Last active June 11, 2024 05:46
shadcn ui calendar custom year and month dropdown
"use client"
import * as React from "react"
import { buttonVariants } from "@/components/ui/button"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { cn } from "@/lib/utils"
import { ChevronLeft, ChevronRight } from "lucide-react"
import { DayPicker, DropdownProps } from "react-day-picker"
@tanishqsh
tanishqsh / DOBPicker.tsx
Created July 3, 2023 03:54
DOB Calendar
/**
/DOBPicker.tsx
**/
'use client';
import * as React from 'react';
import { format, subYears } from 'date-fns';
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';
Common "no reply" emails, EXCEPT google docs notifications (which I actually want)
<apps:property name='hasTheWord' value='from:(noreply OR no-reply OR donotreply) -docs.google.com' />
Common app & service notifications
<apps:property name='hasTheWord' value='has joined your Personal Meeting Room' />
<apps:property name='from' value='no-reply@zoom.us' />
<apps:property name='from' value='venmo@venmo.com' />
<apps:property name='from' value='donotreply@godaddy.com' />
<apps:property name='from' value='no_reply@email.apple.com' />
<apps:property name='from' value='no-reply@dropbox.com' />
@mjackson
mjackson / composing-route-in-react-router-v6.md
Last active June 21, 2024 01:54
Notes on route composition in React Router v6, along with a suggested improvement you can make today to start upgrading

Composing <Route> in React Router v6

Composition of <Route> elements in React Router is changing in v6 from how it worked in v4/5 and in Reach Router. React Router v6 is the successor of both React Router v5 and Reach Router.

This document explains our rationale for making the change as well as a pattern you will want to avoid in v6 and a note on how you can start preparing your v5 app for v6 today.

Background

In React Router v5, we had an example of how you could create a element](https://github.com/remix-run/react-router/blob/320be7afe44249d5c025659bc00c3276a19f0af9/packages/react-router-dom/examples/Auth.js#L50-L52) to restrict access to certain routes on the page. This element was a simple [wrapper around an actual element that made a simple decision: is the user authenticated or not? If so, ren

@davidfowl
davidfowl / .NET6Migration.md
Last active June 16, 2024 05:29
.NET 6 ASP.NET Core Migration
@arkada38
arkada38 / AAA.md
Last active February 4, 2024 14:39
Using Tailwind CSS v3.2 with Blazor (.Net 6 or above)

Using Tailwind CSS v3.2 with Blazor (.Net 6 or above)

This method works for Blazor Server and Blazor WebAssembly with hot reload, style isolation and tailwind jit compilation.

Setup with using Standalone Tailwind CSS CLI without Node.js

For this method you need added to path Tailwind CSS CLI binary. Read more about Standalone CLI.

Just create a StaticAssets folder in the root of your project with next structure.

@tannerlinsley
tannerlinsley / createCrudHooks.js
Created November 29, 2020 06:39
A naive, but efficient starter to generate crud hooks for React Query
export default function createCrudHooks({
baseKey,
indexFn,
singleFn,
createFn,
updateFn,
deleteFn,
}) {
const useIndex = (config) => useQuery([baseKey], indexFn, config)
const useSingle = (id, config) =>
@tannerlinsley
tannerlinsley / README.md
Last active April 12, 2024 17:04
Replacing Create React App with the Next.js CLI

Replacing Create React App with the Next.js CLI

How dare you make a jab at Create React App!?

Firstly, Create React App is good. But it's a very rigid CLI, primarily designed for projects that require very little to no configuration. This makes it great for beginners and simple projects but unfortunately, this means that it's pretty non-extensible. Despite the involvement from big names and a ton of great devs, it has left me wanting a much better developer experience with a lot more polish when it comes to hot reloading, babel configuration, webpack configuration, etc. It's definitely simple and good, but not amazing.

Now, compare that experience to Next.js which for starters has a much larger team behind it provided by a world-class company (Vercel) who are all financially dedicated to making it the best DX you could imagine to build any React application. Next.js is the 💣-diggity. It has amazing docs, great support, can grow with your requirements into SSR or static site generation, etc.

So why

@CodebyOmar
CodebyOmar / icon-with-badge-tailwind.html
Last active July 10, 2023 06:53
Place a badge that show notification numbers or number of items in a cart at top right of an icon with tailwindcss
<button class="py-4 px-1 relative border-2 border-transparent text-gray-800 rounded-full hover:text-gray-400 focus:outline-none focus:text-gray-500 transition duration-150 ease-in-out" aria-label="Cart">
<svg class="h-6 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
<path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
</svg>
<span class="absolute inset-0 object-right-top -mr-6">
<div class="inline-flex items-center px-1.5 py-0.5 border-2 border-white rounded-full text-xs font-semibold leading-4 bg-red-500 text-white">
6
</div>
</span>
</button>
@alexanderbluhm
alexanderbluhm / testimonial.js
Created June 3, 2020 14:06
TailwindCSS - Minimalistic Testimonial
export const Testimonial = () => (
<div className="grid grid-cols-1 gap-4 md:grid-cols-3">
<div>
<img
className="mx-auto h-12 w-12 object-cover rounded-full"
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
alt="John"
/>
<div className="pt-2 pb-4 px-4 -mt-6 flex flex-col justify-between bg-gray-50 rounded-md space-y-2">
<div className="mt-6 space-y-2 text-center">