Felix Lu lumpinif

🎯

Focusing

A Machine Learner

Eronred / AirbnbImageAnimation

Created June 5, 2024 13:33

Airbnb animated images

	import { motion } from 'framer-motion'
	import React from 'react'

	const images = [
	{
	src: 'https://a0.muscache.com/im/pictures/miso/Hosting-2810308/original/a653d85a-1a97-45d7-a213-78ef2286122a.jpeg?im_w=720',
	alt: 'Tree'
	},
	{
	src: 'https://a0.muscache.com/im/pictures/2cc58022-2004-4034-a281-22fb622e7461.jpg?im_w=720',

ajayvignesh01 / Tweet.tsx

Created February 24, 2024 06:03

A Tiptap extension to embed Tweets

	import { NodeViewProps, NodeViewWrapper } from '@tiptap/react'
	import { nodePasteRule, ReactNodeViewRenderer } from '@tiptap/react'
	import { mergeAttributes, Node } from '@tiptap/core'
	import { Tweet } from 'react-tweet'

	export const TweetComponent = ({ node }: NodeViewProps) => {
	const url = node.attrs.url
	const tweetIdRegex = /\/status\/(\d+)/g
	const id = tweetIdRegex.exec(url)?.[1]

devongovett / carousel-pagination.tsx

Created December 9, 2023 21:20

	import {ChevronLeft, ChevronRight} from 'lucide-react';
	import {useEffect, useState} from 'react';

	export function Pagination({carousel}: {carousel: HTMLElement}) {
	// Scroll by 1 page in the given direction (-1 or +1).
	// This uses the width of the carousel minus the padding and gap between items.
	// Use behavior: 'smooth' and the browser will animate the scrolling.
	let scroll = (dir: number) => {
	let style = window.getComputedStyle(carousel);
	carousel.scrollBy({