Skip to content

Instantly share code, notes, and snippets.

View Ebrahim-Ramadan's full-sized avatar

Ebrahim Ramadan Ebrahim-Ramadan

26 followers · 73 following
View GitHub Profile
@Ebrahim-Ramadan
Ebrahim-Ramadan / page.ts
Created September 21, 2024 16:26
control a React component with the URL
export default function Home() {
let searchParams = useSearchParams();
let [search, setSearch] = useState(searchParams.get('search') ?? '');
let { data, isPlaceholderData } = useQuery({
queryKey: ['people', search],
queryFn: async () => {
let res = await fetch(`/api/people?search=${search}`);
let data = await res.json();
@Ebrahim-Ramadan
Ebrahim-Ramadan / route.ts
Last active September 20, 2024 11:46
Server-Sent Events (SSE) endpoint to stream data every 500 ms (nextjs api endpoint)
import { NextRequest, NextResponse } from 'next/server';
import { words } from './words';
export const dynamic = 'force-dynamic';
const getRandomWord = () => {
const randomIndex = Math.floor(Math.random() * words.length);
return words[randomIndex];
};
@Ebrahim-Ramadan
Ebrahim-Ramadan / geolocation.js
Created September 13, 2024 11:14
Geolocation helper function for nextjs server components
import { headers } from "next/headers";
export function geoLocation() {
const headersList = headers();
return {
ip: headersList.get("x-real-ip"),
country: headersList.get("x-vercel-ip-country"),
city: headersList.get("x-vercel-ip-city"),
};
}
@Ebrahim-Ramadan
Ebrahim-Ramadan / util-copy.ts
Created September 9, 2024 04:06
Clipboard API's limited support for image formats. As of now, it primarily supports PNG and JPEG formats, so we make sure you properly handle the canvas.toBlob() method to update the pngBlob. Ensure that the clipboard write operation supports PNG format after conversion
export const copyToClipboard = async (dataUrl: string) => {
try {
// Convert the Data URL to a Blob
const response = await fetch(dataUrl);
const blob = await response.blob();
// Check if the image is in a supported format, convert if necessary
let pngBlob = blob;
if (blob.type !== 'image/png') {
@Ebrahim-Ramadan
Ebrahim-Ramadan / utils.js
Created August 26, 2024 19:23
partial text search in firebase (the impossible task lol)
export const updateDocumentsWithVinyls = async () => {
try {
const collectionRef = collection(db, 'frames');
const querySnapshot = await getDocs(collectionRef);
for (const docSnapshot of querySnapshot.docs) {
const documentData = docSnapshot.data();
// Check if the document has a 'keywords' field and it's a comma-separated string
@Ebrahim-Ramadan
Ebrahim-Ramadan / TopLoadingIndicator.jsx
Created August 12, 2024 11:23
// components/TopLoadingIndicator.js
import { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
const TopLoadingIndicator = () => {
const router = useRouter();
const [loading, setLoading] = useState(false);
useEffect(() => {
const handleStart = () => {
@Ebrahim-Ramadan
Ebrahim-Ramadan / use-debounce.js
Created August 11, 2024 21:17
simple use debounce hook in react
import * as React from "react"
export function useDebounce(
value
delay
callback
) {
const [debouncedValue, setDebouncedValue] = React.useState(value)
React.useEffect(() => {
@Ebrahim-Ramadan
Ebrahim-Ramadan / getCookie.js
Created August 9, 2024 19:11
just a simple implementation for js-cookie alternative
// Function to get a cookie
function getCookie(name) {
const nameEQ = name + "=";
const ca = document.cookie.split(';');
for (let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) === ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) === 0) return JSON.parse(c.substring(nameEQ.length, c.length));
}
return null;
@Ebrahim-Ramadan
Ebrahim-Ramadan / sentry-feedback.tsx
Created July 4, 2024 20:23 — forked from t3dotgg/sentry-feedback.tsx
"use client";
import { useAuth } from "@clerk/nextjs";
import * as Sentry from "@sentry/nextjs";
import { useEffect, useState } from "react";
function createWidget() {
return Sentry.getFeedback()?.createWidget();
}
@Ebrahim-Ramadan
Ebrahim-Ramadan / ThreeDPhotoCarousel.jsx
Created June 19, 2024 19:17
3d carousel (local pics) react component
'use client'
import React, { useState, useEffect } from "react";
import { motion, useAnimation, useMotionValue, useTransform } from "framer-motion";
import Image from "next/image";
import { RightArrow } from "../globals/Icons";
const images = [];
for (let i = 1; i <= 14; i++) {
images.push(import(`@/assets/quick-carousel/${i}.webp`).then(module => module.default));
}