Muzammil-cyber

"use client";

import { KeyTextField } from "@prismicio/client";
import { useEffect, useRef, useState } from "react";

type VideoProps = {
  youTubeID: KeyTextField;
};

export function LazyYouTubePlayer({ youTubeID }: VideoProps) {

Muzammil-cyber

"use client";
import { cn } from "@/libs/utils";
import gsap from "gsap";
import ScrollTrigger from "gsap/dist/ScrollTrigger";
import { useWindowSize } from "hamo";
import { useEffect, useRef } from "react";
// use tailwind for styling
export function Parallax({
  className = "",
  children,

Muzammil-cyber

import React, { useState, useEffect, useRef } from "react";

type AnimatedTextProps = {
  text: string;
  duration?: number;
  className?: string;
};

export default function AnimatedText({
  text,

Muzammil-cyber

Your very own React State Management

Building our store

function createStore<T>({ initialState }: { initialState: T }) {
  let subscribers: Listener[] = [];
  let state = initialState;

  const notifyStateChanged = () => {
    subscribers.forEach((fn) => fn());
  };

Muzammil-cyber

"use client";

/**
 * Importing necessary modules from their respective packages.
 *
 * `motion` is a component from the framer-motion library used to create animations.
 * `useMotionValue` is a hook from the framer-motion library that creates a motion value.
 * `useTransform` is a hook from the framer-motion library to create a new motion value by transforming another.
 * `animate` is a function from the framer-motion library to animate a motion value.
 */

Muzammil-cyber

import path from "node:path";
import fs from "node:fs/promises";
import { getPlaiceholder } from "plaiceholder";

export const getImageLocal = async (src: string) => {
  const buffer = await fs.readFile(path.join("./public", src));

  const {
    metadata: { height, width },
    ...plaiceholder

Muzammil-cyber

const dateCreated = () => {
    // How long since created?
    const msPerMinute = 60 * 1000;
    const msPerHour = msPerMinute * 60;
    const msPerDay = msPerHour * 24;
    const msPerMonth = msPerDay * 30;
    const msPerYear = msPerDay * 365;
    const current = new Date();
    const created = new Date(post.createdAt);
    const elapsed = current.getTime() - created.getTime();