Where Future [Programmers] Begin.

Get unlimited access to tutorials, hands-on problem solving, and industry-level development knowledge - all in one powerful platform. Start your journey to level up your career.

Learn by Doing, Not by Guessing.

Hands-on examples. Zero fluff. Pure skill.

"use client";

import React, { function useCallback<T extends Function>(callback: T, deps: React.DependencyList): T`useCallback` will return a memoized version of the callback that only changes if one of the `inputs`
has changed.
@version16.8.0@see{@link https://react.dev/reference/react/useCallback}useCallback, function useEffect(effect: React.EffectCallback, deps?: React.DependencyList): voidAccepts a function that contains imperative, possibly effectful code.
@parameffect Imperative function that can return a cleanup function@paramdeps If present, effect will only activate if the values in the list change.@version16.8.0@see{@link https://react.dev/reference/react/useEffect}useEffect, function useRef<T>(initialValue: T): React.RefObject<T> (+2 overloads)`useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument
(`initialValue`). The returned object will persist for the full lifetime of the component.

Note that `useRef()` is useful for more than the `ref` attribute. It’s handy for keeping any mutable
value around similar to how you’d use instance fields in classes.
@version16.8.0@see{@link https://react.dev/reference/react/useRef}useRef, function useState<S>(initialState: S | (() => S)): [S, React.Dispatch<React.SetStateAction<S>>] (+1 overload)Returns a stateful value, and a function to update it.
@version16.8.0@see{@link https://react.dev/reference/react/useState}useState } from "react";
import { const Swiper: React.FunctionComponent<React.RefAttributes<SwiperRef> & Omit<React.HTMLAttributes<HTMLElement>, "onProgress" | "onClick" | "onTouchEnd" | "onTouchMove" | ... 5 more ... | "onResize"> & SwiperOptions & {
    ...;
} & {
    ...;
}>Swiper, const SwiperSlide: React.FunctionComponent<SwiperSlideProps>SwiperSlide } from "swiper/react";
import { class Swiper

export SwiperSwiper as class SwiperTypesSwiperTypes } from "swiper/types";

const const TERMINAL_BUTTONS: {
    label: string;
}[]TERMINAL_BUTTONS: { label: stringlabel: string }[] = [
  { label: stringlabel: "page.tsx" },
  { label: stringlabel: "style.css" },
  { label: stringlabel: "package.json" },
  { label: stringlabel: "Preview" },
];

const const MARQUEE_IMAGES: {
    [key: string]: {
        img: string;
    }[];
}MARQUEE_IMAGES: { [key: stringkey: string]: { img: stringimg: string }[] } = {
  type MARQUEE_IMAGES_1: {
    img: string;
}[]MARQUEE_IMAGES_1: [
    { img: stringimg: "long_code.png" },
    { img: stringimg: "code_editor.png" },
    { img: stringimg: "hello_user.png" },
    { img: stringimg: "bash.png" },
    { img: stringimg: "addremove.png" },
    { img: stringimg: "local.jpg" },
  ],
  type MARQUEE_IMAGES_2: {
    img: string;
}[]MARQUEE_IMAGES_2: [
    { img: stringimg: "local.jpg" },
    { img: stringimg: "tutorials_popup.png" },
    { img: stringimg: "code_editor.png" },
    { img: stringimg: "search.png" },
    { img: stringimg: "bash.png" },
    { img: stringimg: "hero_terminal.png" },
  ],
  type MARQUEE_IMAGES_3: {
    img: string;
}[]MARQUEE_IMAGES_3: [
    { img: stringimg: "laptop_coding.png" },
    { img: stringimg: "quick_learn.png" },
    { img: stringimg: "code_editor.png" },
    { img: stringimg: "focus_mode.png" },
    { img: stringimg: "error_img.png" },
    { img: stringimg: "bash.png" },
  ],
};

interface CodeEditorHeroAnimationDisplayPropsTypes {
  CodeEditorHeroAnimationDisplayPropsTypes.pageTsxComponent?: React.ReactNodepageTsxComponent?: React.type React.ReactNode = string | number | bigint | boolean | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | Promise<...> | null | undefinedRepresents all of the things React can render.

Where 
{@link 
ReactElement
}
 only represents JSX, `ReactNode` represents everything that can be rendered.
@see{@link https://react-typescript-cheatsheet.netlify.app/docs/react-types/reactnode/ React TypeScript Cheatsheet}@example```tsx
// Typing children
type Props = { children: ReactNode }

const Component = ({ children }: Props) => <div>{children}</div>

<Component>hello</Component>
```@example```tsx
// Typing a custom element
type Props = { customElement: ReactNode }

const Component = ({ customElement }: Props) => <div>{customElement}</div>

<Component customElement={<div>hello</div>} />
```ReactNode;
  CodeEditorHeroAnimationDisplayPropsTypes.styleCssComponent?: React.ReactNodestyleCssComponent?: React.type React.ReactNode = string | number | bigint | boolean | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | Promise<...> | null | undefinedRepresents all of the things React can render.

Where 
{@link 
ReactElement
}
 only represents JSX, `ReactNode` represents everything that can be rendered.
@see{@link https://react-typescript-cheatsheet.netlify.app/docs/react-types/reactnode/ React TypeScript Cheatsheet}@example```tsx
// Typing children
type Props = { children: ReactNode }

const Component = ({ children }: Props) => <div>{children}</div>

<Component>hello</Component>
```@example```tsx
// Typing a custom element
type Props = { customElement: ReactNode }

const Component = ({ customElement }: Props) => <div>{customElement}</div>

<Component customElement={<div>hello</div>} />
```ReactNode;
  CodeEditorHeroAnimationDisplayPropsTypes.packageJsonComponent?: React.ReactNodepackageJsonComponent?: React.type React.ReactNode = string | number | bigint | boolean | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | Promise<...> | null | undefinedRepresents all of the things React can render.

Where 
{@link 
ReactElement
}
 only represents JSX, `ReactNode` represents everything that can be rendered.
@see{@link https://react-typescript-cheatsheet.netlify.app/docs/react-types/reactnode/ React TypeScript Cheatsheet}@example```tsx
// Typing children
type Props = { children: ReactNode }

const Component = ({ children }: Props) => <div>{children}</div>

<Component>hello</Component>
```@example```tsx
// Typing a custom element
type Props = { customElement: ReactNode }

const Component = ({ customElement }: Props) => <div>{customElement}</div>

<Component customElement={<div>hello</div>} />
```ReactNode;
}

export const const CodeEditorHeroAnimationDisplay: ({ pageTsxComponent, styleCssComponent, packageJsonComponent, }: CodeEditorHeroAnimationDisplayPropsTypes) => React.JSX.ElementCodeEditorHeroAnimationDisplay = ({
  pageTsxComponent: React.ReactNodepageTsxComponent,
  styleCssComponent: React.ReactNodestyleCssComponent,
  packageJsonComponent: React.ReactNodepackageJsonComponent,
}: CodeEditorHeroAnimationDisplayPropsTypes) => {
  const const swiperRef: React.RefObject<SwiperTypes | null>swiperRef = useRef<SwiperTypes>(initialValue: SwiperTypes | null): React.RefObject<SwiperTypes | null> (+2 overloads)`useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument
(`initialValue`). The returned object will persist for the full lifetime of the component.

Note that `useRef()` is useful for more than the `ref` attribute. It’s handy for keeping any mutable
value around similar to how you’d use instance fields in classes.
@version16.8.0@see{@link https://react.dev/reference/react/useRef}useRef<class SwiperTypesSwiperTypes>(null);
  const const tabRefs: React.RefObject<(HTMLButtonElement | null)[]>tabRefs = useRef<(HTMLButtonElement | null)[]>(initialValue: (HTMLButtonElement | null)[]): React.RefObject<(HTMLButtonElement | null)[]> (+2 overloads)`useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument
(`initialValue`). The returned object will persist for the full lifetime of the component.

Note that `useRef()` is useful for more than the `ref` attribute. It’s handy for keeping any mutable
value around similar to how you’d use instance fields in classes.
@version16.8.0@see{@link https://react.dev/reference/react/useRef}useRef<(HTMLButtonElement | null)[]>([]);
  const const terminalTabRef: React.RefObject<HTMLDivElement | null>terminalTabRef = useRef<HTMLDivElement>(initialValue: HTMLDivElement | null): React.RefObject<HTMLDivElement | null> (+2 overloads)`useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument
(`initialValue`). The returned object will persist for the full lifetime of the component.

Note that `useRef()` is useful for more than the `ref` attribute. It’s handy for keeping any mutable
value around similar to how you’d use instance fields in classes.
@version16.8.0@see{@link https://react.dev/reference/react/useRef}useRef<HTMLDivElement>(null);
  const [const slideIndex: numberslideIndex, const setSlideIndex: React.Dispatch<React.SetStateAction<number>>setSlideIndex] = useState<number>(initialState: number | (() => number)): [number, React.Dispatch<React.SetStateAction<number>>] (+1 overload)Returns a stateful value, and a function to update it.
@version16.8.0@see{@link https://react.dev/reference/react/useState}useState(0);

  const const moveTerminalTabRefTo: (btn: HTMLElement) => voidmovconst moveTerminalTabRefTo: (btn: HTMLElement) => voideTerminalTabRefTo = useCallback<(btn: HTMLElement) => void>(callback: (btn: HTMLElement) => void, deps: React.DependencyList): (btn: HTMLElement) => void`useCallback` will return a memoized version of the callback that only changes if one of the `inputs`
has changed.
@version16.8.0@see{@link https://react.dev/reference/react/useCallback}useCallback(
    (btn: HTMLElementbtn: HTMLElement) => {
      if (!const terminalTabRef: React.RefObject<HTMLDivElement | null>terminalTabRef.React.RefObject<HTMLDivElement | null>.current: HTMLDivElement | nullThe current value of the ref.current) return;
    const terminalTabRef: React.RefObject<HTMLDivElement | null>terminalTabRef.React.RefObject<HTMLDivElement | null>.current: HTMLDivElementThe current value of the ref.current.ElementCSSInlineStyle.style: CSSStyleDeclaration[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/style)style.CSSStyleDeclaration.width: string[MDN Reference](https://developer.mozilla.org/docs/Web/CSS/width)width = `${btn: HTMLElementbtn.HTMLElement.offsetWidth: number[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/offsetWidth)offsetWidth}px`;
      const terminalTabRef: React.RefObject<HTMLDivElement | null>terminalTabRef.React.RefObject<HTMLDivElement | null>.current: HTMLDivElementThe current value of the ref.current.ElementCSSInlineStyle.style: CSSStyleDeclaration[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/style)style.CSSStyleDeclaration.left: string[MDN Reference](https://developer.mozilla.org/docs/Web/CSS/left)left = `${btn: HTMLElementbtn.HTMLElement.offsetLeft: number[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/offsetLeft)offsetLeft}px`;
    },
    [const slideIndex: numberslideIndex]
  );

  function useEffect(effect: React.EffectCallback, deps?: React.DependencyList): voidAccepts a function that contains imperative, possibly effectful code.
@parameffect Imperative function that can return a cleanup function@paramdeps If present, effect will only activate if the values in the list change.@version16.8.0@see{@link https://react.dev/reference/react/useEffect}useEffect(() => {
    if (!const swiperRef: React.RefObject<SwiperTypes | null>swiperRef.React.RefObject<Swiper | null>.current: SwiperTypes | nullThe current value of the ref.current) return;
    const swiperRef: React.RefObject<SwiperTypes | null>swiperRef.React.RefObject<Swiper | null>.current: SwiperTypesThe current value of the ref.current?.Swiper.slideTo(index: number, speed?: number, runCallbacks?: boolean): booleanRun transition to the slide with index number equal to 'index' parameter for the
 duration equal to 'speed' parameter.
@paramindex Index number of slide.@paramspeed Transition duration (in ms).@paramrunCallbacks Set it to false (by default it is true) and transition will
not produce transition events.slideTo(3);
  }, []);
  return (
    <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="relative z-10 w-full h-[650px] bg-gradient-to-l from-background-color_950C via-background-color_900C to-background-color_950C">
      <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="mt-28 layout_max_1200 mx-auto w-full h-full  p-2  ">
        <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="rounded border border-border-color_800C bg-background-color_925C w-full h-full overflow-hidden">
          <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="w-full h-[40px] px-3 pt-2 flex justify-start items-center">
            <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="flex justify-center items-center w-fit gap-2">
              <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="w-[15px] h-[15px] rounded-full bg-background-color_750C border border-border-color_700C"></React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
              <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="w-[15px] h-[15px] rounded-full bg-background-color_750C border border-border-color_700C"></React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
              <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="w-[15px] h-[15px] rounded-full bg-background-color_750C border border-border-color_700C"></React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
            </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>

            <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="flex justify-start items-center gap-2 pl-5 relative">
              <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div
                React.RefAttributes<HTMLDivElement>.ref?: React.Ref<HTMLDivElement> | undefinedAllows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see{@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}ref={const terminalTabRef: React.RefObject<HTMLDivElement | null>terminalTabRef}
                React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="w-[73px] left-5 h-full transition-all duration-500 absolute bg-background-color_750C rounded-tiny"
              ></React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
              {const TERMINAL_BUTTONS: {
    label: string;
}[]TERMINAL_BUTTONS.Array<{ label: string; }>.map<React.JSX.Element>(callbackfn: (value: {
    label: string;
}, index: number, array: {
    label: string;
}[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((button: {
    label: string;
}button, i: numberi) => {
                return (
                  <React.const React.Fragment: React.ExoticComponent<React.FragmentProps>Lets you group elements without a wrapper node.
@see{@link https://react.dev/reference/react/Fragment React Docs}@example```tsx
import { Fragment } from 'react';

<Fragment>
  <td>Hello</td>
  <td>World</td>
</Fragment>
```@example```tsx
// Using the <></> shorthand syntax:

<>
  <td>Hello</td>
  <td>World</td>
</>
```Fragment React.Attributes.key?: React.Key | null | undefinedkey={i: numberi}>
                    <React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button
                      React.RefAttributes<HTMLButtonElement>.ref?: React.Ref<HTMLButtonElement> | undefinedAllows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see{@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}ref={(btn: HTMLButtonElement | nullbtn) => {
                        const tabRefs: React.RefObject<(HTMLButtonElement | null)[]>tabRefs.React.RefObject<(HTMLButtonElement | null)[]>.current: (HTMLButtonElement | null)[]The current value of the ref.current[i: numberi] = btn: HTMLButtonElement | nullbtn;
                      }}
                      React.DOMAttributes<HTMLButtonElement>.onClick?: React.MouseEventHandler<HTMLButtonElement> | undefinedonClick={() => const swiperRef: React.RefObject<SwiperTypes | null>swiperRef.React.RefObject<Swiper | null>.current: SwiperTypes | nullThe current value of the ref.current?.Swiper.slideTo(index: number, speed?: number, runCallbacks?: boolean): booleanRun transition to the slide with index number equal to 'index' parameter for the
 duration equal to 'speed' parameter.
@paramindex Index number of slide.@paramspeed Transition duration (in ms).@paramrunCallbacks Set it to false (by default it is true) and transition will
not produce transition events.slideTo(i: numberi)}
                      React.HTMLAttributes<T>.className?: string | undefinedclassName={`font-medium  px-2 py-1 text-read_2 z-10 relative transition-colors rounded-tiny  ${const slideIndex: numberslideIndex === i: numberi ? " text-text-color_1" : "hover:bg-background-color_800C text-text-color_2"}`}
                    >
                      {button: {
    label: string;
}button.label: stringlabel}
                    </React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button>
                    {i: numberi < const TERMINAL_BUTTONS: {
    label: string;
}[]TERMINAL_BUTTONS.Array<{ label: string; }>.length: numberGets or sets the length of the array. This is a number one higher than the highest index in the array.length - 1 && (
                      <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="h-[15px] w-[1px] bg-background-color_750C"></React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
                    )}
                  </React.const React.Fragment: React.ExoticComponent<React.FragmentProps>Lets you group elements without a wrapper node.
@see{@link https://react.dev/reference/react/Fragment React Docs}@example```tsx
import { Fragment } from 'react';

<Fragment>
  <td>Hello</td>
  <td>World</td>
</Fragment>
```@example```tsx
// Using the <></> shorthand syntax:

<>
  <td>Hello</td>
  <td>World</td>
</>
```Fragment>
                );
              })}
            </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
          </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>

          <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="p-2 h-[calc(100%-40px)] w-full">
            <const Swiper: React.FunctionComponent<React.RefAttributes<SwiperRef> & Omit<React.HTMLAttributes<HTMLElement>, "onProgress" | "onClick" | "onTouchEnd" | "onTouchMove" | ... 5 more ... | "onResize"> & SwiperOptions & {
    ...;
} & {
    ...;
}>Swiper
              onSwiper?: ((swiper: SwiperTypes) => void) | undefinedGet Swiper instanceonSwiper={(swiper: SwiperTypesswiper) => {
                const swiperRef: React.RefObject<SwiperTypes | null>swiperRef.React.RefObject<Swiper | null>.current: SwiperTypes | nullThe current value of the ref.current = swiper: SwiperTypesswiper;
              }}
              onSlideChange?: ((swiper: SwiperTypes) => void) | undefinedEvent will be fired when currently active slide is changedonSlideChange={(swiper: SwiperTypesswiper) => {
                const const idx: numberidx = swiper: SwiperTypesswiper.Swiper.realIndex: numberIndex number of currently active slide considering rearranged slides in loop moderealIndex;
                const setSlideIndex: (value: React.SetStateAction<number>) => voidsetSlideIndex(const idx: numberidx);

                const const btn: HTMLButtonElement | nullbtn = const tabRefs: React.RefObject<(HTMLButtonElement | null)[]>tabRefs.React.RefObject<(HTMLButtonElement | null)[]>.current: (HTMLButtonElement | null)[]The current value of the ref.current[const idx: numberidx];
                if (const btn: HTMLButtonElement | nullbtn) const moveTerminalTabRefTo: (btn: HTMLElement) => voidmoveTerminalTabRefTo(const btn: HTMLButtonElementbtn);
              }}
              SwiperOptions.spaceBetween?: string | number | undefinedDistance between slides in px.
@default0@noteIf you use "margin" css property to the elements which go into Swiper in which you pass "spaceBetween" into, navigation might not work properly.spaceBetween={50}
              SwiperOptions.slidesPerView?: number | "auto" | undefinedNumber of slides per view (slides visible at the same time on slider's container).
@note`slidesPerView: 'auto'` is currently not compatible with multirow mode, when `grid.rows` > 1@default1slidesPerView={1}
              SwiperOptions.navigation?: boolean | NavigationOptions | undefinedObject with navigation parameters or boolean `true` to enable with default settings.
@example```js
const swiper = new Swiper('.swiper', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});
```navigation={false}
              SwiperOptions.allowTouchMove?: boolean | undefinedIf `false`, then the only way to switch the slide is use of external API functions like slidePrev or slideNext
@defaulttrueallowTouchMove={false}
              className?: string | undefinedclassName="h-full rounded overflow-hidden border border-border-color_800C"
            >
              <const SwiperSlide: React.FunctionComponent<SwiperSlideProps>SwiperSlide className?: string | undefinedclassName="w-full">
                <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="h-[calc(100%-200px)] w-full">
                  {pageTsxComponent: React.ReactNodepageTsxComponent}
                </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
                <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="h-[200px] w-full border-t border-border-color_800C bg-background-color_900C">
                  <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="flex justify-start items-center text-[11px] text-text-color_3 gap-5 py-2 px-3">
                    <React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button>PROBLEMS</React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button>
                    <React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button>DEBUG CONSOLE</React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button>
                    <React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button React.HTMLAttributes<T>.className?: string | undefinedclassName="relative text-text-color_4 font-medium">
                      TERMINAL
                      <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="absolute w-full h-[2px] bg-pm_purple-700 bottom-[-5px] left-0"></React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
                    </React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button>
                    <React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button>PORTS</React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button>
                  </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
                  <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="h-[calc(100%-34px)] overflow-y-auto px-3 py-2 text-[14px] custom_scrollbar text-text-color_4">
                    <React.JSX.IntrinsicElements.p: React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>p>&gt; next dev --turbopack --port 3000</React.JSX.IntrinsicElements.p: React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>p>
                    <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="px-4 py-2">
                      <React.JSX.IntrinsicElements.p: React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>p>
                        <React.JSX.IntrinsicElements.span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>span React.HTMLAttributes<T>.className?: string | undefinedclassName="text-pm_purple-500 font-medium">
                          ▲ Next.js 15.3.1{" "}
                        </React.JSX.IntrinsicElements.span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>span>
                        (Turbopack)
                      </React.JSX.IntrinsicElements.p: React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>p>
                      <React.JSX.IntrinsicElements.p: React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>p>
                        {" "}
                        - Local:{" "}
                        <React.JSX.IntrinsicElements.span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>span
                          React.DOMAttributes<HTMLSpanElement>.onClick?: React.MouseEventHandler<HTMLSpanElement> | undefinedonClick={() => const swiperRef: React.RefObject<SwiperTypes | null>swiperRef.React.RefObject<Swiper | null>.current: SwiperTypes | nullThe current value of the ref.current?.Swiper.slideTo(index: number, speed?: number, runCallbacks?: boolean): booleanRun transition to the slide with index number equal to 'index' parameter for the
 duration equal to 'speed' parameter.
@paramindex Index number of slide.@paramspeed Transition duration (in ms).@paramrunCallbacks Set it to false (by default it is true) and transition will
not produce transition events.slideTo(3)}
                          React.HTMLAttributes<T>.className?: string | undefinedclassName="hover:underline cursor-pointer"
                          React.HTMLAttributes<HTMLSpanElement>.title?: string | undefinedtitle="Follow link (click)"
                        >
                          http://localhost:3000
                        </React.JSX.IntrinsicElements.span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>span>
                      </React.JSX.IntrinsicElements.p: React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>p>
                      <React.JSX.IntrinsicElements.p: React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>p> - Network: http://192.168.0.101:3000</React.JSX.IntrinsicElements.p: React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>p>
                      <React.JSX.IntrinsicElements.p: React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>p> - Environments: .env ✓</React.JSX.IntrinsicElements.p: React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>p>
                    </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>

                    <React.JSX.IntrinsicElements.p: React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>p>
                      <React.JSX.IntrinsicElements.span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>span React.HTMLAttributes<T>.className?: string | undefinedclassName="text-green-500">✓</React.JSX.IntrinsicElements.span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>span> Starting...
                    </React.JSX.IntrinsicElements.p: React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>p>
                    <React.JSX.IntrinsicElements.p: React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>p>
                      <React.JSX.IntrinsicElements.span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>span React.HTMLAttributes<T>.className?: string | undefinedclassName="text-green-500">✓</React.JSX.IntrinsicElements.span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>span> Ready in 2.1s
                    </React.JSX.IntrinsicElements.p: React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>p>
                    <React.JSX.IntrinsicElements.p: React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>p>○ Compiling / ...</React.JSX.IntrinsicElements.p: React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>p>
                    <React.JSX.IntrinsicElements.p: React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>p>
                      <React.JSX.IntrinsicElements.span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>span React.HTMLAttributes<T>.className?: string | undefinedclassName="text-green-500">✓</React.JSX.IntrinsicElements.span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>span> Compiled / in
                      16.6s
                    </React.JSX.IntrinsicElements.p: React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>p>
                    <React.JSX.IntrinsicElements.p: React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>p>
                      GET / <React.JSX.IntrinsicElements.span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>span React.HTMLAttributes<T>.className?: string | undefinedclassName="text-green-500">200</React.JSX.IntrinsicElements.span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>span> in
                      17889ms
                    </React.JSX.IntrinsicElements.p: React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>p>
                    <React.JSX.IntrinsicElements.p: React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>p>
                      <React.JSX.IntrinsicElements.span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>span React.HTMLAttributes<T>.className?: string | undefinedclassName="text-green-500">✓</React.JSX.IntrinsicElements.span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>span> Compiled
                      /favicon.ico in 1300ms
                    </React.JSX.IntrinsicElements.p: React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>p>
                    <React.JSX.IntrinsicElements.p: React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>p>GET /favicon.ico?favicon.4716d561.ico 200 in 1640ms</React.JSX.IntrinsicElements.p: React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>p>
                  </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
                </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
              </const SwiperSlide: React.FunctionComponent<SwiperSlideProps>SwiperSlide>
              <const SwiperSlide: React.FunctionComponent<SwiperSlideProps>SwiperSlide className?: string | undefinedclassName="w-full h-full ">
                {styleCssComponent: React.ReactNodestyleCssComponent}
              </const SwiperSlide: React.FunctionComponent<SwiperSlideProps>SwiperSlide>
              <const SwiperSlide: React.FunctionComponent<SwiperSlideProps>SwiperSlide className?: string | undefinedclassName="w-full h-full ">
                {packageJsonComponent: React.ReactNodepackageJsonComponent}
              </const SwiperSlide: React.FunctionComponent<SwiperSlideProps>SwiperSlide>
              <const SwiperSlide: React.FunctionComponent<SwiperSlideProps>SwiperSlide className?: string | undefinedclassName="w-full">
                <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="terminal_wrapper ">
                  <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="terminal_canvas grid grid-cols-3">
                    {var Object: ObjectConstructorProvides functionality common to all JavaScript objects.Object.ObjectConstructor.entries<{
    img: string;
}[]>(o: {
    [s: string]: {
        img: string;
    }[];
} | ArrayLike<{
    img: string;
}[]>): [string, {
    img: string;
}[]][] (+1 overload)Returns an array of key/values of the enumerable own properties of an object
@paramo Object that contains the properties and methods. This can be an object that you created or an existing Document Object Model (DOM) object.entries(const MARQUEE_IMAGES: {
    [key: string]: {
        img: string;
    }[];
}MARQUEE_IMAGES).Array<[string, { img: string; }[]]>.map<React.JSX.Element>(callbackfn: (value: [string, {
    img: string;
}[]], index: number, array: [string, {
    img: string;
}[]][]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map(
                      ([key: stringkey, value: {
    img: string;
}[]value], objIndex: numberobjIndex) => {
                        return (
                          <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div
                            React.Attributes.key?: React.Key | null | undefinedkey={objIndex: numberobjIndex}
                            React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="w-full h-full overflow-hidden p-3"
                          >
                            <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div
                              React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName={`w-full ${key: stringkey === "MARQUEE_IMAGES_2" ? "animate-marquee-vertical-topToBottom" : "animate-marquee-vertical-bottomToTop"} `}
                            >
                              <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
                                {var Array: ArrayConstructorArray.ArrayConstructor.from<unknown>(iterable: Iterable<unknown> | ArrayLike<unknown>): unknown[] (+3 overloads)Creates an array from an iterable object.
@paramiterable An iterable object to convert to an array.from({ ArrayLike<T>.length: numberlength: 2 }).Array<unknown>.map<React.JSX.Element>(callbackfn: (value: unknown, index: number, array: unknown[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((_: unknown_, i: numberi) => {
                                  return (
                                    <React.const React.Fragment: React.ExoticComponent<React.FragmentProps>Lets you group elements without a wrapper node.
@see{@link https://react.dev/reference/react/Fragment React Docs}@example```tsx
import { Fragment } from 'react';

<Fragment>
  <td>Hello</td>
  <td>World</td>
</Fragment>
```@example```tsx
// Using the <></> shorthand syntax:

<>
  <td>Hello</td>
  <td>World</td>
</>
```Fragment React.Attributes.key?: React.Key | null | undefinedkey={i: numberi}>
                                      {value: {
    img: string;
}[]value.Array<{ img: string; }>.map<React.JSX.Element>(callbackfn: (value: {
    img: string;
}, index: number, array: {
    img: string;
}[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((item: {
    img: string;
}item, j: numberj) => (
                                        <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div
                                          React.Attributes.key?: React.Key | null | undefinedkey={`original-${j: numberj}`}
                                          React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="w-full h-[300px] rounded mb-6 bg-background-color_900C"
                                        ></React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
                                      ))}
                                    </React.const React.Fragment: React.ExoticComponent<React.FragmentProps>Lets you group elements without a wrapper node.
@see{@link https://react.dev/reference/react/Fragment React Docs}@example```tsx
import { Fragment } from 'react';

<Fragment>
  <td>Hello</td>
  <td>World</td>
</Fragment>
```@example```tsx
// Using the <></> shorthand syntax:

<>
  <td>Hello</td>
  <td>World</td>
</>
```Fragment>
                                  );
                                })}
                              </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
                            </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
                          </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
                        );
                      }
                    )}
                  </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
                </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
              </const SwiperSlide: React.FunctionComponent<SwiperSlideProps>SwiperSlide>
            </const Swiper: React.FunctionComponent<React.RefAttributes<SwiperRef> & Omit<React.HTMLAttributes<HTMLElement>, "onProgress" | "onClick" | "onTouchEnd" | "onTouchMove" | ... 5 more ... | "onResize"> & SwiperOptions & {
    ...;
} & {
    ...;
}>Swiper>
          </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
        </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
      </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
    </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
  );
};

> next dev --turbopack --port 3000

▲ Next.js 15.3.1 (Turbopack)

- Local: http://localhost:3000

- Network: http://192.168.0.101:3000

- Environments: .env ✓

✓ Starting...

✓ Ready in 2.1s

○ Compiling / ...

✓ Compiled / in 16.6s

GET / 200 in 17889ms

✓ Compiled /favicon.ico in 1300ms

GET /favicon.ico?favicon.4716d561.ico 200 in 1640ms

.terminal_wrapper {
  position: relative;
  contain: strict;
  width: 100%;
  height: 880px;
  perspective: 4000px;
  perspective-origin: 100% 0;
  transform-style: preserve-3d;
}

.terminal_canvas {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  border: 1px solid var(--border-color-800C);
  width: 1900px;
  height: 1000px;
  left: -500px;
  transform: scale(1.2) rotateX(47deg) rotateY(31deg) rotate(324deg);
  transform-origin: top left;
  backface-visibility: hidden;
}


/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "../../packages/**/*.{js,ts,jsx,tsx,mdx}",
    "!../../packages/**/node_modules/**",

    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      keyframes: {
        "marquee-vertical-topToBottom": {
          "0%": {
            transform: "translateY(-50%)",
          },
          "100%": {
            transform: "translateY(0%)",
          },
        },

        "marquee-vertical-bottomToTop": {
          "0%": {
            transform: "translateY(0%)",
          },
          "100%": {
            transform: "translateY(-50%)",
          },
        },
      },
      animation: {
        "marquee-vertical-topToBottom": "marquee-vertical-topToBottom 17s linear infinite",
        "marquee-vertical-bottomToTop": "marquee-vertical-bottomToTop 17s linear infinite",
      }
    },
  },
  plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
};

{
  "name": "web",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack --port 3000",
    "build": "next build",
    "start": "next start",
    "lint": "next lint --max-warnings 0",
    "check-types": "tsc --noEmit",
    "clean": "rm -rf node_modules && echo 'Cleanup complete!'"
  },
  "dependencies": {
    "@programmer/shared": "workspace:*",
    "@programmer/ui": "workspace:*",
    "next": "^15.2.4",
    "react": "^19.1.0",
    "react-dom": "^19.1.0",
    "swiper": "^11.2.8"
  },
  "devDependencies": {
    "@shikijs/twoslash": "^3.4.2",
    "@programmer/eslint-config": "workspace:*",
    "@programmer/typescript-config": "workspace:*",
    "@types/node": "^22.14.0",
    "@types/react": "19.1.0",
    "@types/react-dom": "19.1.1",
    "eslint": "^9.24.0",
    "shiki": "^3.4.2",
    "tailwind-config": "workspace:*",
    "typescript": "^5.8.2"
  }
}


type User = { name: string; email?: string };

function sendEmail(user: User) {
  // ❌ Error if email is undefined
  console.log("Sending email to:", user.email.toUpperCase()); 
}

const newUser: User = { name: "Alice" };
sendEmail(newUser); // ❌ TypeError: Cannot read properties of undefined


function renderList(items: string[]) {
  for (let i = 0; i < items.length; i++) {
    const item = items[i]; 
    // Warning: item is defined but never used
  }

  console.log("Rendering complete");
}


const isAdult = (age) => age >= 18; 
const message = isAdult(20) ? "Welcome!" : "Access Denied"; 

function checkAccess(age: number): string { 
   if (age >= 18) return "Welcome!"; 
  return "Access Denied"; 
} 
const message = checkAccess(20);


function getDiscount(price: number): number {
  if (price > 100) {
    return price * 0.9; 
  }

  return price;
}

const finalPrice = getDiscount(150);


"use client";
import React, { useRef } from "react";

export default function FocusInput() {
  const inputRef = useRef<HTMLInputElement>(null); 

  const handleFocusClick = () => {
    inputRef.current?.focus(); 
  };

  const handleFocus = () => {
    console.log("Input is focused!");
  };

  const handleBlur = () => {
    console.log("Input lost focus.");
  };

  return (
    <div className="p-4 space-y-4">
      <input
        ref={inputRef}
        onFocus={handleFocus}
        onBlur={handleBlur}
        type="text"
        placeholder="Click the button to focus me"
        className="border px-4 py-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-400 transition-all"
      />

      <button
        onClick={handleFocusClick}
        className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition"
      >
        Focus Input
      </button>
    </div>
  );
}