Repository: hiteshchoudhary/devui
Branch: main
Commit: 1a21d47a1fb6
Files: 82
Total size: 572.3 KB

Directory structure:
gitextract_hoj68ou7/

├── .eslintrc.json
├── .gitignore
├── README.md
├── next.config.js
├── package.json
├── postcss.config.js
├── prettier.config.js
├── src/
│   ├── app/
│   │   ├── about-us/
│   │   │   └── page.tsx
│   │   ├── globals.css
│   │   ├── layout.tsx
│   │   ├── page.tsx
│   │   └── templates/
│   │       ├── [id]/
│   │       │   └── page.tsx
│   │       └── page.tsx
│   ├── components/
│   │   ├── common/
│   │   │   ├── Button.tsx
│   │   │   ├── MainNavbar.tsx
│   │   │   ├── MobileNavbar.tsx
│   │   │   └── Select.tsx
│   │   ├── lib/
│   │   │   ├── CodePreviewer.tsx
│   │   │   ├── CodeSnippetRenderer.tsx
│   │   │   ├── PreviewCard.tsx
│   │   │   └── WidthHandler.tsx
│   │   └── templates/
│   │       ├── authentication/
│   │       │   ├── forgot-password.jsx
│   │       │   ├── index.ts
│   │       │   ├── login.jsx
│   │       │   └── register.jsx
│   │       ├── chat/
│   │       │   ├── chat-screen.jsx
│   │       │   ├── create-group-chat.jsx
│   │       │   ├── create-normal-chat.jsx
│   │       │   ├── empty-chats.jsx
│   │       │   ├── group-information.jsx
│   │       │   ├── index.ts
│   │       │   ├── login.jsx
│   │       │   └── register.jsx
│   │       ├── social-media/
│   │       │   ├── bookmark-posts.jsx
│   │       │   ├── change-password.jsx
│   │       │   ├── edit-profile.jsx
│   │       │   ├── index.ts
│   │       │   ├── login.jsx
│   │       │   ├── my-profile.jsx
│   │       │   ├── post-detail.jsx
│   │       │   ├── post-listing.jsx
│   │       │   ├── register.jsx
│   │       │   └── user-profile.jsx
│   │       ├── todo/
│   │       │   ├── empty-todos.jsx
│   │       │   ├── index.ts
│   │       │   └── todos.jsx
│   │       └── youtube/
│   │           ├── change-password.jsx
│   │           ├── channel-empty-playlist.jsx
│   │           ├── channel-empty-subscribed.jsx
│   │           ├── channel-empty-tweet.jsx
│   │           ├── channel-empty-video.jsx
│   │           ├── channel-playlist-videos.jsx
│   │           ├── channel-playlist.jsx
│   │           ├── channel-subscribed.jsx
│   │           ├── channel-tweets.jsx
│   │           ├── channel-video-list.jsx
│   │           ├── dashboard.jsx
│   │           ├── data.jsx
│   │           ├── delete-video.jsx
│   │           ├── edit-channel-info.jsx
│   │           ├── edit-personal-info.jsx
│   │           ├── edit-video.jsx
│   │           ├── empty-videos.jsx
│   │           ├── index.ts
│   │           ├── login.jsx
│   │           ├── mychannel-empty-tweet.jsx
│   │           ├── mychannel-empty-video.jsx
│   │           ├── mychannel-tweets.jsx
│   │           ├── privacy-policy.jsx
│   │           ├── register.jsx
│   │           ├── terms-and-conditions.jsx
│   │           ├── upload-video.jsx
│   │           ├── uploaded-video.jsx
│   │           ├── uploading-video.jsx
│   │           ├── video-cards.jsx
│   │           ├── video-detail.jsx
│   │           └── video-list.jsx
│   ├── types/
│   │   └── utils.ts
│   └── utils/
│       ├── index.ts
│       └── screens.tsx
├── tailwind.config.ts
└── tsconfig.json

================================================
FILE CONTENTS
================================================

================================================
FILE: .eslintrc.json
================================================
{
  "extends": "next/core-web-vitals",
  "rules": {
    // next no-img-element
    "@next/next/no-img-element": "off"
  }
}

================================================
FILE: .gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# next.js
/.next/
/out/

# production
/build

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# local env files
.env*.local

# vercel
.vercel

# typescript
*.tsbuildinfo
next-env.d.ts


================================================
FILE: README.md
================================================
# DevUI

A complete front end solution for learners


================================================
FILE: next.config.js
================================================
/** @type {import('next').NextConfig} */
const nextConfig = {
  images: { domains: ["via.placeholder.com"] },
};

module.exports = nextConfig;


================================================
FILE: package.json
================================================
{
  "name": "devui",
  "description": "Common app templates in plain HTML and TailwindCSS",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@headlessui/react": "^1.7.17",
    "@heroicons/react": "^2.0.18",
    "@types/node": "20.5.6",
    "@types/react": "18.2.21",
    "@types/react-dom": "18.2.7",
    "@uiw/codemirror-extensions-langs": "^4.21.11",
    "@uiw/codemirror-themes-all": "^4.21.11",
    "@uiw/react-codemirror": "^4.21.11",
    "autoprefixer": "10.4.15",
    "eslint": "8.47.0",
    "eslint-config-next": "13.4.19",
    "next": "13.4.19",
    "postcss": "8.4.28",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.3",
    "typescript": "5.2.2"
  },
  "devDependencies": {
    "@types/prettier": "^3.0.0",
    "prettier": "^3.0.2",
    "prettier-plugin-tailwindcss": "^0.5.3"
  }
}


================================================
FILE: postcss.config.js
================================================
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}


================================================
FILE: prettier.config.js
================================================
module.exports = {
  plugins: ["prettier-plugin-tailwindcss"],
};


================================================
FILE: src/app/about-us/page.tsx
================================================
import React from "react";

const AboutUs = () => {
  return <div>AboutUs</div>;
};

export default AboutUs;


================================================
FILE: src/app/globals.css
================================================
@tailwind base;
@tailwind components;
@tailwind utilities;

.resizing,
.resizing * {
  @apply !cursor-ew-resize !select-none;
}

.resizing .iframe-overlay {
  display: block !important;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.CodeMirror__Main__Editor {
  @apply overflow-hidden rounded-md;
}
.CodeMirror__Main__Editor .cm-scroller {
  @apply rounded-md px-4 py-2 pb-0;
}


================================================
FILE: src/app/layout.tsx
================================================
import MainNavbar from "@/components/common/MainNavbar";
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "DevUI | For learners",
  description: "Common app templates in plain HTML and TailwindCSS",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={`${inter.className} bg-dark text-white`}>
        <MainNavbar />
        <main className="mx-auto max-w-[85rem] p-4 lg:p-6">{children}</main>
      </body>
    </html>
  );
}


================================================
FILE: src/app/page.tsx
================================================
import Button from "@/components/common/Button";
import {
  CodeBracketSquareIcon,
  LifebuoyIcon,
} from "@heroicons/react/24/outline";
import Image from "next/image";
import Link from "next/link";

export default function Home() {
  return (
    <section aria-labelledby="hero-banner">
      <div className="flex flex-col items-start gap-4">
        <Image src="/hero.svg" alt="Hero" width={250} height={100} />
        <h1 className="font-heading text-3xl font-bold leading-[1.1] md:text-5xl lg:text-7xl">
          A complete front end solution for learners
        </h1>
        <p className="max-w-[42rem] leading-normal text-gray-300 sm:text-xl sm:leading-8">
          DevUI is a comprehensive and easy-to-use open-source UI templates
          library &#40; powered by <strong>TailwindCSS</strong>&#41; designed to
          enhance your productivity as a learner
        </p>
        <div className="mt-2 flex space-x-2">
          <Link href="/templates">
            <Button StartIcon={CodeBracketSquareIcon}>View templates</Button>
          </Link>
          <a
            href="https://github.com/hiteshchoudhary/devui"
            target="_blank"
            rel="noreferrer"
          >
            <Button StartIcon={LifebuoyIcon}>Contribute</Button>
          </a>
        </div>
      </div>
    </section>
  );
}


================================================
FILE: src/app/templates/[id]/page.tsx
================================================
"use client";
import Select from "@/components/common/Select";
import CodePreviewer from "@/components/lib/CodePreviewer";
import { SelectOptionType } from "@/types/utils";
import { applications, getComponentByAppPageId } from "@/utils/screens";
import { useParams } from "next/navigation";
import { useEffect, useState } from "react";

const TemplateDetails = () => {
  const { id } = useParams();

  const [loadingUi, setLoadingUi] = useState(true);

  const [selectedPageUI, setSelectedPageUI] = useState<SelectOptionType | null>(
    null,
  );
  const [app, setApp] = useState<(typeof applications)[0] | null>(null);

  useEffect(() => {
    if (!applications) return;
    const _app = applications.find((app) => app.id === id) || applications[0];
    setApp(_app);
    setSelectedPageUI(_app.pages[0]); // set 1st page as default selected page
    setLoadingUi(false);
  }, [applications]);

  if (loadingUi) return <h1>Loading screens...</h1>;

  return (
    <div>
      <Select
        options={app?.pages || []}
        label="Select a page UI"
        value={selectedPageUI}
        setValue={setSelectedPageUI}
      />
      <div className="w-full">
        <CodePreviewer title={selectedPageUI?.name || "DevUI Screen"}>
          {getComponentByAppPageId(app?.id || "", selectedPageUI?.id || "")}
        </CodePreviewer>
      </div>
    </div>
  );
};

export default TemplateDetails;


================================================
FILE: src/app/templates/page.tsx
================================================
"use client";

import Button from "@/components/common/Button";
import { applications } from "@/utils/screens";
import {
  ChevronDoubleRightIcon,
  RectangleGroupIcon,
} from "@heroicons/react/24/outline";
import Link from "next/link";

const Templates = () => {
  return (
    <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
      {applications.map((application, i) => {
        return (
          <main key={i} className="py-6 md:px-4">
            <div className="mx-auto grid max-w-4xl grid-cols-1">
              <div className="relative col-start-1 row-start-1 flex flex-col-reverse bg-gradient-to-t from-black/100 via-black/0 p-3">
                <h1 className="mt-1 text-lg font-semibold text-white">
                  {application.name}
                </h1>
                <p className="text-sm font-medium leading-4 text-white">
                  {application.subtitle}
                </p>
              </div>
              <div className="col-start-1 col-end-3 row-start-1 grid items-end justify-end gap-4 border border-gray-700">
                <img
                  src={application.cover}
                  alt=""
                  className="w-full object-cover"
                  loading="lazy"
                />
              </div>
              <dl className="row-start-2 mt-2 inline-flex items-center text-sm font-medium text-gray-200">
                <dd className="inline-flex items-center gap-1">
                  <RectangleGroupIcon className="-mt-0.5 h-5 w-5" />
                  {application.pages?.length || 0} Screens
                </dd>
              </dl>

              <div className="col-start-1 row-start-3 mt-2 self-center">
                <Link href={`/templates/${application.id}`}>
                  <Button EndIcon={ChevronDoubleRightIcon}>View Screens</Button>
                </Link>
              </div>
              <p className="col-start-1 mt-4 text-sm leading-6">
                {application.description}
              </p>
            </div>
          </main>
        );
      })}
    </div>
  );
};

export default Templates;


================================================
FILE: src/components/common/Button.tsx
================================================
import { TailwindIconType } from "@/types/utils";
import React from "react";

const Button: React.FC<
  React.ButtonHTMLAttributes<HTMLButtonElement> & {
    StartIcon?: TailwindIconType;
    EndIcon?: TailwindIconType;
  }
> = ({ StartIcon, EndIcon, children, ...props }) => {
  return (
    <button
      type="button"
      className="inline-flex items-center gap-x-1.5 rounded-md bg-white px-3 py-2.5 text-sm font-semibold text-gray-950 shadow-sm hover:bg-gray-200 active:bg-gray-300 disabled:bg-slate-500"
      {...props}
    >
      {StartIcon ? (
        <StartIcon className="-ml-0.5 h-5 w-5" aria-hidden="true" />
      ) : null}
      {children}
      {EndIcon ? (
        <EndIcon className="-mr-0.5 h-5 w-5" aria-hidden="true" />
      ) : null}
    </button>
  );
};

export default Button;


================================================
FILE: src/components/common/MainNavbar.tsx
================================================
"use client";
import { classNames } from "@/utils";
import { CodeBracketSquareIcon } from "@heroicons/react/20/solid";
import { Bars3BottomLeftIcon, XMarkIcon } from "@heroicons/react/24/outline";
import Link from "next/link";
import React, { useState } from "react";
import { MobileNavbar } from "./MobileNavbar";

const items = [
  {
    title: "Home",
    href: "/",
  },
  {
    title: "Templates",
    href: "/templates",
  },

  {
    title: "About us",
    href: "/about-us",
  },
];

const MainNavbar = () => {
  const [showMobileMenu, setShowMobileMenu] = useState<boolean>(false);

  return (
    <header className="border-slate-800e bg-dark sticky top-0 z-40 border-b-2 border-gray-700">
      <div className="mx-auto flex h-20 max-w-[85rem] items-center justify-between p-4 lg:p-6">
        <div className="flex gap-6 md:gap-10">
          <Link href="/" className="hidden items-center space-x-2 md:flex">
            <CodeBracketSquareIcon className="h-7 w-7 text-white" />
            <span className="font-heading hidden text-xl font-extrabold sm:inline-block">
              DevUI
            </span>
          </Link>
          {items?.length ? (
            <nav className="hidden gap-6 md:flex">
              {items?.map((item, index) => (
                <Link
                  key={index}
                  href={item.href}
                  className={classNames(
                    "flex items-center text-lg font-semibold transition-colors sm:text-sm",
                  )}
                >
                  {item.title}
                </Link>
              ))}
            </nav>
          ) : null}
          <button
            className="flex items-center space-x-2 md:hidden"
            onClick={() => setShowMobileMenu(!showMobileMenu)}
          >
            {showMobileMenu ? (
              <XMarkIcon className="h-5 w-5 text-white" />
            ) : (
              <Bars3BottomLeftIcon className="h-5 w-5 text-white" />
            )}
            <span className="font-heading text-xl font-extrabold sm:inline-block">
              DevUI
            </span>
          </button>
          {showMobileMenu && items && <MobileNavbar items={items} />}
        </div>
      </div>
    </header>
  );
};

export default MainNavbar;


================================================
FILE: src/components/common/MobileNavbar.tsx
================================================
import * as React from "react";
import Link from "next/link";
import { CodeBracketSquareIcon } from "@heroicons/react/20/solid";
import { classNames } from "@/utils";

interface MobileNavProps {
  items: {
    title: string;
    href: string;
  }[];
}

export function MobileNavbar({ items }: MobileNavProps) {
  return (
    <div
      className={classNames(
        "animate-in slide-in-from-bottom-80 fixed inset-0 top-16 z-50 grid h-[calc(100vh-4rem)] grid-flow-row auto-rows-max overflow-auto p-6 pb-32 shadow-md md:hidden",
      )}
    >
      <div className="text-popover-foreground relative z-20 grid gap-6 rounded-md bg-dark p-4 shadow-md shadow-gray-700">
        <Link href="/" className="flex items-center space-x-2">
          <CodeBracketSquareIcon className="h-7 w-7 text-white" />
          <span className="font-bold">DevUI</span>
        </Link>
        <nav className="grid grid-flow-row auto-rows-max text-sm">
          {items.map((item, index) => (
            <Link
              key={index}
              href={item.href}
              className={classNames(
                "flex w-full items-center rounded-md p-2 text-sm font-medium hover:underline",
              )}
            >
              {item.title}
            </Link>
          ))}
        </nav>
      </div>
    </div>
  );
}


================================================
FILE: src/components/common/Select.tsx
================================================
"use client";
import { SelectOptionType } from "@/types/utils";
import { classNames } from "@/utils";
import { Combobox } from "@headlessui/react";
import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/20/solid";
import React, { useState } from "react";

interface SelectProps {
  label: string;
  options: SelectOptionType[];
  value: SelectOptionType | null;
  setValue: (val: { id: string; name: string }) => void;
}

const Select: React.FC<SelectProps> = ({ label, options, value, setValue }) => {
  const [query, setQuery] = useState("");

  const filteredOptions =
    query === ""
      ? options
      : options.filter((option) => {
          return option.name.toLowerCase().includes(query.toLowerCase());
        });

  return (
    <Combobox as="div" value={value} onChange={setValue}>
      <Combobox.Label className="block text-sm font-medium leading-6">
        {label}
      </Combobox.Label>
      <div className="relative mt-2">
        <Combobox.Button className="w-full">
          <Combobox.Input
            className="peer block w-full rounded-md border border-gray-700 bg-transparent px-6 py-4 text-base/6 text-white ring-4 ring-transparent transition focus:border-white focus:outline-none focus:ring-white/5 group-first:rounded-t-2xl group-last:rounded-b-2xl"
            onChange={(event) => setQuery(event.target.value)}
            displayValue={(option: any) => option?.name}
          />
        </Combobox.Button>
        <Combobox.Button className="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none">
          <ChevronUpDownIcon
            className="h-5 w-5 text-gray-400"
            aria-hidden="true"
          />
        </Combobox.Button>

        <Combobox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-gray-900 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
          {filteredOptions.map((option) => (
            <Combobox.Option
              key={option.id}
              value={option}
              className={({ active }) =>
                classNames(
                  "relative cursor-default select-none py-2 pl-8 pr-4 text-white",
                  active ? "bg-slate-600" : "",
                )
              }
            >
              {({ active }) => (
                <>
                  <span
                    className={classNames(
                      "block truncate capitalize",
                      option.id === value?.id ? "font-semibold" : "",
                    )}
                  >
                    {option.name}
                  </span>

                  {option.id === value?.id && (
                    <span
                      className={classNames(
                        "absolute inset-y-0 left-0 flex items-center pl-1.5",
                        active ? "text-white" : "text-gray-200",
                      )}
                    >
                      <CheckIcon className="h-5 w-5" aria-hidden="true" />
                    </span>
                  )}
                </>
              )}
            </Combobox.Option>
          ))}
        </Combobox.Options>
      </div>
    </Combobox>
  );
};

export default Select;


================================================
FILE: src/components/lib/CodePreviewer.tsx
================================================
import { renderHTMLFromJSX } from "@/utils";
import { CheckCircleIcon } from "@heroicons/react/20/solid";
import {
  CodeBracketIcon,
  DocumentDuplicateIcon,
  EyeIcon,
} from "@heroicons/react/24/outline";
import React, { useState } from "react";
import CodeSnippetRenderer from "./CodeSnippetRenderer";
import PreviewCard from "./PreviewCard";

interface CodePreviewerProps {
  title: string;
  children: React.ReactElement;
}

const CodePreviewer: React.FC<CodePreviewerProps> = ({ children, title }) => {
  const [previewMode, setPreviewMode] = useState(true);
  const [codeCopied, setCodeCopied] = useState(false);

  const copyToClipboard = () => {
    const codeToCopy = renderHTMLFromJSX(children);
    navigator.clipboard.writeText(codeToCopy);
    setCodeCopied(true);
    setTimeout(() => {
      setCodeCopied(false);
    }, 4000);
  };

  return (
    <div className="my-8 md:my-12 lg:my-14">
      <div className="flex flex-col justify-between md:flex-row md:items-center">
        <div className="mb-4 flex flex-row items-center space-x-4 md:mb-0">
          <h3 className=" font-sans font-semibold md:mb-0">{title}</h3>
        </div>
        <div className="flex items-center space-x-4">
          {/* Buttons */}
          <div className="">
            <span className="isolate inline-flex rounded-md shadow-sm">
              <button
                onClick={() => setPreviewMode(true)}
                type="button"
                className="relative inline-flex items-center rounded-l-md bg-gray-800 px-2 py-2 ring-1 ring-inset ring-gray-500 hover:bg-gray-700 focus:z-10"
              >
                <span className="sr-only">UI preview</span>
                <span className="flex items-center space-x-2 text-sm font-semibold text-gray-200">
                  <EyeIcon className="h-4 w-4" />
                  <span>Preview</span>
                </span>
              </button>
              <button
                onClick={() => setPreviewMode(false)}
                type="button"
                className="relative -ml-px inline-flex items-center rounded-r-md bg-gray-800 px-2 py-2 ring-1 ring-inset ring-gray-500 hover:bg-gray-700 focus:z-10"
              >
                <span className="sr-only">Code snippet</span>
                <span className="flex items-center space-x-2 text-sm font-semibold text-gray-200">
                  <CodeBracketIcon className="h-4 w-4" />
                  <span>Code</span>
                </span>
              </button>
            </span>
          </div>

          <button
            onClick={() => {
              if (codeCopied) return;
              copyToClipboard();
            }}
            className="cursor-pointer rounded-md p-2 hover:bg-gray-700 active:bg-gray-600"
          >
            {codeCopied ? (
              <CheckCircleIcon className="h-5 w-5 text-green-600" />
            ) : (
              <DocumentDuplicateIcon className="h-5 w-5" />
            )}
          </button>
        </div>
      </div>
      <div className="mt-4 w-full">
        {previewMode ? (
          <PreviewCard>{children}</PreviewCard>
        ) : (
          <CodeSnippetRenderer codeSnippet={renderHTMLFromJSX(children)} />
        )}
      </div>
    </div>
  );
};

export default CodePreviewer;


================================================
FILE: src/components/lib/CodeSnippetRenderer.tsx
================================================
import { langs } from "@uiw/codemirror-extensions-langs";
import * as themes from "@uiw/codemirror-themes-all";
import CodeMirror from "@uiw/react-codemirror";
import * as parserBabel from "prettier/parser-babel";
import * as parserHtml from "prettier/parser-html";
import prettier from "prettier/standalone";
import React, { useEffect, useState } from "react";

const DEFAULT_BASE_SETUP = {
  foldGutter: false,
  highlightActiveLine: false,
  highlightActiveLineGutter: false,
  indentOnInput: true,
  lineNumbers: false,
  syntaxHighlighting: true,
  tabSize: 4,
};

interface CodeSnippetRendererProps {
  codeSnippet: string;
}

const CodeSnippetRenderer: React.FC<CodeSnippetRendererProps> = ({
  codeSnippet,
}) => {
  const [code, setCode] = useState("");

  const formatCode = async () => {
    try {
      const formattedCode = await prettier.format(codeSnippet, {
        parser: "html",
        plugins: [parserHtml, parserBabel],
        semi: false,
        printWidth: 200,
        tabWidth: 2,
        bracketSameLine: true,
        singleAttributePerLine: true,
        htmlWhitespaceSensitivity: "ignore",
      });
      setCode(formattedCode);
    } catch (error) {
      console.error("Error while formatting the code: \n", error);
      setCode(codeSnippet);
    }
  };

  useEffect(() => {
    formatCode();
  }, [codeSnippet]);

  return (
    <div className="relative min-h-min w-full rounded-md border-2 border-gray-700 pb-0">
      <CodeMirror
        className={"CodeMirror__Main__Editor"}
        theme={themes["githubDark"]}
        value={code}
        extensions={[langs.html()]}
        readOnly={true}
        style={{
          fontSize: "14px",
        }}
        basicSetup={{
          ...DEFAULT_BASE_SETUP,
        }}
        indentWithTab
      />
    </div>
  );
};

export default CodeSnippetRenderer;


================================================
FILE: src/components/lib/PreviewCard.tsx
================================================
import { classNames, renderHTMLFromJSX } from "@/utils";
import { useEffect, useRef, useState } from "react";
import WidthHandler from "./WidthHandler";

interface PreviewCardProps {
  className?: string;
  children: React.ReactElement;
}

const PreviewCard = ({ children, className }: PreviewCardProps) => {
  const editorRef = useRef<HTMLDivElement>(null);
  const [containerWidth, setContainerWidth] = useState("100%");
  const [maxWidth, setMaxWidth] = useState<number | null>(null);

  useEffect(() => {
    if (!editorRef.current || maxWidth) return; // once set don't set max width again
    setMaxWidth(editorRef.current?.clientWidth);
  }, [editorRef]);

  return (
    <div
      ref={editorRef}
      className={classNames(
        "relative mx-auto min-h-[865px] overflow-visible rounded-md border-2 border-gray-700",
        className || "",
      )}
      style={{
        width: containerWidth || "100%",
      }}
    >
      <WidthHandler
        innerRef={editorRef}
        onChange={(width) => {
          setContainerWidth(`${width}px`);
        }}
        maxWidth={maxWidth || 1440}
      />
      {/* 
          // ! Reason to use iframe instead on any normal div is to avoid interference of devui parent project's styling and classes with the example's styling an classes
          // ! using iframe will isolate the examples from devui's parent application code. 
     */}
      <div
        className={classNames(
          "iframe-overlay absolute inset-0 z-20 mx-auto hidden h-full min-h-[865px] w-full overflow-auto rounded-md",
        )}
      ></div>
      <iframe
        className={classNames(
          "z-10 mx-auto min-h-[865px] w-full overflow-auto rounded-md",
        )}
        srcDoc={`
      <script src="https://cdn.tailwindcss.com"></script>
      ${renderHTMLFromJSX(children)}`}
      ></iframe>
    </div>
  );
};

export default PreviewCard;


================================================
FILE: src/components/lib/WidthHandler.tsx
================================================
import React, { RefObject, useEffect, useRef } from "react";

export const DEFAULT_WIDTHS = {
  minWidth: 360,
};

interface Props {
  innerRef: RefObject<HTMLDivElement>;
  onChange: (width: number) => void;
  maxWidth: number;
}

const edgeCase = (
  value: number,
  min: number,
  max: number,
): [number, boolean] => {
  if (value < min) {
    return [min, false];
  }
  if (value > max) {
    return [max, false];
  }
  return [value, true];
};

const WidthHandler: React.FC<Props> = ({ innerRef, onChange, maxWidth }) => {
  const { minWidth } = DEFAULT_WIDTHS;

  const startX = useRef<number | null>(null);
  const startWidth = useRef<number | null>(null);

  useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      if (!startX.current || !startWidth.current) return;
      const delta = e.pageX - startX.current; // leftOrRight === 'left' ? startX - e.pageX : (startX - e.pageX) * -1
      const calculated = startWidth.current + delta * window.devicePixelRatio;
      const [newWidth, isChanging] = edgeCase(calculated, minWidth, maxWidth);
      if (isChanging) {
        onChange(newWidth);
      }
    };
    window.addEventListener("mousemove", handleMouseMove);
    return () => window.removeEventListener("mousemove", handleMouseMove);
  }, [innerRef, maxWidth, minWidth, onChange]);

  useEffect(() => {
    const handleMouseUp = () => {
      startX.current = null;
      document.body.classList.remove("resizing");
    };
    window.addEventListener("mouseup", handleMouseUp);
    return () => window.removeEventListener("mouseup", handleMouseUp);
  }, []);

  return (
    <div
      onMouseDown={(e) => {
        document.body.classList.add("resizing");
        startX.current = e.pageX;
        startWidth.current = innerRef.current
          ? innerRef.current.clientWidth
          : 0;
      }}
      role="separator"
      aria-orientation="vertical"
      aria-valuemin={minWidth}
      aria-valuemax={maxWidth}
      className="absolute -right-4 top-1/2 z-30 flex h-14 w-2 cursor-ew-resize rounded-md bg-slate-600"
    ></div>
  );
};

export default WidthHandler;


================================================
FILE: src/components/templates/authentication/forgot-password.jsx
================================================
import React from "react";

const ForgotPassword = () => {
  return (
    <div className="min-h-screen bg-[#121212]">
      <header className="fixed top-0 z-10 mx-auto w-full max-w-full bg-[#121212] p-6 text-white lg:px-10">
        <h1>DevUI</h1>
      </header>
      <div className="mx-auto flex w-full items-stretch justify-between gap-10">
        <div className="mt-20 flex w-full flex-col items-start justify-start p-6 md:w-1/2 lg:px-10">
          <div className="w-full">
            <h1 className="mb-2 text-5xl font-extrabold text-white">
              Forgot password?
            </h1>
            <p className="text-xs text-slate-400">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime
              eius, aliquid autem numquam iure sint perspiciatis voluptatum
              soluta fugiat.
            </p>
          </div>
          <div className="my-14 flex w-full flex-col items-start justify-start gap-4">
            <div className="flex w-full flex-col items-start justify-start gap-2">
              <label className="text-xs text-slate-200">Email</label>
              <input
                placeholder="Enter an email..."
                autoComplete="false"
                type="email"
                className="w-full border-[1px] border-white bg-black p-4 text-white placeholder:text-gray-500"
              />
            </div>

            <button className="w-full bg-[#ae7aff] p-3 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e]">
              Start recovery
            </button>

            <p className="my-14 text-sm font-light text-white">
              Already registered?{" "}
              <span className="cursor-pointer font-bold hover:underline">
                Sign in to your account
              </span>
            </p>
          </div>
        </div>
        <div className="fixed right-0 z-20 hidden h-screen w-1/2 md:block">
          <img
            className="h-full w-full object-cover"
            src="https://images.pexels.com/photos/1144275/pexels-photo-1144275.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
            alt="register_image"
          />
        </div>
      </div>
    </div>
  );
};

export default ForgotPassword;


================================================
FILE: src/components/templates/authentication/index.ts
================================================
import Register from "./register";
import Login from "./login";
import ForgotPassword from "./forgot-password";

const Authentication = { Register, Login, ForgotPassword };

export default Authentication;


================================================
FILE: src/components/templates/authentication/login.jsx
================================================
import React from "react";

const Login = () => {
  return (
    <div className="min-h-screen bg-[#121212]">
      <header className="fixed top-0 z-10 mx-auto w-full max-w-full bg-[#121212] p-6 text-white lg:px-10">
        <h1>DevUI</h1>
      </header>
      <div className="mx-auto flex w-full items-stretch justify-between gap-10">
        <div className="mt-20 flex w-full flex-col items-start justify-start p-6 md:w-1/2 lg:px-10">
          <div className="w-full">
            <h1 className="mb-2 text-5xl font-extrabold text-white">Log in</h1>
            <p className="text-xs text-slate-400">
              Before we start, please log into your account
            </p>
          </div>
          <div className="my-14 flex w-full flex-col items-start justify-start gap-4">
            <div className="flex w-full flex-col items-start justify-start gap-2">
              <label className="text-xs text-slate-200">Username</label>
              <input
                placeholder="Enter a username..."
                autoComplete="false"
                className="w-full border-[1px] border-white bg-black p-4 text-white placeholder:text-gray-500"
              />
            </div>
            <div className="flex w-full flex-col items-start justify-start gap-2">
              <label className="text-xs text-slate-200">Password</label>
              <input
                placeholder="Enter a password..."
                autoComplete="false"
                type="password"
                className="w-full border-[1px] border-white bg-black p-4 text-white placeholder:text-gray-500"
              />
            </div>
            <div className="inline-flex w-full items-center justify-between">
              <div className="mr-4 flex items-center">
                <input
                  type="checkbox"
                  id="checkbox-1"
                  name="checkbox-1"
                  className="absolute h-6 w-6 cursor-pointer opacity-0 [&:checked+div]:bg-green-500 [&:checked+div_svg]:block"
                />
                <div className="mr-2 flex h-6 w-6 flex-shrink-0 items-center justify-center border-[1px] border-white bg-transparent focus-within:border-white">
                  <svg
                    className="pointer-events-none hidden h-3 w-3 fill-current text-white"
                    version="1.1"
                    viewBox="0 0 17 12"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <g fill="none" fillRule="evenodd">
                      <g
                        transform="translate(-9 -11)"
                        fill="#000000"
                        fillRule="nonzero"
                      >
                        <path d="m25.576 11.414c0.56558 0.55188 0.56558 1.4439 0 1.9961l-9.404 9.176c-0.28213 0.27529-0.65247 0.41385-1.0228 0.41385-0.37034 0-0.74068-0.13855-1.0228-0.41385l-4.7019-4.588c-0.56584-0.55188-0.56584-1.4442 0-1.9961 0.56558-0.55214 1.4798-0.55214 2.0456 0l3.679 3.5899 8.3812-8.1779c0.56558-0.55214 1.4798-0.55214 2.0456 0z" />
                      </g>
                    </g>
                  </svg>
                </div>
                <div className="ml-3 text-sm leading-6">
                  <label
                    htmlFor="checkbox-1"
                    className="text-sm font-medium text-white"
                  >
                    Remember me
                  </label>
                </div>
              </div>

              <p className="cursor-pointer text-sm text-white hover:underline">
                Forgot password?
              </p>
            </div>

            <button className="w-full bg-[#ae7aff] p-3 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e]">
              Log in
            </button>
            <div className="mx-auto my-3 flex w-full max-w-md items-center justify-center gap-4 text-white">
              <hr className="w-full border-[0.1px] border-white" />
              <p className="text-sm">OR</p>
              <hr className="w-full border-[0.1px] border-white" />
            </div>
            <button className="inline-flex w-full items-center justify-center gap-3 border-[1px] border-white bg-black p-3 text-center text-white">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                height="24"
                viewBox="0 0 24 24"
                width="24"
              >
                <path
                  d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
                  fill="#4285F4"
                />
                <path
                  d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
                  fill="#34A853"
                />
                <path
                  d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
                  fill="#FBBC05"
                />
                <path
                  d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
                  fill="#EA4335"
                />
                <path d="M1 1h22v22H1z" fill="none" />
              </svg>{" "}
              Login with Google
            </button>
            <button className="inline-flex w-full items-center justify-center gap-3 border-[1px] border-white bg-black p-3 text-center text-white">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="#ffffff"
              >
                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
              </svg>
              Login with GitHub
            </button>
            <p className="my-14 text-sm font-light text-white">
              Don&apos;t have an account?{" "}
              <span className="cursor-pointer font-bold hover:underline">
                Create an account
              </span>
            </p>
          </div>
        </div>
        <div className="fixed right-0 z-20 hidden h-screen w-1/2 md:block">
          <img
            className="h-full w-full object-cover"
            src="https://images.pexels.com/photos/1144275/pexels-photo-1144275.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
            alt="register_image"
          />
        </div>
      </div>
    </div>
  );
};

export default Login;


================================================
FILE: src/components/templates/authentication/register.jsx
================================================
const Register = () => {
  return (
    <div className="min-h-screen bg-[#121212]">
      <header className="fixed top-0 z-10 mx-auto w-full max-w-full bg-[#121212] p-6 text-white lg:px-10">
        <h1>DevUI</h1>
      </header>
      <div className="mx-auto flex w-full items-stretch justify-between gap-10">
        <div className="mt-20 flex w-full flex-col items-start justify-start p-6 md:w-1/2 lg:px-10">
          <div className="w-full">
            <h1 className="mb-2 text-5xl font-extrabold text-white">
              Register
            </h1>
            <p className="text-xs text-slate-400">
              Before we start, please create your account
            </p>
          </div>
          <div className="my-14 flex w-full flex-col items-start justify-start gap-4">
            <div className="flex w-full flex-col items-start justify-start gap-2">
              <label className="text-xs text-slate-200">First name</label>
              <input
                placeholder="Enter a first name..."
                autoComplete="false"
                className="w-full border-[1px] border-white bg-black p-4 text-white placeholder:text-gray-500"
              />
            </div>
            <div className="flex w-full flex-col items-start justify-start gap-2">
              <label className="text-xs text-slate-200">Last name</label>
              <input
                placeholder="Enter a last name..."
                autoComplete="false"
                className="w-full border-[1px] border-white bg-black p-4 text-white placeholder:text-gray-500"
              />
            </div>
            <div className="flex w-full flex-col items-start justify-start gap-2">
              <label className="text-xs text-slate-200">Email</label>
              <input
                placeholder="Enter an email..."
                autoComplete="false"
                className="w-full border-[1px] border-white bg-black p-4 text-white placeholder:text-gray-500"
              />
            </div>
            <div className="flex w-full flex-col items-start justify-start gap-2">
              <label className="text-xs text-slate-200">Username</label>
              <input
                placeholder="Enter a username..."
                autoComplete="false"
                className="w-full border-[1px] border-white bg-black p-4 text-white placeholder:text-gray-500"
              />
            </div>
            <div className="flex w-full flex-col items-start justify-start gap-2">
              <label className="text-xs text-slate-200">Password</label>
              <input
                placeholder="Enter a password..."
                autoComplete="false"
                type="password"
                className="w-full border-[1px] border-white bg-black p-4 text-white placeholder:text-gray-500"
              />
            </div>

            <div className="mr-4 flex items-center">
              <input
                type="checkbox"
                id="checkbox-1"
                name="checkbox-1"
                className="absolute h-6 w-6 cursor-pointer opacity-0 [&:checked+div]:bg-green-500 [&:checked+div_svg]:block"
              />
              <div className="mr-2 flex h-6 w-6 flex-shrink-0 items-center justify-center border-[1px] border-white bg-transparent focus-within:border-white">
                <svg
                  className="pointer-events-none hidden h-3 w-3 fill-current text-white"
                  version="1.1"
                  viewBox="0 0 17 12"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <g fill="none" fillRule="evenodd">
                    <g
                      transform="translate(-9 -11)"
                      fill="#000000"
                      fillRule="nonzero"
                    >
                      <path d="m25.576 11.414c0.56558 0.55188 0.56558 1.4439 0 1.9961l-9.404 9.176c-0.28213 0.27529-0.65247 0.41385-1.0228 0.41385-0.37034 0-0.74068-0.13855-1.0228-0.41385l-4.7019-4.588c-0.56584-0.55188-0.56584-1.4442 0-1.9961 0.56558-0.55214 1.4798-0.55214 2.0456 0l3.679 3.5899 8.3812-8.1779c0.56558-0.55214 1.4798-0.55214 2.0456 0z" />
                    </g>
                  </g>
                </svg>
              </div>
              <div className="ml-3 text-sm leading-6">
                <label
                  htmlFor="checkbox-1"
                  className="text-sm font-medium text-white"
                >
                  You will get emails on new features and releases
                </label>
              </div>
            </div>

            <div className="mr-4 flex items-center">
              <input
                type="checkbox"
                id="checkbox-2"
                name="checkbox-2"
                className="absolute h-6 w-6 cursor-pointer opacity-0 [&:checked+div]:bg-green-500 [&:checked+div_svg]:block"
              />
              <div className="mr-2 flex h-6 w-6 flex-shrink-0 items-center justify-center border-[1px] border-white bg-transparent focus-within:border-white">
                <svg
                  className="pointer-events-none hidden h-3 w-3 fill-current text-white"
                  version="1.1"
                  viewBox="0 0 17 12"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <g fill="none" fillRule="evenodd">
                    <g
                      transform="translate(-9 -11)"
                      fill="#000000"
                      fillRule="nonzero"
                    >
                      <path d="m25.576 11.414c0.56558 0.55188 0.56558 1.4439 0 1.9961l-9.404 9.176c-0.28213 0.27529-0.65247 0.41385-1.0228 0.41385-0.37034 0-0.74068-0.13855-1.0228-0.41385l-4.7019-4.588c-0.56584-0.55188-0.56584-1.4442 0-1.9961 0.56558-0.55214 1.4798-0.55214 2.0456 0l3.679 3.5899 8.3812-8.1779c0.56558-0.55214 1.4798-0.55214 2.0456 0z" />
                    </g>
                  </g>
                </svg>
              </div>
              <div className="ml-3 text-sm leading-6">
                <label
                  htmlFor="checkbox-2"
                  className="text-sm font-medium text-white"
                >
                  I agree to the terms and conditions
                </label>
              </div>
            </div>
            <button className="w-full bg-[#ae7aff] p-3 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e]">
              Create Account
            </button>
            <p className="my-14 text-sm font-light text-white">
              Already registered?{" "}
              <span className="cursor-pointer font-bold hover:underline">
                Sign in to your account
              </span>
            </p>
          </div>
        </div>
        <div className="fixed right-0 z-20 hidden h-screen w-1/2 md:block">
          <img
            className="h-full w-full object-cover"
            src="https://images.pexels.com/photos/1144275/pexels-photo-1144275.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
            alt="register_image"
          />
        </div>
      </div>
    </div>
  );
};

export default Register;


================================================
FILE: src/components/templates/chat/chat-screen.jsx
================================================
import React from "react";
import { PaperAirplaneIcon, PlusCircleIcon } from "@heroicons/react/20/solid";
import {
  Bars3BottomLeftIcon,
  BellIcon,
  EllipsisVerticalIcon,
  FaceSmileIcon,
  FunnelIcon,
  MagnifyingGlassIcon,
  PaperClipIcon,
  ShareIcon,
} from "@heroicons/react/24/outline";
import { classNames } from "@/utils";

const chatListDummyData = [
  {
    avatar:
      "https://images.pexels.com/photos/18096595/pexels-photo-18096595/free-photo-of-music-on-street.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
    fullName: "Jane Smith",
    lastMessage:
      "Hi there! How have you been? It's been a while since we last caught up. Let's plan to meet up soon.",
    dateTime: "2 hours ago",
  },
  {
    avatar:
      "https://images.pexels.com/photos/18094275/pexels-photo-18094275.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
    fullName: "Alice Smith",
    lastMessage:
      "How's it going on your end? I heard you had an exciting trip last week. Tell me all about it!",
    dateTime: "4 hours ago",
  },
  {
    avatar:
      "https://images.pexels.com/photos/13847652/pexels-photo-13847652.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
    fullName: "Bob Johnson",
    lastMessage:
      "What's for dinner tonight? I'm craving some Italian food. Any recommendations?",
    dateTime: "Yesterday",
  },
  {
    avatar:
      "https://images.pexels.com/photos/13847596/pexels-photo-13847596.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
    fullName: "Emily Davis",
    lastMessage:
      "Can you help me with this coding problem? I'm stuck on it for hours now.",
    dateTime: "2 days ago",
  },
  {
    avatar:
      "https://images.pexels.com/photos/7775636/pexels-photo-7775636.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
    fullName: "Michael Wilson",
    lastMessage:
      "See you tomorrow at the park. Don't forget to bring your running shoes!",
    dateTime: "2 weeks ago",
  },
  {
    avatar:
      "https://images.pexels.com/photos/18107025/pexels-photo-18107025/free-photo-of-man-reading-newspaper.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
    fullName: "Sophia Anderson",
    lastMessage:
      "I miss you so much! It's been ages since we hung out. Let's plan something soon.",
    dateTime: "2 weeks ago",
  },
  {
    avatar:
      "https://images.pexels.com/photos/7775640/pexels-photo-7775640.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
    fullName: "Liam Brown",
    lastMessage:
      "Let's meet up for coffee. I have some exciting news to share with you!",
    dateTime: "3 weeks ago",
  },
  {
    avatar:
      "https://images.pexels.com/photos/18096595/pexels-photo-18096595/free-photo-of-music-on-street.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
    fullName: "Olivia Lee",
    lastMessage:
      "I have some big news! Guess what? I'm getting married next month!",
    dateTime: "4 weeks ago",
  },
  {
    avatar:
      "https://images.pexels.com/photos/7775636/pexels-photo-7775636.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
    fullName: "Noah White",
    lastMessage:
      "How's the weather there? I'm planning a weekend hike and hoping for good weather.",
    dateTime: "1 month ago",
  },
  {
    avatar:
      "https://images.pexels.com/photos/13847596/pexels-photo-13847596.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
    fullName: "Ava Garcia",
    lastMessage:
      "Good morning! Did you catch the sunrise today? It was breathtaking.",
    dateTime: "2 months ago",
  },
  {
    avatar:
      "https://images.pexels.com/photos/7775640/pexels-photo-7775640.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
    fullName: "Ethan Martinez",
    lastMessage:
      "Let's go for a long walk by the beach this evening. The weather is perfect.",
    dateTime: "3 months ago",
  },
  {
    avatar:
      "https://images.pexels.com/photos/18107025/pexels-photo-18107025/free-photo-of-man-reading-newspaper.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
    fullName: "Mia Jones",
    lastMessage:
      "Happy birthday! I hope you have an amazing day filled with joy and surprises.",
    dateTime: "4 months ago",
  },
  {
    avatar:
      "https://images.pexels.com/photos/7775640/pexels-photo-7775640.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
    fullName: "James Harris",
    lastMessage:
      "What's new with you lately? I've been swamped with work, but I miss our chats.",
    dateTime: "5 months ago",
  },
];

const chatMessagesDummyData = [
  {
    fullName: "Dan Abramov",
    message:
      "I'm good too, just catching up on some reading and enjoying the weather outside.",
    time: "5 minutes ago",
    isOwnMessage: true,
    hasAttachments: true,
    avatar:
      "https://images.pexels.com/photos/18148932/pexels-photo-18148932/free-photo-of-bench-city-man-people.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  },
  {
    fullName: "Jane Smith",
    message: "That sounds lovely! What book are you currently reading?",
    time: "10 minutes ago",
    isOwnMessage: false,
    avatar:
      "https://images.pexels.com/photos/18107024/pexels-photo-18107024/free-photo-of-an-old-city-view.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  },
  {
    fullName: "Dan Abramov",
    message:
      "I'm reading 'The Great Gatsby' by F. Scott Fitzgerald. It's a classic!",
    time: "15 minutes ago",
    isOwnMessage: true,
    avatar:
      "https://images.pexels.com/photos/18148932/pexels-photo-18148932/free-photo-of-bench-city-man-people.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  },
  {
    fullName: "Jane Smith",
    message: "Oh, I've heard great things about that book. Enjoy your reading!",
    time: "20 minutes ago",
    isOwnMessage: false,
    avatar:
      "https://images.pexels.com/photos/18107024/pexels-photo-18107024/free-photo-of-an-old-city-view.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  },
  {
    fullName: "Dan Abramov",
    message: "Thanks! It's such a beautifully written novel.",
    time: "25 minutes ago",
    isOwnMessage: true,
    avatar:
      "https://images.pexels.com/photos/18148932/pexels-photo-18148932/free-photo-of-bench-city-man-people.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  },

  {
    fullName: "Dan Abramov",
    message:
      "I can't wait to see what happens next in the series. It's been so captivating!",
    time: "45 minutes ago",
    isOwnMessage: true,
    avatar:
      "https://images.pexels.com/photos/18148932/pexels-photo-18148932/free-photo-of-bench-city-man-people.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  },
  {
    fullName: "Jane Smith",
    message:
      "I completely understand. It's always exciting when a series keeps you hooked.",
    time: "50 minutes ago",
    isOwnMessage: false,
    avatar:
      "https://images.pexels.com/photos/18107024/pexels-photo-18107024/free-photo-of-an-old-city-view.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  },
  {
    fullName: "Dan Abramov",
    message:
      "Absolutely! Well, I should get back to work now. Catch up with you later!",
    time: "55 minutes ago",
    isOwnMessage: true,
    avatar:
      "https://images.pexels.com/photos/18148932/pexels-photo-18148932/free-photo-of-bench-city-man-people.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  },
  {
    fullName: "Dan Abramov",
    message: "Sounds like a plan! Let's do it!",
    time: "18 hours ago",
    isOwnMessage: true,
    avatar:
      "https://images.pexels.com/photos/18148932/pexels-photo-18148932/free-photo-of-bench-city-man-people.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  },
  {
    fullName: "Jane Smith",
    message: "Count me in too!",
    time: "19 hours ago",
    isOwnMessage: false,
    avatar:
      "https://images.pexels.com/photos/18107024/pexels-photo-18107024/free-photo-of-an-old-city-view.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  },
  {
    fullName: "Dan Abramov",
    message: "Great! I'll make a reservation then.",
    time: "20 hours ago",
    isOwnMessage: true,
    avatar:
      "https://images.pexels.com/photos/18148932/pexels-photo-18148932/free-photo-of-bench-city-man-people.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  },
  {
    fullName: "Jane Smith",
    message: "Awesome! Looking forward to it.",
    time: "21 hours ago",
    isOwnMessage: false,
    avatar:
      "https://images.pexels.com/photos/18107024/pexels-photo-18107024/free-photo-of-an-old-city-view.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  },
  {
    fullName: "Dan Abramov",
    message: "Catch up with you later!",
    time: "22 hours ago",
    isOwnMessage: true,
    avatar:
      "https://images.pexels.com/photos/18148932/pexels-photo-18148932/free-photo-of-bench-city-man-people.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  },
  {
    fullName: "Jane Smith",
    message: "Sure thing! Take care!",
    time: "23 hours ago",
    isOwnMessage: false,
    avatar:
      "https://images.pexels.com/photos/18107024/pexels-photo-18107024/free-photo-of-an-old-city-view.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  },

  {
    fullName: "Jane Smith",
    message: "That's the spirit! Keep up the good work.",
    time: "6 days ago",
    isOwnMessage: false,
    hasAttachments: true,

    avatar:
      "https://images.pexels.com/photos/18107024/pexels-photo-18107024/free-photo-of-an-old-city-view.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  },
];

const dummyAttachments = [
  "https://images.pexels.com/photos/18094275/pexels-photo-18094275.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  "https://images.pexels.com/photos/18148932/pexels-photo-18148932/free-photo-of-bench-city-man-people.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  "https://images.pexels.com/photos/18107024/pexels-photo-18107024/free-photo-of-an-old-city-view.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
];

const ChatScreen = () => {
  return (
    <div className="bg-[#121212]">
      <header className="fixed top-0 z-10 mx-auto flex w-full max-w-full items-center justify-between border-b-[1px] border-b-slate-300 bg-[#121212] p-4 text-white lg:px-10">
        <h1 className="text-xl font-extrabold md:text-3xl">Inbox</h1>
        <div className="flex w-max flex-shrink-0 items-center justify-end gap-6">
          <span className="relative">
            <BellIcon className="h-6 w-6 text-white md:h-8 md:w-8" />
            <span className="absolute -right-1 -top-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 p-1 text-sm text-white md:h-5 md:w-5 md:text-base">
              4
            </span>
          </span>
          <div className="h-11 w-11 rounded-full border-2 border-white">
            <img
              src="https://images.pexels.com/photos/18148932/pexels-photo-18148932/free-photo-of-bench-city-man-people.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
              alt="avatar"
              className="h-10 w-10 rounded-full object-cover"
            />
          </div>
          <button className="hidden w-max items-center justify-center border-[1px] border-white p-3 text-center font-bold text-white md:inline-flex">
            <PlusCircleIcon className="mr-2 h-5 w-5" /> Create a chat
          </button>
        </div>
      </header>
      <div className="mt-[77px] flex h-[calc(100vh-77px)] w-full items-center justify-center overflow-hidden p-0 md:mt-[83px] md:h-[calc(100vh-83px)]">
        <button
          className="peer fixed h-full w-full md:hidden"
          aria-label="mobile-chatlist-toggler"
          aria-details="Remove when using in your project. Following button is only to toggle chatlist sidebar"
        ></button>
        <div className="fixed right-full top-[77px] z-10 h-full w-full border-white bg-[#121212] transition-all duration-300 ease-in-out peer-focus:right-0 md:static md:block md:w-[30%] md:border-r-[1px]">
          <div className="flex w-full items-center justify-start gap-2 border-b-[1px] border-white p-4">
            <input
              placeholder="Search chat..."
              className="w-full bg-transparent px-2 text-white !outline-none placeholder:text-gray-500 md:px-4"
            />
            <button className="inline-flex h-7 w-7 flex-shrink-0 items-center justify-center border-[1px] border-white p-1 md:h-10 md:w-10">
              <MagnifyingGlassIcon className="h-5 w-5 text-white" />
            </button>
            <button className="hidden h-10 w-10 flex-shrink-0 items-center justify-center border-[1px] border-white p-1 md:inline-flex">
              <FunnelIcon className="h-5 w-5 text-white" />
            </button>
          </div>
          <ul className="flex h-[calc(100%-140px)] w-full flex-col items-start justify-start divide-y-[1px] divide-white overflow-y-auto md:h-[calc(100%-73px)]">
            {chatListDummyData.map((item, i) => {
              return (
                <li
                  className="w-full cursor-pointer p-4 hover:bg-[#232323] md:p-6"
                  key={i}
                >
                  <div className="flex w-full items-start justify-start gap-3 md:gap-4">
                    <img
                      className="flex aspect-square h-10 w-10 flex-shrink-0 rounded-full object-cover"
                      src={item.avatar}
                      alt="avatar"
                    />
                    <div className="flex w-full flex-col items-start justify-start gap-1 truncate text-ellipsis">
                      <div className="flex w-full items-center justify-between text-[10px] md:text-xs">
                        <p className="text-gray-400">{item.fullName}</p>
                        <p className="text-gray-400">{item.dateTime}</p>
                      </div>
                      <p className="text-xs text-white md:text-sm">
                        {item.lastMessage}
                      </p>
                    </div>
                  </div>
                </li>
              );
            })}
          </ul>
        </div>
        <div className="h-full w-full md:w-[70%]">
          <div className="flex w-full items-center justify-between gap-2 border-b-[1px] border-white p-4">
            <div className="flex w-full items-center justify-start gap-3">
              <button className="inline-flex h-7 w-7 flex-shrink-0 items-center justify-center border-[1px] border-white p-1 md:hidden md:h-10 md:w-10">
                <Bars3BottomLeftIcon className="h-5 w-5 text-white" />
              </button>
              <img
                className="flex aspect-square h-10 w-10 flex-shrink-0 rounded-full object-cover"
                src="https://images.pexels.com/photos/18107024/pexels-photo-18107024/free-photo-of-an-old-city-view.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
                alt="avatar"
              />
              <p className="font-semibold text-white">Jane smith</p>
            </div>
            <div className="flex items-center justify-end gap-4">
              <button className="hidden h-10 w-10 flex-shrink-0 items-center justify-center border-[1px] border-white p-1 md:inline-flex">
                <ShareIcon className="h-5 w-5 text-white" />
              </button>
              <button className="inline-flex h-7 w-7 flex-shrink-0 items-center justify-center border-[1px] border-white p-1 md:h-10 md:w-10">
                <EllipsisVerticalIcon className="h-5 w-5 text-white" />
              </button>
            </div>
          </div>
          <div className="relative h-[calc(100vh-150px)] w-full p-0 md:h-[calc(100vh-158px)] md:p-4">
            <div className="flex h-[calc(100%-53px)] w-full flex-col-reverse gap-8 overflow-y-auto px-2 py-4 md:h-[calc(100%-90px)] md:p-0">
              <div
                className={
                  "flex min-w-[150px] max-w-[80%] items-start justify-start gap-2 text-white md:max-w-[70%]"
                }
              >
                <img
                  className="flex aspect-square h-7 w-7 flex-shrink-0 rounded-full object-cover md:h-10 md:w-10"
                  src={
                    "https://images.pexels.com/photos/18107024/pexels-photo-18107024/free-photo-of-an-old-city-view.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
                  }
                  alt="avatar"
                />
                <div className="flex w-full max-w-[70%] flex-col gap-2">
                  <p className="text-xs">Jane Smith</p>
                  <div
                    className={
                      "relative w-fit bg-[#343434] p-3 text-sm after:absolute after:left-0 after:top-0 after:border-r-[15px] after:border-t-[15px] after:border-r-transparent after:border-t-[#121212]"
                    }
                  >
                    <div className="flex w-full items-center justify-center gap-1.5 px-3 py-1">
                      <span className="h-2 w-2 animate-pulse rounded-full bg-gray-300"></span>
                      <span className="h-2 w-2 animate-pulse rounded-full bg-gray-300"></span>
                      <span className="h-2 w-2 animate-pulse rounded-full bg-gray-300"></span>
                    </div>
                  </div>
                </div>
              </div>
              {chatMessagesDummyData.map((message, i) => {
                return (
                  <div
                    className={classNames(
                      "flex min-w-[150px] max-w-[80%] items-start justify-start gap-2 text-white md:max-w-[70%]",
                      message.isOwnMessage
                        ? "ml-auto flex-row-reverse"
                        : "mr-0",
                    )}
                    key={i}
                  >
                    <img
                      className="flex aspect-square h-7 w-7 flex-shrink-0 rounded-full object-cover md:h-10 md:w-10"
                      src={message.avatar}
                      alt="avatar"
                    />
                    <div
                      className={classNames(
                        "flex w-full flex-col gap-1 md:gap-2",
                        message.isOwnMessage ? "items-end justify-end" : "",
                      )}
                    >
                      <p className="text-[10px] md:text-xs">
                        {message.fullName}
                        <span className="ml-2 text-gray-400">
                          {message.time}
                        </span>
                      </p>
                      <div
                        className={classNames(
                          "relative w-fit p-2 text-xs after:absolute after:top-0 after:border-t-[15px] after:border-t-[#121212] md:p-3 md:text-sm",
                          message.isOwnMessage
                            ? "bg-[#ae7aff] after:right-0 after:border-l-[15px] after:border-l-transparent"
                            : "bg-[#343434] after:left-0 after:border-r-[15px] after:border-r-transparent",
                        )}
                      >
                        {message.message}
                      </div>
                      {message?.hasAttachments ? (
                        <div
                          className={classNames(
                            "grid w-full grid-cols-2 items-start justify-start gap-1 md:max-w-[90%] md:gap-2",
                            message.isOwnMessage ? "ml-auto" : "",
                          )}
                        >
                          {dummyAttachments.map((img, i) => {
                            return (
                              <img
                                key={i}
                                className="flex aspect-video w-full flex-shrink-0 object-cover"
                                src={img}
                                alt="avatar"
                              />
                            );
                          })}
                        </div>
                      ) : null}
                    </div>
                  </div>
                );
              })}
            </div>
            <div className="sticky top-full flex w-full items-center justify-start gap-1 border-t-[1px] border-white px-4 py-2 md:gap-4 md:border-[1px] md:shadow-[5px_5px_0px_0px_#4f4e4e]">
              <img
                className="hidden aspect-square h-5 w-5 flex-shrink-0 rounded-full object-cover md:flex md:h-10 md:w-10"
                src="https://images.pexels.com/photos/18148932/pexels-photo-18148932/free-photo-of-bench-city-man-people.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
                alt="avatar"
              />
              <input
                placeholder="Message..."
                className="w-full bg-transparent p-2 text-sm text-white !outline-none placeholder:text-gray-500 md:p-4 md:text-base"
              />
              <button className="hidden h-5 w-5 flex-shrink-0 items-center justify-center p-1 md:flex md:h-10 md:w-10">
                <FaceSmileIcon className="h-6 w-6 text-white" />
              </button>
              <button className="flex h-7 w-7 flex-shrink-0 items-center  justify-center p-1 md:h-10 md:w-10">
                <PaperClipIcon className="h-6 w-6 text-white" />
              </button>
              <button className="flex h-7 w-7 flex-shrink-0 items-center justify-center  bg-[#ae7aff] p-1 md:h-10 md:w-10">
                <PaperAirplaneIcon className="h-6 w-6 text-black" />
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ChatScreen;


================================================
FILE: src/components/templates/chat/create-group-chat.jsx
================================================
import {
  BellIcon,
  PlusCircleIcon,
  XMarkIcon,
} from "@heroicons/react/24/outline";
import React from "react";

const selectedUsers = [
  {
    name: "John Smith",
    avatar:
      "https://images.pexels.com/photos/18096595/pexels-photo-18096595/free-photo-of-music-on-street.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  },
  {
    name: "Emily Gardener",
    avatar:
      "https://images.pexels.com/photos/18094275/pexels-photo-18094275.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  },
  {
    name: "Olivia Root",
    avatar:
      "https://images.pexels.com/photos/13847652/pexels-photo-13847652.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  },
  {
    name: "John Denny",
    avatar:
      "https://images.pexels.com/photos/13847596/pexels-photo-13847596.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  },
  {
    name: "Emily Rose",
    avatar:
      "https://images.pexels.com/photos/7775636/pexels-photo-7775636.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  },
];

const CreateGroupChat = () => {
  return (
    <div className="min-h-screen bg-[#121212]">
      <header className="fixed top-0 z-10 mx-auto flex w-full max-w-[85rem] items-center justify-between border-b-[1px] border-b-slate-300 bg-[#121212] p-4 text-white lg:px-10">
        <h1 className="text-xl font-extrabold md:text-3xl">Inbox</h1>
        <div className="flex w-max flex-shrink-0 items-center justify-end gap-6">
          <span className="relative">
            <BellIcon className="h-6 w-6 text-white md:h-8 md:w-8" />
            <span className="absolute -right-1 -top-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 p-1 text-sm text-white md:h-5 md:w-5 md:text-base">
              4
            </span>
          </span>
          <div className="h-11 w-11 rounded-full border-2 border-white">
            <img
              src="https://images.pexels.com/photos/18148932/pexels-photo-18148932/free-photo-of-bench-city-man-people.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
              alt="avatar"
              className="h-10 w-10 rounded-full object-cover"
            />
          </div>
          <button className="hidden w-max items-center justify-center border-[1px] border-white p-3 text-center font-bold text-white md:inline-flex">
            <PlusCircleIcon className="mr-2 h-5 w-5" /> Create a chat
          </button>
        </div>
      </header>
      <div
        className="relative z-10"
        aria-labelledby="modal-title"
        role="dialog"
        aria-modal="true"
      >
        <div className="fixed inset-0 bg-[#121212] bg-opacity-75 transition-opacity" />
        <div className="fixed inset-0 z-10 w-screen overflow-y-auto">
          <div className="flex min-h-full items-end justify-center p-0 text-center md:items-center md:p-2">
            <div className="relative w-full transform overflow-hidden border-t-[1px] border-white bg-[#121212] text-left text-white transition-all md:my-8 md:w-full md:max-w-5xl md:border-[1px]">
              <div className="flex items-center justify-between border-b-[1px] border-white p-4">
                <p className="text-xl font-bold">Create a Group</p>
                <XMarkIcon className="h-6 w-6 text-white" role="button" />
              </div>
              <div className="flex w-full flex-col gap-4 p-4 md:gap-6 md:p-6">
                <div className="flex w-full flex-col items-start justify-start gap-2">
                  <label className="text-xs text-slate-200">Group name</label>
                  <input
                    placeholder="Enter group name..."
                    autoComplete="false"
                    className="w-full border-[1px] border-white bg-black p-4 text-white placeholder:text-gray-500"
                  />
                </div>
                <div className="flex w-full flex-col items-start justify-start gap-2">
                  <label className="text-xs text-slate-200">
                    Select a user
                  </label>
                  <div className="w-full border-[1px] border-white pr-4">
                    <select
                      placeholder="Select a user..."
                      autoComplete="false"
                      className="w-full bg-[#121212] py-4 pl-4 text-white placeholder:text-gray-500 focus:outline-none"
                    >
                      <option value="0">John Doe</option>
                      <option value="1">Jane Doe</option>
                      <option value="2">Mark Smith</option>
                      <option value="3">Tiger Woods</option>
                    </select>
                  </div>
                </div>
                <div className="flex w-full flex-col items-start justify-start gap-2">
                  <label className="text-xs text-slate-200">
                    Added participants
                  </label>
                  <div className="flex w-full flex-wrap items-center justify-start gap-4">
                    {selectedUsers.map((user) => {
                      return (
                        <div
                          className="flex w-fit items-center justify-between gap-2 border-[1px] border-white px-2 py-1.5"
                          key={user.name}
                        >
                          <img
                            alt="avatar"
                            className="flex h-6 w-6 flex-shrink-0 rounded-full object-cover"
                            src={user.avatar}
                          />
                          <p className="text-sm text-white">{user.name}</p>
                          <button className="flex flex-shrink-0 items-center justify-center">
                            <XMarkIcon className="h-4 w-4 text-white" />
                          </button>
                        </div>
                      );
                    })}
                  </div>
                </div>
                <div className="flex w-full flex-col items-center justify-end gap-4 md:flex-row md:gap-6">
                  <button className="w-full bg-red-500 p-3 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e]">
                    Cancel
                  </button>
                  <button className="w-full bg-[#ae7aff] p-3 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e]">
                    Create
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default CreateGroupChat;


================================================
FILE: src/components/templates/chat/create-normal-chat.jsx
================================================
import {
  BellIcon,
  PlusCircleIcon,
  XMarkIcon,
} from "@heroicons/react/24/outline";
import React from "react";

const CreateOneOnOneChat = () => {
  return (
    <div className="min-h-screen bg-[#121212]">
      <header className="fixed top-0 z-10 mx-auto flex w-full max-w-[85rem] items-center justify-between border-b-[1px] border-b-slate-300 bg-[#121212] p-4 text-white lg:px-10">
        <h1 className="text-xl font-extrabold md:text-3xl">Inbox</h1>
        <div className="flex w-max flex-shrink-0 items-center justify-end gap-6">
          <span className="relative">
            <BellIcon className="h-6 w-6 text-white md:h-8 md:w-8" />
            <span className="absolute -right-1 -top-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 p-1 text-sm text-white md:h-5 md:w-5 md:text-base">
              4
            </span>
          </span>
          <div className="h-11 w-11 rounded-full border-2 border-white">
            <img
              src="https://images.pexels.com/photos/18148932/pexels-photo-18148932/free-photo-of-bench-city-man-people.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
              alt="avatar"
              className="h-10 w-10 rounded-full object-cover"
            />
          </div>
          <button className="hidden w-max items-center justify-center border-[1px] border-white p-3 text-center font-bold text-white md:inline-flex">
            <PlusCircleIcon className="mr-2 h-5 w-5" /> Create a chat
          </button>
        </div>
      </header>
      <div
        className="relative z-10"
        aria-labelledby="modal-title"
        role="dialog"
        aria-modal="true"
      >
        <div className="fixed inset-0 bg-[#121212] bg-opacity-75 transition-opacity" />
        <div className="fixed inset-0 z-10 w-screen overflow-y-auto">
          <div className="flex min-h-full items-end justify-center p-0 text-center md:items-center md:p-2">
            <div className="relative w-full transform overflow-hidden border-t-[1px] border-white bg-[#121212] text-left text-white transition-all md:my-8 md:w-full md:max-w-5xl md:border-[1px]">
              <div className="flex items-center justify-between border-b-[1px] border-white p-4">
                <p className="text-xl font-bold">Create Chat</p>
                <XMarkIcon className="h-6 w-6 text-white" role="button" />
              </div>
              <div className="flex w-full flex-col gap-4 p-4 md:gap-6 md:p-6">
                <div className="flex w-full flex-col items-start justify-start gap-2">
                  <label className="text-xs text-slate-200">
                    Select a user
                  </label>
                  <div className="w-full border-[1px] border-white pr-4">
                    <select
                      placeholder="Select a user..."
                      autoComplete="false"
                      className="w-full bg-[#121212] py-4 pl-4 text-white placeholder:text-gray-500 focus:outline-none"
                    >
                      <option value="0">John Doe</option>
                      <option value="1">Jane Doe</option>
                      <option value="2">Mark Smith</option>
                      <option value="3">Tiger Woods</option>
                    </select>
                  </div>
                </div>
                <div className="flex w-full flex-col items-center justify-end gap-4 md:flex-row md:gap-6">
                  <button className="w-full bg-red-500 p-3 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e]">
                    Cancel
                  </button>
                  <button className="w-full bg-[#ae7aff] p-3 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e]">
                    Start Chatting
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default CreateOneOnOneChat;


================================================
FILE: src/components/templates/chat/empty-chats.jsx
================================================
import React from "react";
import { PlusCircleIcon } from "@heroicons/react/20/solid";
import { BellIcon, InboxIcon } from "@heroicons/react/24/outline";

const EmptyChats = () => {
  return (
    <div className="min-h-screen bg-[#121212]">
      <header className="fixed top-0 z-10 mx-auto flex w-full max-w-full items-center justify-between border-b-[1px] border-b-slate-300 bg-[#121212] p-4 text-white lg:px-10">
        <h1 className="text-xl font-extrabold md:text-3xl">Inbox</h1>
        <div className="flex w-max flex-shrink-0 items-center justify-end gap-6">
          <span className="relative">
            <BellIcon className="h-6 w-6 text-white md:h-8 md:w-8" />
            <span className="absolute -right-1 -top-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 p-1 text-sm text-white md:h-5 md:w-5 md:text-base">
              4
            </span>
          </span>
          <div className="h-11 w-11 rounded-full border-2 border-white">
            <img
              src="https://images.pexels.com/photos/18148932/pexels-photo-18148932/free-photo-of-bench-city-man-people.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
              alt="avatar"
              className="h-10 w-10 rounded-full object-cover"
            />
          </div>
          <button className="hidden w-max items-center justify-center border-[1px] border-white p-3 text-center font-bold text-white md:inline-flex">
            <PlusCircleIcon className="mr-2 h-5 w-5" /> Create a chat
          </button>
        </div>
      </header>
      <div className="flex h-full min-h-screen w-full flex-col items-center justify-center px-4 text-center">
        <div className="flex flex-col items-center justify-center gap-4 text-white">
          <InboxIcon className="h-20 w-20 text-white md:h-28 md:w-28" />
          <h1 className="text-4xl font-extrabold md:text-6xl">
            No chats found?
          </h1>
          <p className="max-w-sm text-xs text-gray-200 md:text-sm">
            Try to initiate chat with your saved contacts by clicking the button
            below
          </p>
        </div>

        <button className="mt-14 inline-flex w-max items-center bg-[#ae7aff] p-3 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e]">
          <PlusCircleIcon className="mr-2 h-5 w-5 text-[#121212]" /> Create a
          chat
        </button>
      </div>
    </div>
  );
};

export default EmptyChats;


================================================
FILE: src/components/templates/chat/group-information.jsx
================================================
import { TrashIcon, UserMinusIcon, XMarkIcon } from "@heroicons/react/20/solid";
import {
  BellIcon,
  ExclamationTriangleIcon,
  PencilIcon,
  PlusCircleIcon,
  UserGroupIcon,
} from "@heroicons/react/24/outline";
import React from "react";

const participants = [
  {
    fullName: "Eva Brown",
    email: "eva.brown@example.com",
    avatar:
      "https://images.pexels.com/photos/18096595/pexels-photo-18096595/free-photo-of-music-on-street.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  },
  {
    fullName: "John Doe",
    email: "john.doe@example.com",
    avatar:
      "https://images.pexels.com/photos/18094275/pexels-photo-18094275.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  },
  {
    fullName: "Jane Smith",
    email: "jane.smith@example.com",
    avatar:
      "https://images.pexels.com/photos/13847652/pexels-photo-13847652.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  },
  {
    fullName: "Alice Johnson",
    email: "alice.johnson@example.com",
    avatar:
      "https://images.pexels.com/photos/13847596/pexels-photo-13847596.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  },
  {
    fullName: "Bob Wilson",
    email: "bob.wilson@example.com",
    avatar:
      "https://images.pexels.com/photos/7775636/pexels-photo-7775636.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  },
  {
    fullName: "Eva Brown",
    email: "eva.brown@example.com",
    avatar:
      "https://images.pexels.com/photos/18107025/pexels-photo-18107025/free-photo-of-man-reading-newspaper.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  },
  {
    fullName: "David Lee",
    email: "david.lee@example.com",
    avatar:
      "https://images.pexels.com/photos/7775640/pexels-photo-7775640.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  },
];

const GroupChatInfo = () => {
  return (
    <div className="min-h-screen bg-[#121212]">
      <header className="fixed top-0 z-10 mx-auto flex w-full max-w-[85rem] items-center justify-between border-b-[1px] border-b-slate-300 bg-[#121212] p-4 text-white lg:px-10">
        <h1 className="text-xl font-extrabold md:text-3xl">Inbox</h1>
        <div className="flex w-max flex-shrink-0 items-center justify-end gap-6">
          <span className="relative">
            <BellIcon className="h-6 w-6 text-white md:h-8 md:w-8" />
            <span className="absolute -right-1 -top-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 p-1 text-sm text-white md:h-5 md:w-5 md:text-base">
              4
            </span>
          </span>
          <div className="h-11 w-11 rounded-full border-2 border-white">
            <img
              src="https://images.pexels.com/photos/18148932/pexels-photo-18148932/free-photo-of-bench-city-man-people.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
              alt="avatar"
              className="h-10 w-10 rounded-full object-cover"
            />
          </div>
          <button className="hidden w-max items-center justify-center border-[1px] border-white p-3 text-center font-bold text-white md:inline-flex">
            <PlusCircleIcon className="mr-2 h-5 w-5" /> Create a chat
          </button>
        </div>
      </header>
      <div className="flex h-full min-h-screen w-full flex-col items-center justify-center px-4 text-center">
        <div className="fixed inset-0 z-10 bg-[#121212] bg-opacity-75 transition-opacity" />
        <aside className="fixed right-0 z-20 h-screen w-full translate-x-0 overflow-y-auto bg-[#121212] p-4 transition-all duration-200 ease-in-out peer-focus:translate-x-0 md:w-1/2 md:border-l-[1px] md:border-l-white md:p-6">
          <div className="mb-6 flex items-center justify-between">
            <p className="text-lg font-semibold text-white md:text-xl md:font-bold">
              About Group
            </p>
            <XMarkIcon
              className="h-5 w-5 text-white md:h-6 md:w-6"
              role="button"
            />
          </div>
          <div className="flex flex-col items-center justify-start gap-4 text-center">
            <div className="flex w-14 flex-shrink-0 items-center justify-center md:w-24">
              <img
                className="flex h-14 w-14 flex-shrink-0 rounded-full object-cover outline outline-8 outline-[#121212] md:h-24 md:w-24"
                alt="avatar"
                src={participants[0]?.avatar}
              />
              <img
                className="-ml-10 flex h-14 w-14 flex-shrink-0 rounded-full object-cover outline outline-8 outline-[#121212] md:h-24 md:w-24"
                alt="avatar"
                src={participants[1]?.avatar}
              />
              <img
                className="-ml-10 flex h-14 w-14 flex-shrink-0 rounded-full object-cover outline outline-8 outline-[#121212] md:h-24 md:w-24"
                alt="avatar"
                src={participants[2]?.avatar}
              />
              <p className="ml-2 text-sm text-white md:text-base">+4</p>
            </div>
            <h1 className="truncate text-2xl font-extrabold text-white md:text-4xl">
              CodeCrafters Alliance
            </h1>
            <span className="text-sm text-gray-400">7 Participants</span>
          </div>
          <hr className="mx-auto my-8 w-[90%] border-[1px] border-dashed border-gray-500" />
          <p className="mb-2 inline-flex items-center text-left text-white">
            <UserGroupIcon className="mr-2 h-5 w-5" /> Group participants
          </p>
          <ul className="mb-4 flex w-full flex-col items-start justify-start divide-y-[0.1px] divide-white">
            {participants.map((user, i) => {
              return (
                <li
                  className="flex w-full items-center justify-start gap-2 py-4 pr-4"
                  key={i}
                >
                  <img
                    className="flex h-10 w-10 flex-shrink-0 rounded-full object-cover md:h-14 md:w-14"
                    src={user.avatar}
                    alt="avatar"
                  />
                  <div className="flex flex-col items-start justify-start text-left text-white">
                    <p className="inline-flex items-center text-sm font-semibold md:text-base">
                      {user.fullName}
                      {i === 1 ? (
                        <span className="ml-2 border-[1px] border-white px-1.5 py-0.5 text-[8px] text-white md:text-[10px]">
                          ADMIN
                        </span>
                      ) : null}
                    </p>
                    <span className="text-xs text-gray-500 md:text-sm">
                      {user.email}
                    </span>
                  </div>
                  <button className="ml-auto inline-flex aspect-square items-center bg-red-500 p-3 text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e]">
                    <UserMinusIcon className="h-5 w-5" />
                  </button>
                </li>
              );
            })}
          </ul>
          <div className="flex w-full flex-col gap-4">
            <button className="inline-flex w-full items-center justify-center bg-[#ae7aff] p-2 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e]">
              <PencilIcon className="mr-2 h-5 w-5" /> Update Group
            </button>
            <button className="inline-flex w-full items-center justify-center bg-red-500 p-2 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e]">
              <TrashIcon className="mr-2 h-5 w-5" /> Delete Group
            </button>
            <button className="inline-flex w-full items-center justify-center bg-red-500 p-2 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e]">
              <ExclamationTriangleIcon className="mr-2 h-5 w-5" /> Exit Group
            </button>
          </div>
        </aside>
      </div>
    </div>
  );
};

export default GroupChatInfo;


================================================
FILE: src/components/templates/chat/index.ts
================================================
import EmptyChats from "./empty-chats";
import ChatScreen from "./chat-screen";
import CreateGroupChat from "./create-group-chat";
import CreateOneOnOneChat from "./create-normal-chat";
import GroupInfo from "./group-information";
import Register from "./register";
import Login from "./login";

const Chat = {
  EmptyChats,
  ChatScreen,
  CreateGroupChat,
  CreateOneOnOneChat,
  GroupInfo,
  Register,
  Login,
};

export default Chat;


================================================
FILE: src/components/templates/chat/login.jsx
================================================
const SocialLogin = () => {
  return (
    <div className="min-h-screen bg-[#121212]">
      <header className="fixed top-0 z-10 mx-auto flex w-full max-w-full items-center justify-between border-b-[1px] border-b-slate-300 bg-[#121212] p-4 text-white lg:px-10">
        <h1 className="text-xl font-extrabold md:text-3xl">Login</h1>
        <div className="flex w-max flex-shrink-0 items-center justify-end gap-6">
          <button className="hidden w-max items-center justify-center border-[1px] border-white p-3 text-center font-bold text-white md:inline-flex">
            Register
          </button>
        </div>
      </header>
      <div className="mx-auto flex w-full items-stretch justify-between gap-10">
        <div className="fixed left-0 top-0 hidden h-screen w-0 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 md:block md:w-1/3"></div>
        <div className="ml-auto mt-28 flex w-full flex-col items-start justify-start p-6 sm:max-w-4xl md:w-2/3 lg:px-10">
          <div className="w-full">
            <h1 className="mb-3 text-5xl font-extrabold text-white">Login</h1>
            <p className="text-xs text-slate-400">
              Login to access your account
            </p>
          </div>
          <div className="my-14 flex w-full flex-col items-start justify-start gap-4">
            <div className="flex w-full flex-col items-start justify-start gap-2">
              <label className="text-xs text-slate-200">
                Username or email
              </label>
              <input
                placeholder="Enter a username or email..."
                autoComplete="false"
                className="w-full border-[1px] border-white bg-black p-4 text-white placeholder:text-gray-500"
              />
            </div>

            <div className="flex w-full flex-col items-start justify-start gap-2">
              <label className="text-xs text-slate-200">Password</label>
              <input
                placeholder="Enter a password..."
                autoComplete="false"
                type="password"
                className="w-full border-[1px] border-white bg-black p-4 text-white placeholder:text-gray-500"
              />
            </div>

            <div className="mr-4 flex items-center">
              <input
                type="checkbox"
                id="checkbox-2"
                name="checkbox-2"
                className="absolute h-6 w-6 cursor-pointer opacity-0 [&:checked+div]:bg-green-500 [&:checked+div_svg]:block"
              />
              <div className="mr-2 flex h-6 w-6 flex-shrink-0 items-center justify-center border-[1px] border-white bg-transparent focus-within:border-white">
                <svg
                  className="pointer-events-none hidden h-3 w-3 fill-current text-white"
                  version="1.1"
                  viewBox="0 0 17 12"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <g fill="none" fillRule="evenodd">
                    <g
                      transform="translate(-9 -11)"
                      fill="#000000"
                      fillRule="nonzero"
                    >
                      <path d="m25.576 11.414c0.56558 0.55188 0.56558 1.4439 0 1.9961l-9.404 9.176c-0.28213 0.27529-0.65247 0.41385-1.0228 0.41385-0.37034 0-0.74068-0.13855-1.0228-0.41385l-4.7019-4.588c-0.56584-0.55188-0.56584-1.4442 0-1.9961 0.56558-0.55214 1.4798-0.55214 2.0456 0l3.679 3.5899 8.3812-8.1779c0.56558-0.55214 1.4798-0.55214 2.0456 0z" />
                    </g>
                  </g>
                </svg>
              </div>
              <div className="ml-3 text-sm leading-6">
                <label
                  htmlFor="checkbox-2"
                  className="text-sm font-medium text-white"
                >
                  Remember me
                </label>
              </div>
            </div>
            <button className="w-full bg-[#ae7aff] p-3 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e]">
              Log in
            </button>
            <div className="mx-auto my-3 flex w-full max-w-md items-center justify-center gap-4 text-white">
              <hr className="w-full border-[0.1px] border-white" />
              <p className="text-sm">OR</p>
              <hr className="w-full border-[0.1px] border-white" />
            </div>
            <button className="inline-flex w-full items-center justify-center gap-3 border-[1px] border-white bg-black p-3 text-center text-white">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                height="24"
                viewBox="0 0 24 24"
                width="24"
              >
                <path
                  d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
                  fill="#4285F4"
                />
                <path
                  d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
                  fill="#34A853"
                />
                <path
                  d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
                  fill="#FBBC05"
                />
                <path
                  d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
                  fill="#EA4335"
                />
                <path d="M1 1h22v22H1z" fill="none" />
              </svg>{" "}
              Login with Google
            </button>
            <button className="inline-flex w-full items-center justify-center gap-3 border-[1px] border-white bg-black p-3 text-center text-white">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="#ffffff"
              >
                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
              </svg>
              Login with GitHub
            </button>
            <p className="text-sm font-light text-white">
              Don&apos;t have an account?{" "}
              <span className="cursor-pointer font-bold hover:underline">
                Create an account
              </span>
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default SocialLogin;


================================================
FILE: src/components/templates/chat/register.jsx
================================================
import { PlusIcon } from "@heroicons/react/24/outline";

const SocialRegister = () => {
  return (
    <div className="min-h-screen bg-[#121212]">
      <header className="fixed top-0 z-10 mx-auto flex w-full max-w-full items-center justify-between border-b-[1px] border-b-slate-300 bg-[#121212] p-4 text-white lg:px-10">
        <h1 className="text-xl font-extrabold md:text-3xl">Register</h1>
        <div className="flex w-max flex-shrink-0 items-center justify-end gap-6">
          <button className="hidden w-max items-center justify-center border-[1px] border-white p-3 text-center font-bold text-white md:inline-flex">
            Login
          </button>
        </div>
      </header>
      <div className="mx-auto flex w-full items-stretch justify-between gap-10">
        <div className="fixed left-0 top-0 hidden h-screen w-0 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 md:block md:w-1/3"></div>
        <div className="ml-auto mt-28 flex w-full flex-col items-start justify-start p-6 sm:max-w-4xl md:w-2/3 lg:px-10">
          <div className="w-full text-center">
            <h1 className="mb-3 text-5xl font-extrabold text-white">
              Register
            </h1>
            <p className="text-xs text-slate-400">
              Before we chat, please create your account
            </p>
          </div>
          <div className="my-14 flex w-full flex-col items-start justify-start gap-4">
            <div className="flex w-full items-center justify-center">
              <input id="avatar-input-1" hidden type="file" />
              <label
                htmlFor="avatar-input-1"
                className="relative flex aspect-square h-24 w-24 cursor-pointer items-center justify-center overflow-visible rounded-full border-4 border-[#ae7aff] p-1"
              >
                <div className="flex h-full w-full items-center justify-center rounded-full">
                  <PlusIcon className="h-8 w-8 text-white" />
                </div>
                <span className="absolute bottom-0 right-0 flex aspect-square h-5 w-5 items-center justify-center rounded-full bg-[#ae7aff] p-1">
                  <PlusIcon className="h-3 w-3 text-black" />
                </span>
              </label>
            </div>

            <div className="mt-10 flex w-full flex-col items-center justify-between gap-4 md:flex-row">
              <div className="flex w-full flex-col items-start justify-start gap-2">
                <label className="text-xs text-slate-200">First name</label>
                <input
                  placeholder="Enter a first name..."
                  autoComplete="false"
                  className="w-full border-[1px] border-white bg-black p-4 text-white placeholder:text-gray-500"
                />
              </div>
              <div className="flex w-full flex-col items-start justify-start gap-2">
                <label className="text-xs text-slate-200">Last name</label>
                <input
                  placeholder="Enter a last name..."
                  autoComplete="false"
                  className="w-full border-[1px] border-white bg-black p-4 text-white placeholder:text-gray-500"
                />
              </div>
            </div>

            <div className="flex w-full flex-col items-start justify-start gap-2">
              <label className="text-xs text-slate-200">Username</label>
              <input
                placeholder="Enter a username..."
                autoComplete="false"
                className="w-full border-[1px] border-white bg-black p-4 text-white placeholder:text-gray-500"
              />
            </div>

            <div className="flex w-full flex-col items-start justify-start gap-2">
              <label className="text-xs text-slate-200">Email</label>
              <input
                placeholder="Enter an email..."
                autoComplete="false"
                className="w-full border-[1px] border-white bg-black p-4 text-white placeholder:text-gray-500"
              />
            </div>
            <div className="flex w-full flex-col items-start justify-start gap-2">
              <label className="text-xs text-slate-200">Password</label>
              <input
                placeholder="Enter a password..."
                autoComplete="false"
                type="password"
                className="w-full border-[1px] border-white bg-black p-4 text-white placeholder:text-gray-500"
              />
            </div>

            <div className="mr-4 flex items-center">
              <input
                type="checkbox"
                id="checkbox-2"
                name="checkbox-2"
                className="absolute h-6 w-6 cursor-pointer opacity-0 [&:checked+div]:bg-green-500 [&:checked+div_svg]:block"
              />
              <div className="mr-2 flex h-6 w-6 flex-shrink-0 items-center justify-center border-[1px] border-white bg-transparent focus-within:border-white">
                <svg
                  className="pointer-events-none hidden h-3 w-3 fill-current text-white"
                  version="1.1"
                  viewBox="0 0 17 12"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <g fill="none" fillRule="evenodd">
                    <g
                      transform="translate(-9 -11)"
                      fill="#000000"
                      fillRule="nonzero"
                    >
                      <path d="m25.576 11.414c0.56558 0.55188 0.56558 1.4439 0 1.9961l-9.404 9.176c-0.28213 0.27529-0.65247 0.41385-1.0228 0.41385-0.37034 0-0.74068-0.13855-1.0228-0.41385l-4.7019-4.588c-0.56584-0.55188-0.56584-1.4442 0-1.9961 0.56558-0.55214 1.4798-0.55214 2.0456 0l3.679 3.5899 8.3812-8.1779c0.56558-0.55214 1.4798-0.55214 2.0456 0z" />
                    </g>
                  </g>
                </svg>
              </div>
              <div className="ml-3 text-sm leading-6">
                <label
                  htmlFor="checkbox-2"
                  className="text-sm font-medium text-white"
                >
                  I agree to the terms and conditions
                </label>
              </div>
            </div>
            <button className="w-full bg-[#ae7aff] p-3 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e]">
              Create Account
            </button>
            <p className="text-sm font-light text-white">
              Already registered?{" "}
              <span className="cursor-pointer font-bold hover:underline">
                Sign in to your account
              </span>
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default SocialRegister;


================================================
FILE: src/components/templates/social-media/bookmark-posts.jsx
================================================
import React from "react";
import {
  BellIcon,
  BookmarkIcon,
  EllipsisVerticalIcon,
  HeartIcon,
  LinkIcon,
  MagnifyingGlassIcon,
} from "@heroicons/react/24/outline";
import {
  ChatBubbleOvalLeftEllipsisIcon,
  PlusCircleIcon,
  ShareIcon,
} from "@heroicons/react/24/solid";

const posts = [
  {
    id: 1,
    authorImage:
      "https://images.pexels.com/photos/18264716/pexels-photo-18264716.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    authorName: "Mystical Wanderer",
    createdOn: "15 minutes ago",
    text: "Uncovering ancient secrets and mystical wonders. The journey is the destination. 🔮🌟 #MythologyQuest",
    images: [],
    likeCount: 46,
    commentCount: 13,
    bookmarked: true,
    liked: true,
  },
  {
    id: 2,
    authorImage:
      "https://images.pexels.com/photos/13847596/pexels-photo-13847596.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    authorName: "Aqua Explorer",
    createdOn: "1 hour ago",
    text: "Swimming with the dolphins today, and it was magical! 🐬🌊 #OceanAdventure",
    images: [
      "https://images.pexels.com/photos/18107024/pexels-photo-18107024/free-photo-of-an-old-city-view.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    ],
    likeCount: 102,
    commentCount: 18,
    bookmarked: true,
    liked: false,
  },
  {
    id: 3,
    authorImage:
      "https://images.pexels.com/photos/7775637/pexels-photo-7775637.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    authorName: "Solar Flare ",
    createdOn: "59 minutes ago",
    text: "Harnessing the power of the sun for a brighter future. ☀️🔋 #SolarEnergy",
    images: [
      "https://images.pexels.com/photos/18107025/pexels-photo-18107025/free-photo-of-man-reading-newspaper.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      "https://images.pexels.com/photos/18148933/pexels-photo-18148933/free-photo-of-city-road-man-people.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      "https://images.pexels.com/photos/18148937/pexels-photo-18148937/free-photo-of-city-road-traffic-landscape.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    ],
    likeCount: 802,
    commentCount: 99,
    bookmarked: true,
    liked: true,
  },
  {
    id: 4,
    authorImage:
      "https://images.pexels.com/photos/7775642/pexels-photo-7775642.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    authorName: "Aurora Starlight",
    createdOn: "17 hours ago",
    text: "Embracing the lunar magic tonight. The full moon is my muse. 🌕🌌 #MoonlightDreams",
    images: [],
    likeCount: 420,
    commentCount: 20,
    bookmarked: true,
    liked: false,
    link: {
      image:
        "https://images.pexels.com/photos/7775642/pexels-photo-7775642.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      title: "Aurora Starlight",
      caption: "Digital artist | Creative mind | Color magician 🎨🖌️🖼️",
      url: "https://www.aurorastarry.com/",
    },
  },
  {
    id: 5,
    authorImage:
      "https://images.pexels.com/photos/3532553/pexels-photo-3532553.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    authorName: "Nova Sparks",
    createdOn: "1 day ago",
    text: "💡 Tech Poll: Which emerging technology excites you the most?",
    images: [],
    likeCount: 207,
    commentCount: 63,
    bookmarked: true,
    liked: false,
    poll: [
      {
        name: "Artificial Intelligence",
      },
      {
        name: "Virtual Reality",
      },
      {
        name: "Quantum Computing",
      },
      {
        name: "5G Connectivity",
      },
    ],
  },
  {
    id: 6,
    authorImage:
      "https://images.pexels.com/photos/569314/pexels-photo-569314.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    authorName: "Zen Garden",
    createdOn: "7 days ago",
    text: "🧘‍♂️ Mindfulness Poll: Which mindfulness practice resonates with you the most?",
    images: [],
    likeCount: 97,
    commentCount: 13,
    liked: true,
    bookmarked: true,
    poll: [
      {
        name: "Meditation",
        votePercentage: 30,
      },
      {
        name: "Yoga",
        selected: true,
        votePercentage: 33,
      },
      {
        name: "Deep Breathing",
        votePercentage: 27,
      },
      {
        name: "Tai Chi",
        votePercentage: 20,
      },
    ],
  },
  {
    id: 7,
    authorImage:
      "https://images.pexels.com/photos/1739942/pexels-photo-1739942.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    authorName: "Pixel Painter",
    createdOn: "1 months ago",
    text: "🎨 Art Poll: What's your preferred art medium for creating masterpieces?",
    images: [],
    likeCount: 99,
    commentCount: 13,
    bookmarked: true,
    liked: false,
    poll: [
      {
        name: "Acrylic Paint",
        votePercentage: 20,
      },
      {
        name: "Watercolor",
        votePercentage: 19,
      },
      {
        name: "Digital Art",
        votePercentage: 18,
      },
      {
        name: "Charcoal Sketching",
        votePercentage: 43,
      },
    ],
  },
];

const BookmarkPosts = () => {
  return (
    <div className="min-h-screen bg-[#121212]">
      <header className="fixed top-0 z-10 mx-auto flex w-full max-w-full items-center justify-between border-b-[1px] border-b-slate-300 bg-[#121212] p-4 text-white lg:px-10">
        <h1 className="text-xl font-extrabold md:text-3xl">My Profile</h1>
        <div className="flex w-max flex-shrink-0 items-center justify-end gap-6">
          <span className="relative">
            <MagnifyingGlassIcon className="h-8 w-8" />
          </span>
          <span className="relative">
            <BellIcon className="h-8 w-8 text-white" />
            <span className="absolute right-1 top-0 flex h-2.5 w-2.5 items-center justify-center rounded-full bg-green-500 p-1 text-white"></span>
          </span>
          <button className="hidden w-max items-center justify-center border-[1px] border-white p-3 text-center font-bold text-white md:inline-flex">
            <PlusCircleIcon className="mr-2 h-5 w-5" /> Create new
          </button>
        </div>
      </header>
      <div className="mt-[65px] grid grid-cols-12 gap-4 pb-8 pt-0 sm:px-4 sm:pt-8 md:mt-[83px] lg:px-10">
        {/* Empty */}
        <aside className="col-span-12 text-white md:col-span-5 lg:col-span-4 xl:col-span-3">
          {/* Profile Card */}
          <div className="sticky top-[100px] border-b border-white p-4 sm:border">
            <img
              className="mb-3 flex aspect-square h-16 w-16 rounded-full border-2 border-[#ae7aff] object-cover"
              src="https://images.pexels.com/photos/7775642/pexels-photo-7775642.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
              alt="avatar"
            />

            <h2 className="mb-1 font-bold">Aurora Starlight</h2>
            <p className="text-sm">
              Night owl | Moon enthusiast | Wanderlust 🌕🌙🌎
            </p>

            <hr className="my-4 h-[1px] w-full" />
            <div className="mb-4">
              <h3 className="mb-1 font-bold">Short Bio</h3>
              <p className="text-sm">
                Immersed in the enchanting world of the night, captivated by the
                moon&apos;s allure, and constantly seeking new adventures around
                the globe. 🌕🌙🌎
              </p>
            </div>
            <div className="mb-4 text-sm">
              <h3 className="mb-1 font-bold">Public link</h3>
              <button className="block text-[#ae7aff] hover:underline">
                starryaurora@gmail.com
              </button>
              <button className="block break-all text-[#ae7aff] hover:underline">
                https://www.aurorastarry.com/
              </button>
            </div>
            <p className="mb-4 flex gap-x-4">
              <span className="inline-block">
                <span className="font-bold">13.5k&nbsp;</span>
                <span className="text-sm text-gray-400">Followers</span>
              </span>
              <span className="inline-block">
                <span className="font-bold">204&nbsp;</span>
                <span className="text-sm text-gray-400">Following</span>
              </span>
            </p>
            <button className="inline-flex w-max items-center bg-[#ae7aff] px-4 py-2 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e]">
              Edit Profile
            </button>
          </div>
        </aside>

        <section className="col-span-12 text-white md:col-span-7 lg:col-span-5 xl:col-span-6">
          <div className="sticky top-[82px] z-10 mt-[1px] bg-[#121212] pb-4 before:absolute before:inset-x-0 before:bottom-full before:h-[17px] before:bg-[#121212] md:top-[100px] md:mt-0">
            <ul className="no-scrollbar flex w-full overflow-x-auto px-4 sm:px-0">
              <li className="mr-2 inline-block shrink-0">
                <button className="inline-block px-6 py-1.5 hover:bg-[#2c2c2c]">
                  Posts
                </button>
              </li>
              <li className="mr-2 inline-block shrink-0">
                <button className="inline-block px-6 py-1.5 hover:bg-[#2c2c2c]">
                  Edit profile
                </button>
              </li>
              <li className="mr-2 inline-block shrink-0">
                <button className="inline-block px-6 py-1.5 hover:bg-[#2c2c2c]">
                  Change password
                </button>
              </li>
              <li className="mr-2 inline-block shrink-0">
                <button className="inline-block bg-[#2c2c2c] px-6 py-1.5">
                  Bookmarked
                </button>
              </li>
            </ul>
          </div>
          {/* Post Lists */}
          {posts.map((post) => (
            <div
              key={post.id}
              className="relative mb-2 w-full last:mb-0 sm:mb-4"
            >
              <div className="flex border-b border-t border-white p-4 text-white sm:border-l sm:border-r">
                {/* Author Profile */}
                <div className="h-10 w-10 shrink-0 sm:h-12 sm:w-12">
                  <img
                    src={post.authorImage}
                    alt={post.authorName}
                    className="h-full w-full rounded-full object-cover"
                  />
                </div>
                {/* Center-Right Content */}
                <div className="pl-4 pt-1">
                  {/* Post Metadata */}
                  <div className="mb-2 flex items-center gap-x-2">
                    <div className="w-full">
                      <h2 className="inline-block font-bold">
                        {post.authorName}
                      </h2>
                      <span className="ml-2 inline-block text-sm text-gray-400">
                        {post.createdOn}
                      </span>
                    </div>
                    <button className="ml-auto shrink-0 hover:text-[#ae7aff]">
                      <EllipsisVerticalIcon className="h-5 w-5" />
                    </button>
                  </div>
                  {/* Post Text */}
                  <p className="mb-4 text-sm sm:text-base">{post.text}</p>
                  {/* Post Images */}
                  {post.images.length > 0 && (
                    <div className="mb-4 grid grid-cols-[repeat(auto-fit,_minmax(200px,_1fr))] gap-4">
                      {post.images.map((image, i) => (
                        <img
                          key={image}
                          src={image}
                          alt={`attachment-${i}`}
                          className="rounded-md"
                        />
                      ))}
                    </div>
                  )}
                  {/* Link Preview */}
                  {post.link && (
                    <div className="group mb-4 border opacity-95 hover:opacity-100">
                      <div className="max-h-52 overflow-hidden">
                        <img
                          src={post.link.image}
                          alt={post.link.title}
                          className="object-cover"
                        />
                      </div>
                      {/* Link Content */}
                      <div className="p-4">
                        <h3 className="mb-2 font-bold">{post.link.title}</h3>
                        <p className="mb-3 text-sm">{post.link.caption}</p>
                        <span className="inline-flex items-center gap-x-2 break-all text-sm text-[#ae7aff] no-underline group-hover:underline">
                          <LinkIcon className="h-4 w-4 shrink-0" />
                          {post.link.url}
                        </span>
                      </div>
                    </div>
                  )}
                  {/* Polls */}
                  {post.poll &&
                    post.poll.map((option) => (
                      <button
                        key={option?.name}
                        className={`relative z-[1] mb-4 inline-flex w-full items-center gap-x-4 border p-4 before:absolute before:inset-y-0 before:left-0 before:z-[-1] before:w-[var(--data-vote-percentage)] last:mb-0 ${
                          option?.votePercentage && option?.votePercentage >= 0
                            ? ""
                            : "hover:bg-[#ae7aff] hover:text-black focus:border-[#ae7aff] focus:bg-[#ae7aff] focus:text-black"
                        } ${
                          option?.selected
                            ? "before:bg-[#ae7aff]"
                            : "before:bg-gray-400/10"
                        }
              `}
                        disabled={Boolean(option?.votePercentage)}
                        style={{
                          "--data-vote-percentage": `${
                            option?.votePercentage || 0
                          }%`,
                        }}
                      >
                        {option?.name}{" "}
                        {option?.votePercentage && (
                          <span className="ml-auto shrink-0 text-sm">
                            {option.votePercentage}%
                          </span>
                        )}
                      </button>
                    ))}
                  {/* Post Actions Buttons */}
                  <div className="flex gap-x-4">
                    {/* Like Button */}
                    <button
                      className={`group inline-flex items-center gap-x-1 outline-none after:content-[attr(data-like-count)] focus:after:content-[attr(data-like-count-alt)] ${
                        post.liked
                          ? "text-[#ae7aff] focus:text-inherit"
                          : "hover:text-[#ae7aff] focus:text-[#ae7aff]"
                      }`}
                      data-like-count={post.likeCount}
                      data-like-count-alt={
                        post.liked ? post.likeCount - 1 : post.likeCount + 1
                      }
                    >
                      <HeartIcon
                        className={`h-5 w-5 ${
                          post.liked
                            ? "fill-[#ae7aff] group-focus:fill-none"
                            : "group-focus:fill-[#ae7aff]"
                        }`}
                      />
                    </button>
                    {/* Comment Button */}
                    <button className="inline-flex items-center gap-x-1 outline-none hover:text-[#ae7aff]">
                      <ChatBubbleOvalLeftEllipsisIcon className="h-5 w-5" />
                      <span>{post.commentCount}</span>
                    </button>
                    {/* Share and Bookmarked Button */}
                    <div className="ml-auto">
                      <button className="mr-2 inline-flex items-center gap-x-1 outline-none hover:text-[#ae7aff]">
                        <ShareIcon className="h-5 w-5" />
                      </button>
                      <button
                        className={`group inline-flex items-center gap-x-1 outline-none hover:text-[#ae7aff] ${
                          post.bookmarked
                            ? "focus:text-white"
                            : "focus:text-[#ae7aff]"
                        }`}
                      >
                        <BookmarkIcon
                          className={`h-5 w-5 ${
                            post.bookmarked
                              ? "fill-[#ae7aff] text-[#ae7aff] group-focus:fill-none group-focus:text-inherit"
                              : "group-focus:fill-[#ae7aff]"
                          }`}
                        />
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </section>
        {/* Trending Topics */}
        <aside className="hidden text-white lg:col-span-3 lg:block">
          <div className="sticky top-[100px] border p-4">
            <h2 className="mb-4 font-bold"># Trending Hashtags</h2>
            <ul className="list-disc pl-4">
              {["javascript", "typescript", "java", "python", "golang"].map(
                (hashtag) => (
                  <li key={hashtag}>
                    <button className="hover:text-[#ae7aff]">#{hashtag}</button>
                  </li>
                ),
              )}
            </ul>
          </div>
        </aside>
      </div>
    </div>
  );
};

export default BookmarkPosts;


================================================
FILE: src/components/templates/social-media/change-password.jsx
================================================
import React from "react";
import { BellIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
import { PlusCircleIcon } from "@heroicons/react/24/solid";

const ChangePassword = () => {
  return (
    <div className="min-h-screen bg-[#121212]">
      <header className="fixed top-0 z-10 mx-auto flex w-full max-w-full items-center justify-between border-b-[1px] border-b-slate-300 bg-[#121212] p-4 text-white lg:px-10">
        <h1 className="text-xl font-extrabold md:text-3xl">My Profile</h1>
        <div className="flex w-max flex-shrink-0 items-center justify-end gap-6">
          <span className="relative">
            <MagnifyingGlassIcon className="h-8 w-8" />
          </span>
          <span className="relative">
            <BellIcon className="h-8 w-8 text-white" />
            <span className="absolute right-1 top-0 flex h-2.5 w-2.5 items-center justify-center rounded-full bg-green-500 p-1 text-white"></span>
          </span>
          <button className="hidden w-max items-center justify-center border-[1px] border-white p-3 text-center font-bold text-white md:inline-flex">
            <PlusCircleIcon className="mr-2 h-5 w-5" /> Create new
          </button>
        </div>
      </header>
      <div className="mt-[65px] grid grid-cols-12 gap-4 pb-8 pt-0 sm:px-4 sm:pt-8 md:mt-[83px] lg:px-10">
        {/* Empty */}
        <aside className="col-span-12 text-white md:col-span-5 lg:col-span-4 xl:col-span-3">
          {/* Profile Card */}
          <div className="sticky top-[100px] border-b border-white p-4 sm:border">
            <img
              className="mb-3 flex aspect-square h-16 w-16 rounded-full border-2 border-[#ae7aff] object-cover"
              src="https://images.pexels.com/photos/7775642/pexels-photo-7775642.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
              alt="avatar"
            />

            <h2 className="mb-1 font-bold">Aurora Starlight</h2>
            <p className="text-sm">
              Night owl | Moon enthusiast | Wanderlust 🌕🌙🌎
            </p>

            <hr className="my-4 h-[1px] w-full" />
            <div className="mb-4">
              <h3 className="mb-1 font-bold">Short Bio</h3>
              <p className="text-sm">
                Immersed in the enchanting world of the night, captivated by the
                moon&apos;s allure, and constantly seeking new adventures around
                the globe. 🌕🌙🌎
              </p>
            </div>
            <div className="mb-4 text-sm">
              <h3 className="mb-1 font-bold">Public link</h3>
              <button className="block text-[#ae7aff] hover:underline">
                starryaurora@gmail.com
              </button>
              <button className="block break-all text-[#ae7aff] hover:underline">
                https://www.aurorastarry.com/
              </button>
            </div>
            <p className="mb-4 flex gap-x-4">
              <span className="inline-block">
                <span className="font-bold">13.5k&nbsp;</span>
                <span className="text-sm text-gray-400">Followers</span>
              </span>
              <span className="inline-block">
                <span className="font-bold">204&nbsp;</span>
                <span className="text-sm text-gray-400">Following</span>
              </span>
            </p>
            <button className="inline-flex w-max items-center bg-[#ae7aff] px-4 py-2 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e]">
              Edit Profile
            </button>
          </div>
        </aside>

        <section className="col-span-12 text-white md:col-span-7 lg:col-span-5 xl:col-span-6">
          <div className="sticky top-[82px] z-10 mt-[1px] bg-[#121212] pb-4 before:absolute before:inset-x-0 before:bottom-full before:h-[17px] before:bg-[#121212] md:top-[100px] md:mt-0">
            <ul className="no-scrollbar flex w-full overflow-x-auto px-4 sm:px-0">
              <li className="mr-2 inline-block shrink-0">
                <button className="inline-block px-6 py-1.5 hover:bg-[#2c2c2c]">
                  Posts
                </button>
              </li>
              <li className="mr-2 inline-block shrink-0">
                <button className="inline-block px-6 py-1.5 hover:bg-[#2c2c2c]">
                  Edit profile
                </button>
              </li>
              <li className="mr-2 inline-block shrink-0">
                <button className="inline-block bg-[#2c2c2c] px-6 py-1.5">
                  Change password
                </button>
              </li>
              <li className="mr-2 inline-block shrink-0">
                <button className="inline-block px-6 py-1.5 hover:bg-[#2c2c2c]">
                  Bookmarked
                </button>
              </li>
            </ul>
          </div>
          {/* Change Password Form */}
          <div className="mb-4 mt-8 flex flex-wrap gap-y-4 p-4 md:p-0">
            <div className="flex w-full flex-col items-start justify-start gap-2">
              <label className="text-xs text-slate-200">Old password</label>
              <input
                placeholder="Enter old password"
                autoComplete="false"
                className="w-full border-[1px] border-white bg-black p-4 text-white placeholder:text-gray-500"
                type="password"
              />
            </div>
            <div className="flex w-full flex-col items-start justify-start gap-2">
              <label className="text-xs text-slate-200">New password</label>
              <input
                placeholder="Enter new password"
                autoComplete="false"
                className="w-full border-[1px] border-white bg-black p-4 text-white placeholder:text-gray-500"
                type="password"
              />
            </div>
            <div className="flex w-full flex-col items-start justify-start gap-2">
              <label className="text-xs text-slate-200">Confirm password</label>
              <input
                placeholder="Enter confirm password"
                autoComplete="false"
                className="w-full border-[1px] border-white bg-black p-4 text-white placeholder:text-gray-500"
                type="password"
              />
            </div>
            <button className="w-full bg-[#ae7aff] p-3 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e]">
              Change Password
            </button>
          </div>
        </section>
        {/* Trending Topics */}
        <aside className="hidden text-white lg:col-span-3 lg:block">
          <div className="sticky top-[100px] border p-4">
            <h2 className="mb-4 font-bold"># Trending Hashtags</h2>
            <ul className="list-disc pl-4">
              {["javascript", "typescript", "java", "python", "golang"].map(
                (hashtag) => (
                  <li key={hashtag}>
                    <button className="hover:text-[#ae7aff]">#{hashtag}</button>
                  </li>
                ),
              )}
            </ul>
          </div>
        </aside>
      </div>
    </div>
  );
};

export default ChangePassword;


================================================
FILE: src/components/templates/social-media/edit-profile.jsx
================================================
import React from "react";
import { BellIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
import { PlusCircleIcon } from "@heroicons/react/24/solid";
import { PencilIcon } from "@heroicons/react/20/solid";

const EditProfile = () => {
  return (
    <div className="min-h-screen bg-[#121212]">
      <header className="fixed top-0 z-10 mx-auto flex w-full max-w-full items-center justify-between border-b-[1px] border-b-slate-300 bg-[#121212] p-4 text-white lg:px-10">
        <h1 className="text-xl font-extrabold md:text-3xl">My Profile</h1>
        <div className="flex w-max flex-shrink-0 items-center justify-end gap-6">
          <span className="relative">
            <MagnifyingGlassIcon className="h-8 w-8" />
          </span>
          <span className="relative">
            <BellIcon className="h-8 w-8 text-white" />
            <span className="absolute right-1 top-0 flex h-2.5 w-2.5 items-center justify-center rounded-full bg-green-500 p-1 text-white"></span>
          </span>
          <button className="hidden w-max items-center justify-center border-[1px] border-white p-3 text-center font-bold text-white md:inline-flex">
            <PlusCircleIcon className="mr-2 h-5 w-5" /> Create new
          </button>
        </div>
      </header>
      <div className="mt-[65px] grid grid-cols-12 gap-4 pb-8 pt-0 sm:px-4 sm:pt-8 md:mt-[83px] lg:px-10">
        {/* Empty */}
        <aside className="col-span-12 text-white md:col-span-5 lg:col-span-4 xl:col-span-3">
          {/* Profile Card */}
          <div className="sticky top-[100px] border-b border-white p-4 sm:border">
            <img
              className="mb-3 flex aspect-square h-16 w-16 rounded-full border-2 border-[#ae7aff] object-cover"
              src="https://images.pexels.com/photos/7775642/pexels-photo-7775642.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
              alt="avatar"
            />

            <h2 className="mb-1 font-bold">Aurora Starlight</h2>
            <p className="text-sm">
              Night owl | Moon enthusiast | Wanderlust 🌕🌙🌎
            </p>

            <hr className="my-4 h-[1px] w-full" />
            <div className="mb-4">
              <h3 className="mb-1 font-bold">Short Bio</h3>
              <p className="text-sm">
                Immersed in the enchanting world of the night, captivated by the
                moon&apos;s allure, and constantly seeking new adventures around
                the globe. 🌕🌙🌎
              </p>
            </div>
            <div className="mb-4 text-sm">
              <h3 className="mb-1 font-bold">Public link</h3>
              <button className="block text-[#ae7aff] hover:underline">
                starryaurora@gmail.com
              </button>
              <button className="block break-all text-[#ae7aff] hover:underline">
                https://www.aurorastarry.com/
              </button>
            </div>
            <p className="mb-4 flex gap-x-4">
              <span className="inline-block">
                <span className="font-bold">13.5k&nbsp;</span>
                <span className="text-sm text-gray-400">Followers</span>
              </span>
              <span className="inline-block">
                <span className="font-bold">204&nbsp;</span>
                <span className="text-sm text-gray-400">Following</span>
              </span>
            </p>
            <button className="inline-flex w-max items-center bg-[#ae7aff] px-4 py-2 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e]">
              Edit Profile
            </button>
          </div>
        </aside>

        <section className="col-span-12 text-white md:col-span-7 lg:col-span-5 xl:col-span-6">
          <div className="sticky top-[82px] z-10 mt-[1px] bg-[#121212] pb-4 before:absolute before:inset-x-0 before:bottom-full before:h-[17px] before:bg-[#121212] md:top-[100px] md:mt-0">
            <ul className="no-scrollbar flex w-full overflow-x-auto px-4 sm:px-0">
              <li className="mr-2 inline-block shrink-0">
                <button className="inline-block px-6 py-1.5 hover:bg-[#2c2c2c]">
                  Posts
                </button>
              </li>
              <li className="mr-2 inline-block shrink-0">
                <button className="inline-block bg-[#2c2c2c] px-6 py-1.5">
                  Edit profile
                </button>
              </li>
              <li className="mr-2 inline-block shrink-0">
                <button className="inline-block px-6 py-1.5 hover:bg-[#2c2c2c]">
                  Change password
                </button>
              </li>
              <li className="mr-2 inline-block shrink-0">
                <button className="inline-block px-6 py-1.5 hover:bg-[#2c2c2c]">
                  Bookmarked
                </button>
              </li>
            </ul>
          </div>
          {/* Edit profile Form */}
          <div className="mb-4 mt-8 flex flex-wrap gap-y-4 p-4 md:p-0">
            <div className="flex w-full items-center justify-center">
              <input id="avatar-input-1" hidden type="file" />
              <label
                htmlFor="avatar-input-1"
                className="relative flex aspect-square h-24 w-24 cursor-pointer items-center justify-center overflow-visible rounded-full border-4 border-[#ae7aff] p-1"
              >
                <img
                  alt="avatar-inp"
                  src="https://images.pexels.com/photos/7775642/pexels-photo-7775642.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                  className="h-full w-full rounded-full object-cover"
                />
                <span className="absolute bottom-0 right-0 flex aspect-square h-5 w-5 items-center justify-center rounded-full bg-[#ae7aff] p-1">
                  <PencilIcon className="h-3 w-3 text-black" />
                </span>
              </label>
            </div>
            <div className="flex w-full flex-col items-start justify-start gap-2 xl:w-1/2 xl:pr-2">
              <label className="text-xs text-slate-200">First name</label>
              <input
                placeholder="Enter first name"
                autoComplete="false"
                className="w-full border-[1px] border-white bg-black p-4 text-white placeholder:text-gray-500"
                defaultValue="Aurora"
              />
            </div>
            <div className="flex w-full flex-col items-start justify-start gap-2 xl:w-1/2 xl:pl-2">
              <label className="text-xs text-slate-200">Last name</label>
              <input
                placeholder="Enter last name"
                autoComplete="false"
                className="w-full border-[1px] border-white bg-black p-4 text-white placeholder:text-gray-500"
                defaultValue="Starlight"
              />
            </div>
            <div className="flex w-full flex-col items-start justify-start gap-2">
              <label className="text-xs text-slate-200">Email</label>
              <input
                placeholder="Enter email"
                autoComplete="false"
                className="w-full border-[1px] border-white bg-black p-4 text-white placeholder:text-gray-500"
                defaultValue="starryaurora@gmail.com"
              />
            </div>
            <div className="flex w-full flex-col items-start justify-start gap-2">
              <label className="text-xs text-slate-200">Username</label>
              <input
                placeholder="Enter username"
                autoComplete="false"
                className="w-full border-[1px] border-white bg-black p-4 text-white placeholder:text-gray-500"
                defaultValue="starryaurora"
              />
            </div>
            <div className="flex w-full flex-col items-start justify-start gap-2">
              <label className="text-xs text-slate-200">Tagline</label>
              <input
                placeholder="Enter tagline"
                autoComplete="false"
                className="w-full border-[1px] border-white bg-black p-4 text-white placeholder:text-gray-500"
                defaultValue="Night owl | Moon enthusiast | Wanderlust 🌕🌙🌎"
              />
            </div>
            <div className="flex w-full flex-col items-start justify-start gap-2">
              <label className="text-xs text-slate-200">Short Bio</label>
              <textarea
                placeholder="Enter short bio"
                autoComplete="false"
                className="w-full resize-none border-[1px] border-white bg-black p-4 text-white placeholder:text-gray-500"
                defaultValue="Immersed in the enchanting world of the night, captivated by the
                moon's allure, and constantly seeking new adventures around the
                globe. 🌕🌙🌎"
              ></textarea>
            </div>
            <div className="flex w-full flex-col items-start justify-start gap-2">
              <label className="text-xs text-slate-200">Portfolio URL</label>
              <input
                placeholder="Enter url"
                autoComplete="false"
                className="w-full border-[1px] border-white bg-black p-4 text-white placeholder:text-gray-500"
                defaultValue="https://www.aurorastarry.com/"
                type="url"
              />
            </div>
            <button className="w-full bg-[#ae7aff] p-3 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e]">
              Edit profile
            </button>
          </div>
        </section>
        {/* Trending Topics */}
        <aside className="hidden text-white lg:col-span-3 lg:block">
          <div className="sticky top-[100px] border p-4">
            <h2 className="mb-4 font-bold"># Trending Hashtags</h2>
            <ul className="list-disc pl-4">
              {["javascript", "typescript", "java", "python", "golang"].map(
                (hashtag) => (
                  <li key={hashtag}>
                    <button className="hover:text-[#ae7aff]">#{hashtag}</button>
                  </li>
                ),
              )}
            </ul>
          </div>
        </aside>
      </div>
    </div>
  );
};

export default EditProfile;


================================================
FILE: src/components/templates/social-media/index.ts
================================================
import PostListing from "./post-listing";
import PostDetail from "./post-detail";
import UserProfile from "./user-profile";
import MyProfile from "./my-profile";
import EditProfile from "./edit-profile";
import ChangePassword from "./change-password";
import BookmarkedPosts from "./bookmark-posts";
import Register from "./register";
import Login from "./login";

const SocialMedia = {
  PostListing,
  PostDetail,
  UserProfile,
  MyProfile,
  EditProfile,
  ChangePassword,
  BookmarkedPosts,
  Register,
  Login,
};

export default SocialMedia;


================================================
FILE: src/components/templates/social-media/login.jsx
================================================
const SocialLogin = () => {
  return (
    <div className="min-h-screen bg-[#121212]">
      <header className="fixed top-0 z-10 mx-auto flex w-full max-w-full items-center justify-between border-b-[1px] border-b-slate-300 bg-[#121212] p-4 text-white lg:px-10">
        <h1 className="text-xl font-extrabold md:text-3xl">Login</h1>
        <div className="flex w-max flex-shrink-0 items-center justify-end gap-6">
          <button className="hidden w-max items-center justify-center border-[1px] border-white p-3 text-center font-bold text-white md:inline-flex">
            Register
          </button>
        </div>
      </header>
      <div className="mx-auto flex w-full items-stretch justify-between gap-10">
        <div className="mx-auto mt-28 flex w-full flex-col items-start justify-start p-6 sm:max-w-4xl lg:px-10">
          <div className="w-full text-center">
            <h1 className="mb-3 text-5xl font-extrabold text-white">Login</h1>
            <p className="text-xs text-slate-400">
              Login to access your account
            </p>
          </div>
          <div className="my-14 flex w-full flex-col items-start justify-start gap-4">
            <div className="flex w-full flex-col items-start justify-start gap-2">
              <label className="text-xs text-slate-200">
                Username or email
              </label>
              <input
                placeholder="Enter a username or email..."
                autoComplete="false"
                className="w-full border-[1px] border-white bg-black p-4 text-white placeholder:text-gray-500"
              />
            </div>

            <div className="flex w-full flex-col items-start justify-start gap-2">
              <label className="text-xs text-slate-200">Password</label>
              <input
                placeholder="Enter a password..."
                autoComplete="false"
                type="password"
                className="w-full border-[1px] border-white bg-black p-4 text-white placeholder:text-gray-500"
              />
            </div>

            <div className="mr-4 flex items-center">
              <input
                type="checkbox"
                id="checkbox-2"
                name="checkbox-2"
                className="absolute h-6 w-6 cursor-pointer opacity-0 [&:checked+div]:bg-green-500 [&:checked+div_svg]:block"
              />
              <div className="mr-2 flex h-6 w-6 flex-shrink-0 items-center justify-center border-[1px] border-white bg-transparent focus-within:border-white">
                <svg
                  className="pointer-events-none hidden h-3 w-3 fill-current text-white"
                  version="1.1"
                  viewBox="0 0 17 12"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <g fill="none" fillRule="evenodd">
                    <g
                      transform="translate(-9 -11)"
                      fill="#000000"
                      fillRule="nonzero"
                    >
                      <path d="m25.576 11.414c0.56558 0.55188 0.56558 1.4439 0 1.9961l-9.404 9.176c-0.28213 0.27529-0.65247 0.41385-1.0228 0.41385-0.37034 0-0.74068-0.13855-1.0228-0.41385l-4.7019-4.588c-0.56584-0.55188-0.56584-1.4442 0-1.9961 0.56558-0.55214 1.4798-0.55214 2.0456 0l3.679 3.5899 8.3812-8.1779c0.56558-0.55214 1.4798-0.55214 2.0456 0z" />
                    </g>
                  </g>
                </svg>
              </div>
              <div className="ml-3 text-sm leading-6">
                <label
                  htmlFor="checkbox-2"
                  className="text-sm font-medium text-white"
                >
                  Remember me
                </label>
              </div>
            </div>
            <button className="w-full bg-[#ae7aff] p-3 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e]">
              Log in
            </button>
            <div className="mx-auto my-3 flex w-full max-w-md items-center justify-center gap-4 text-white">
              <hr className="w-full border-[0.1px] border-white" />
              <p className="text-sm">OR</p>
              <hr className="w-full border-[0.1px] border-white" />
            </div>
            <button className="inline-flex w-full items-center justify-center gap-3 border-[1px] border-white bg-black p-3 text-center text-white">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                height="24"
                viewBox="0 0 24 24"
                width="24"
              >
                <path
                  d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
                  fill="#4285F4"
                />
                <path
                  d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
                  fill="#34A853"
                />
                <path
                  d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
                  fill="#FBBC05"
                />
                <path
                  d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
                  fill="#EA4335"
                />
                <path d="M1 1h22v22H1z" fill="none" />
              </svg>{" "}
              Login with Google
            </button>
            <button className="inline-flex w-full items-center justify-center gap-3 border-[1px] border-white bg-black p-3 text-center text-white">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="#ffffff"
              >
                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
              </svg>
              Login with GitHub
            </button>
            <p className="text-sm font-light text-white">
              Don&apos;t have an account?{" "}
              <span className="cursor-pointer font-bold hover:underline">
                Create an account
              </span>
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default SocialLogin;


================================================
FILE: src/components/templates/social-media/my-profile.jsx
================================================
import React from "react";
import {
  BellIcon,
  BookmarkIcon,
  EllipsisVerticalIcon,
  HeartIcon,
  LinkIcon,
  MagnifyingGlassIcon,
} from "@heroicons/react/24/outline";
import {
  ChatBubbleOvalLeftEllipsisIcon,
  PlusCircleIcon,
  ShareIcon,
} from "@heroicons/react/24/solid";

const posts = [
  {
    id: 1,
    authorImage:
      "https://images.pexels.com/photos/7775642/pexels-photo-7775642.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    authorName: "Aurora Starlight",
    createdOn: "15 minutes ago",
    text: "Uncovering ancient secrets and mystical wonders. The journey is the destination. 🔮🌟 #MythologyQuest",
    images: [],
    likeCount: 46,
    commentCount: 13,
    bookmarked: false,
    liked: true,
  },
  {
    id: 2,
    authorImage:
      "https://images.pexels.com/photos/7775642/pexels-photo-7775642.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    authorName: "Aurora Starlight",
    createdOn: "1 hour ago",
    text: "Swimming with the dolphins today, and it was magical! 🐬🌊 #OceanAdventure",
    images: [
      "https://images.pexels.com/photos/18107024/pexels-photo-18107024/free-photo-of-an-old-city-view.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    ],
    likeCount: 102,
    commentCount: 18,
    bookmarked: true,
    liked: false,
  },
  {
    id: 3,
    authorImage:
      "https://images.pexels.com/photos/7775642/pexels-photo-7775642.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    authorName: "Aurora Starlight",
    createdOn: "59 minutes ago",
    text: "Harnessing the power of the sun for a brighter future. ☀️🔋 #SolarEnergy",
    images: [
      "https://images.pexels.com/photos/18107025/pexels-photo-18107025/free-photo-of-man-reading-newspaper.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      "https://images.pexels.com/photos/18148933/pexels-photo-18148933/free-photo-of-city-road-man-people.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      "https://images.pexels.com/photos/18148937/pexels-photo-18148937/free-photo-of-city-road-traffic-landscape.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    ],
    likeCount: 802,
    commentCount: 99,
    bookmarked: true,
    liked: true,
  },
  {
    id: 4,
    authorImage:
      "https://images.pexels.com/photos/7775642/pexels-photo-7775642.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    authorName: "Aurora Starlight",
    createdOn: "17 hours ago",
    text: "Embracing the lunar magic tonight. The full moon is my muse. 🌕🌌 #MoonlightDreams",
    images: [],
    likeCount: 420,
    commentCount: 20,
    bookmarked: false,
    liked: false,
    link: {
      image:
        "https://images.pexels.com/photos/7775642/pexels-photo-7775642.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      title: "Aurora Starlight",
      caption: "Digital artist | Creative mind | Color magician 🎨🖌️🖼️",
      url: "https://www.aurorastarry.com/",
    },
  },
  {
    id: 5,
    authorImage:
      "https://images.pexels.com/photos/7775642/pexels-photo-7775642.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    authorName: "Aurora Starlight",
    createdOn: "1 day ago",
    text: "💡 Tech Poll: Which emerging technology excites you the most?",
    images: [],
    likeCount: 207,
    commentCount: 63,
    bookmarked: false,
    liked: false,
    poll: [
      {
        name: "Artificial Intelligence",
      },
      {
        name: "Virtual Reality",
      },
      {
        name: "Quantum Computing",
      },
      {
        name: "5G Connectivity",
      },
    ],
  },
  {
    id: 6,
    authorImage:
      "https://images.pexels.com/photos/7775642/pexels-photo-7775642.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    authorName: "Aurora Starlight",
    createdOn: "7 days ago",
    text: "🧘‍♂️ Mindfulness Poll: Which mindfulness practice resonates with you the most?",
    images: [],
    likeCount: 97,
    commentCount: 13,
    liked: true,
    bookmarked: false,
    poll: [
      {
        name: "Meditation",
        votePercentage: 30,
      },
      {
        name: "Yoga",
        selected: true,
        votePercentage: 33,
      },
      {
        name: "Deep Breathing",
        votePercentage: 27,
      },
      {
        name: "Tai Chi",
        votePercentage: 20,
      },
    ],
  },
  {
    id: 7,
    authorImage:
      "https://images.pexels.com/photos/7775642/pexels-photo-7775642.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    authorName: "Aurora Starlight",
    createdOn: "1 months ago",
    text: "🎨 Art Poll: What's your preferred art medium for creating masterpieces?",
    images: [],
    likeCount: 99,
    commentCount: 13,
    bookmarked: true,
    liked: false,
    poll: [
      {
        name: "Acrylic Paint",
        votePercentage: 20,
      },
      {
        name: "Watercolor",
        votePercentage: 19,
      },
      {
        name: "Digital Art",
        votePercentage: 18,
      },
      {
        name: "Charcoal Sketching",
        votePercentage: 43,
      },
    ],
  },
];

const Profile = () => {
  return (
    <div className="min-h-screen bg-[#121212]">
      <header className="fixed top-0 z-10 mx-auto flex w-full max-w-full items-center justify-between border-b-[1px] border-b-slate-300 bg-[#121212] p-4 text-white lg:px-10">
        <h1 className="text-xl font-extrabold md:text-3xl">My Profile</h1>
        <div className="flex w-max flex-shrink-0 items-center justify-end gap-6">
          <span className="relative">
            <MagnifyingGlassIcon className="h-8 w-8" />
          </span>
          <span className="relative">
            <BellIcon className="h-8 w-8 text-white" />
            <span className="absolute right-1 top-0 flex h-2.5 w-2.5 items-center justify-center rounded-full bg-green-500 p-1 text-white"></span>
          </span>
          <button className="hidden w-max items-center justify-center border-[1px] border-white p-3 text-center font-bold text-white md:inline-flex">
            <PlusCircleIcon className="mr-2 h-5 w-5" /> Create new
          </button>
        </div>
      </header>
      <div className="mt-[65px] grid grid-cols-12 gap-4 pb-8 pt-0 sm:px-4 sm:pt-8 md:mt-[83px] lg:px-10">
        {/* Empty */}
        <aside className="col-span-12 text-white md:col-span-5 lg:col-span-4 xl:col-span-3">
          {/* Profile Card */}
          <div className="sticky top-[100px] border-b border-white p-4 sm:border">
            <img
              className="mb-3 flex aspect-square h-16 w-16 rounded-full border-2 border-[#ae7aff] object-cover"
              src="https://images.pexels.com/photos/7775642/pexels-photo-7775642.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
              alt="avatar"
            />

            <h2 className="mb-1 font-bold">Aurora Starlight</h2>
            <p className="text-sm">
              Night owl | Moon enthusiast | Wanderlust 🌕🌙🌎
            </p>

            <hr className="my-4 h-[1px] w-full" />
            <div className="mb-4">
              <h3 className="mb-1 font-bold">Short Bio</h3>
              <p className="text-sm">
                Immersed in the enchanting world of the night, captivated by the
                moon&apos;s allure, and constantly seeking new adventures around
                the globe. 🌕🌙🌎
              </p>
            </div>
            <div className="mb-4 text-sm">
              <h3 className="mb-1 font-bold">Public link</h3>
              <button className="block text-[#ae7aff] hover:underline">
                starryaurora@gmail.com
              </button>
              <button className="block break-all text-[#ae7aff] hover:underline">
                https://www.aurorastarry.com/
              </button>
            </div>
            <p className="mb-4 flex gap-x-4">
              <span className="inline-block">
                <span className="font-bold">13.5k&nbsp;</span>
                <span className="text-sm text-gray-400">Followers</span>
              </span>
              <span className="inline-block">
                <span className="font-bold">204&nbsp;</span>
                <span className="text-sm text-gray-400">Following</span>
              </span>
            </p>
            <button className="inline-flex w-max items-center bg-[#ae7aff] px-4 py-2 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e]">
              Edit Profile
            </button>
          </div>
        </aside>

        <section className="col-span-12 text-white md:col-span-7 lg:col-span-5 xl:col-span-6">
          <div className="sticky top-[82px] z-10 mt-[1px] bg-[#121212] pb-4 before:absolute before:inset-x-0 before:bottom-full before:h-[17px] before:bg-[#121212] md:top-[100px] md:mt-0">
            <ul className="no-scrollbar flex w-full overflow-x-auto px-4 sm:px-0">
              <li className="mr-2 inline-block shrink-0">
                <button className="inline-block bg-[#2c2c2c] px-6 py-1.5">
                  Posts
                </button>
              </li>
              <li className="mr-2 inline-block shrink-0">
                <button className="inline-block px-6 py-1.5 hover:bg-[#2c2c2c]">
                  Edit profile
                </button>
              </li>
              <li className="mr-2 inline-block shrink-0">
                <button className="inline-block px-6 py-1.5 hover:bg-[#2c2c2c]">
                  Change password
                </button>
              </li>
              <li className="mr-2 inline-block shrink-0">
                <button className="inline-block px-6 py-1.5 hover:bg-[#2c2c2c]">
                  Bookmarked
                </button>
              </li>
            </ul>
          </div>
          {/* Post Lists */}
          {posts.map((post) => (
            <div
              key={post.id}
              className="relative mb-2 w-full last:mb-0 sm:mb-4"
            >
              <div className="flex border-b border-t border-white p-4 text-white sm:border-l sm:border-r">
                {/* Author Profile */}
                <div className="h-10 w-10 shrink-0 sm:h-12 sm:w-12">
                  <img
                    src={post.authorImage}
                    alt={post.authorName}
                    className="h-full w-full rounded-full object-cover"
                  />
                </div>
                {/* Center-Right Content */}
                <div className="pl-4 pt-1">
                  {/* Post Metadata */}
                  <div className="mb-2 flex items-center gap-x-2">
                    <div className="w-full">
                      <h2 className="inline-block font-bold">
                        {post.authorName}
                      </h2>
                      <span className="ml-2 inline-block text-sm text-gray-400">
                        {post.createdOn}
                      </span>
                    </div>
                    <button className="ml-auto shrink-0 hover:text-[#ae7aff]">
                      <EllipsisVerticalIcon className="h-5 w-5" />
                    </button>
                  </div>
                  {/* Post Text */}
                  <p className="mb-4 text-sm sm:text-base">{post.text}</p>
                  {/* Post Images */}
                  {post.images.length > 0 && (
                    <div className="mb-4 grid grid-cols-[repeat(auto-fit,_minmax(200px,_1fr))] gap-4">
                      {post.images.map((image, i) => (
                        <img
                          key={image}
                          src={image}
                          alt={`attachment-${i}`}
                          className="rounded-md"
                        />
                      ))}
                    </div>
                  )}
                  {/* Link Preview */}
                  {post.link && (
                    <div className="group mb-4 border opacity-95 hover:opacity-100">
                      <div className="max-h-52 overflow-hidden">
                        <img
                          src={post.link.image}
                          alt={post.link.title}
                          className="object-cover"
                        />
                      </div>
                      {/* Link Content */}
                      <div className="p-4">
                        <h3 className="mb-2 font-bold">{post.link.title}</h3>
                        <p className="mb-3 text-sm">{post.link.caption}</p>
                        <span className="inline-flex items-center gap-x-2 break-all text-sm text-[#ae7aff] no-underline group-hover:underline">
                          <LinkIcon className="h-4 w-4 shrink-0" />
                          {post.link.url}
                        </span>
                      </div>
                    </div>
                  )}
                  {/* Polls */}
                  {post.poll &&
                    post.poll.map((option) => (
                      <button
                        key={option?.name}
                        className={`relative z-[1] mb-4 inline-flex w-full items-center gap-x-4 border p-4 before:absolute before:inset-y-0 before:left-0 before:z-[-1] before:w-[var(--data-vote-percentage)] last:mb-0 ${
                          option?.votePercentage && option?.votePercentage >= 0
                            ? ""
                            : "hover:bg-[#ae7aff] hover:text-black focus:border-[#ae7aff] focus:bg-[#ae7aff] focus:text-black"
                        } ${
                          option?.selected
                            ? "before:bg-[#ae7aff]"
                            : "before:bg-gray-400/10"
                        }
              `}
                        disabled={Boolean(option?.votePercentage)}
                        style={{
                          "--data-vote-percentage": `${
                            option?.votePercentage || 0
                          }%`,
                        }}
                      >
                        {option?.name}{" "}
                        {option?.votePercentage && (
                          <span className="ml-auto shrink-0 text-sm">
                            {option.votePercentage}%
                          </span>
                        )}
                      </button>
                    ))}
                  {/* Post Actions Buttons */}
                  <div className="flex gap-x-4">
                    {/* Like Button */}
                    <button
                      className={`group inline-flex items-center gap-x-1 outline-none after:content-[attr(data-like-count)] focus:after:content-[attr(data-like-count-alt)] ${
                        post.liked
                          ? "text-[#ae7aff] focus:text-inherit"
                          : "hover:text-[#ae7aff] focus:text-[#ae7aff]"
                      }`}
                      data-like-count={post.likeCount}
                      data-like-count-alt={
                        post.liked ? post.likeCount - 1 : post.likeCount + 1
                      }
                    >
                      <HeartIcon
                        className={`h-5 w-5 ${
                          post.liked
                            ? "fill-[#ae7aff] group-focus:fill-none"
                            : "group-focus:fill-[#ae7aff]"
                        }`}
                      />
                    </button>
                    {/* Comment Button */}
                    <button className="inline-flex items-center gap-x-1 outline-none hover:text-[#ae7aff]">
                      <ChatBubbleOvalLeftEllipsisIcon className="h-5 w-5" />
                      <span>{post.commentCount}</span>
                    </button>
                    {/* Share and Bookmarked Button */}
                    <div className="ml-auto">
                      <button className="mr-2 inline-flex items-center gap-x-1 outline-none hover:text-[#ae7aff]">
                        <ShareIcon className="h-5 w-5" />
                      </button>
                      <button
                        className={`group inline-flex items-center gap-x-1 outline-none hover:text-[#ae7aff] ${
                          post.bookmarked
                            ? "focus:text-white"
                            : "focus:text-[#ae7aff]"
                        }`}
                      >
                        <BookmarkIcon
                          className={`h-5 w-5 ${
                            post.bookmarked
                              ? "fill-[#ae7aff] text-[#ae7aff] group-focus:fill-none group-focus:text-inherit"
                              : "group-focus:fill-[#ae7aff]"
                          }`}
                        />
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </section>
        {/* Trending Topics */}
        <aside className="hidden text-white lg:col-span-3 lg:block">
          <div className="sticky top-[100px] border p-4">
            <h2 className="mb-4 font-bold"># Trending Hashtags</h2>
            <ul className="list-disc pl-4">
              {["javascript", "typescript", "java", "python", "golang"].map(
                (hashtag) => (
                  <li key={hashtag}>
                    <button className="hover:text-[#ae7aff]">#{hashtag}</button>
                  </li>
                ),
              )}
            </ul>
          </div>
        </aside>
      </div>
    </div>
  );
};

export default Profile;


================================================
FILE: src/components/templates/social-media/post-detail.jsx
================================================
import React from "react";
import {
  BellIcon,
  BookmarkIcon,
  EllipsisVerticalIcon,
  FaceSmileIcon,
  HeartIcon,
  LinkIcon,
  MagnifyingGlassIcon,
  PlusIcon,
} from "@heroicons/react/24/outline";
import {
  ChatBubbleOvalLeftEllipsisIcon,
  PaperAirplaneIcon,
  PlusCircleIcon,
  ShareIcon,
  ChatBubbleLeftRightIcon,
} from "@heroicons/react/24/solid";

const post = {
  id: 1,
  authorImage:
    "https://images.pexels.com/photos/7775637/pexels-photo-7775637.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
  authorName: "Solar Flare ",
  createdOn: "59 minutes ago",
  text: "Harnessing the power of the sun for a brighter future. ☀️🔋 #SolarEnergy",
  images: [
    "https://images.pexels.com/photos/18107025/pexels-photo-18107025/free-photo-of-man-reading-newspaper.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    "https://images.pexels.com/photos/18148933/pexels-photo-18148933/free-photo-of-city-road-man-people.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    "https://images.pexels.com/photos/18148937/pexels-photo-18148937/free-photo-of-city-road-traffic-landscape.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
  ],
  likeCount: 802,
  commentCount: 99,
  liked: true,
  bookmarked: true,
  comments: [
    {
      id: 1,
      authorImage:
        "https://images.pexels.com/photos/3532554/pexels-photo-3532554.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      authorName: "Isabella Andrews",
      createdOn: "58 minutes ago",
      text: "Such an important mission! How can individuals contribute to this solar revolution, Solar Flare?",
      images: [
        "https://images.pexels.com/photos/18148936/pexels-photo-18148936.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      ],
      likeCount: 420,
      commentCount: 20,
      liked: false,
      bookmarked: true,
      replies: [
        {
          id: 1,
          authorImage:
            "https://images.pexels.com/photos/7775642/pexels-photo-7775642.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
          authorName: "Aurora Starlight",
          createdOn: "55 minutes ago",
          text: "Embracing the lunar magic tonight. The full moon is my muse. 🌕🌌 #MoonlightDreams",
          images: [],
          likeCount: 10,
          commentCount: 2,
          liked: true,
          bookmarked: false,
          replies: [],
        },
      ],
    },
    {
      id: 2,
      authorImage:
        "https://images.pexels.com/photos/1092422/pexels-photo-1092422.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      authorName: "Daniel Greenfield",
      createdOn: "45 minutes ago",
      text: "Absolutely love your commitment to clean energy, Solar Flare! Keep up the great work! 💚♻️",
      images: [
        "https://images.pexels.com/photos/1114619/pexels-photo-1114619.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      ],
      likeCount: 45,
      liked: false,
      bookmarked: false,
      commentCount: 0,
      replies: [],
    },
    {
      id: 3,
      authorImage:
        "https://images.pexels.com/photos/998716/pexels-photo-998716.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      authorName: "Matthew Advocate",
      createdOn: "30 minutes ago",
      text: "Your efforts are helping us move towards a sustainable future. Kudos, Solar Flare! 🌞🌱",
      images: [
        "https://images.pexels.com/photos/998714/pexels-photo-998714.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      ],
      liked: false,
      bookmarked: false,
      likeCount: 60,
      commentCount: 2,
      replies: [
        {
          id: 1,
          authorImage:
            "https://images.pexels.com/photos/909489/pexels-photo-909489.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
          authorName: "Sophia Innovator",
          createdOn: "28 minutes ago",
          text: "Every ray of sunshine counts! Have you considered integrating solar in urban spaces, Solar Flare?",
          images: [],
          likeCount: 2,
          commentCount: 1,
          liked: true,
          bookmarked: true,
          replies: [],
        },
        {
          id: 2,
          authorImage:
            "https://images.pexels.com/photos/909487/pexels-photo-909487.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
          authorName: "Michael Tech",
          createdOn: "2 minutes ago",
          text: "Your dedication to solar energy is inspiring, Solar Flare! Are there any upcoming projects we can look forward to?",
          images: [],
          liked: true,
          bookmarked: true,
          likeCount: 1,
          commentCount: 0,
          replies: [],
        },
      ],
    },
    {
      id: 4,
      authorImage:
        "https://images.pexels.com/photos/909483/pexels-photo-909483.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      authorName: "Samuel Eco",
      createdOn: "45 seconds ago",
      text: "You're doing incredible work for the environment, Solar Flare. 💪🌿 Let's all go solar!",
      images: [],
      likeCount: 9,
      commentCount: 1,
      replies: [],
      liked: false,
      bookmarked: false,
    },
  ],
};

const PostDetail = () => {
  return (
    <div className="min-h-screen bg-[#121212]">
      <header className="fixed top-0 z-50 mx-auto flex w-full max-w-full items-center justify-between border-b-[1px] border-b-slate-300 bg-[#121212] p-4 text-white lg:px-10">
        <h1 className="text-xl font-extrabold md:text-3xl">View Post</h1>
        <div className="flex w-max flex-shrink-0 items-center justify-end gap-6">
          <span className="relative">
            <MagnifyingGlassIcon className="h-8 w-8" />
          </span>
          <span className="relative">
            <BellIcon className="h-8 w-8 text-white" />
            <span className="absolute right-1 top-0 flex h-2.5 w-2.5 items-center justify-center rounded-full bg-green-500 p-1 text-white"></span>
          </span>
          <button className="hidden w-max items-center justify-center border-[1px] border-white p-3 text-center font-bold text-white md:inline-flex">
            <PlusCircleIcon className="mr-2 h-5 w-5" /> Create new
          </button>
        </div>
      </header>
      <div className="mt-[65px] grid grid-cols-12 gap-4 pb-8 pt-0 sm:px-4 sm:pt-8 md:mt-[83px] lg:px-10">
        {/* Profile */}
        <aside className="hidden text-white md:col-span-4 md:block lg:col-span-3">
          <div className="sticky top-[100px] border p-4">
            <img
              className="mb-3 flex aspect-square h-16 w-16 flex-shrink-0 rounded-full object-cover"
              src="https://images.pexels.com/photos/7775642/pexels-photo-7775642.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
              alt="avatar"
            />
            <h2>Aurora Starlight</h2>
            <p className="text-sm">
              <button className="hover:text-[#ae7aff]">
                starryaurora@gmail.com
              </button>
            </p>
            <hr className="my-2 h-[1px] w-full" />
            <p className="mb-4">
              Night owl | Moon enthusiast | Wanderlust 🌕🌙🌎
            </p>
            <button className="inline-flex w-max items-center bg-[#ae7aff] px-4 py-2 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e]">
              View Profile
            </button>
          </div>
        </aside>
        <section className="col-span-12 border-b border-t border-white sm:border-l sm:border-r md:col-span-8 lg:col-span-6">
          {/* Post Card */}
          <div className="flex border-b border-white p-4 text-white last:border-none">
            {/* Author Profile */}
            <div className="h-10 w-10 shrink-0 sm:h-12 sm:w-12">
              <img
                src={post.authorImage}
                alt={post.authorName}
                className="h-full w-full rounded-full object-cover"
              />
            </div>
            {/* Center-Right Content */}
            <div className="pl-4 pt-1">
              {/* Post Metadata */}
              <div className="mb-2 flex items-center gap-x-2">
                <div className="w-full">
                  <h2 className="inline-block font-bold">{post.authorName}</h2>
                  <span className="ml-2 inline-block text-sm text-gray-400">
                    {post.createdOn}
                  </span>
                </div>
                <button className="ml-auto shrink-0 hover:text-[#ae7aff]">
                  <EllipsisVerticalIcon className="h-5 w-5" />
                </button>
              </div>
              {/* Post Text */}
              <p className="mb-4 text-sm sm:text-base">{post.text}</p>
              {/* Post Images */}
              {post.images.length > 0 && (
                <div className="mb-4 grid grid-cols-[repeat(auto-fit,_minmax(200px,_1fr))] gap-4">
                  {post.images.map((image, i) => (
                    <img
                      key={image}
                      src={image}
                      alt={`attachment-${i}`}
                      className="rounded-md"
                    />
                  ))}
                </div>
              )}
              {/* Link Preview */}
              {post.link && (
                <div className="group mb-4 border opacity-95 hover:opacity-100">
                  <div className="max-h-52 overflow-hidden">
                    <img
                      src={post.link.image}
                      alt={post.link.title}
                      className="object-cover"
                    />
                  </div>
                  {/* Link Content */}
                  <div className="p-4">
                    <h3 className="mb-2 font-bold">{post.link.title}</h3>
                    <p className="mb-3 text-sm">{post.link.caption}</p>
                    <span className="inline-flex items-center gap-x-2 break-all text-sm text-[#ae7aff] no-underline group-hover:underline">
                      <LinkIcon className="h-4 w-4 shrink-0" />
                      {post.link.url}
                    </span>
                  </div>
                </div>
              )}
              {/* Post Actions Buttons */}
              <div className="flex gap-x-4">
                {/* Like Button */}
                <button
                  className={`group inline-flex items-center gap-x-1 outline-none after:content-[attr(data-like-count)] focus:after:content-[attr(data-like-count-alt)] ${
                    post.liked
                      ? "text-[#ae7aff] focus:text-inherit"
                      : "hover:text-[#ae7aff] focus:text-[#ae7aff]"
                  }`}
                  data-like-count={post.likeCount}
                  data-like-count-alt={
                    post.liked ? post.likeCount - 1 : post.likeCount + 1
                  }
                >
                  <HeartIcon
                    className={`h-5 w-5 ${
                      post.liked
                        ? "fill-[#ae7aff] group-focus:fill-none"
                        : "group-focus:fill-[#ae7aff]"
                    }`}
                  />
                </button>
                {/* Comment Button */}
                <button className="inline-flex items-center gap-x-1 outline-none hover:text-[#ae7aff]">
                  <ChatBubbleOvalLeftEllipsisIcon className="h-5 w-5" />
                  <span>{post.commentCount}</span>
                </button>
                {/* Share and bookmarked Button */}
                <div className="ml-auto">
                  <button className="mr-2 inline-flex items-center gap-x-1 outline-none hover:text-[#ae7aff]">
                    <ShareIcon className="h-5 w-5" />
                  </button>
                  <button
                    className={`group inline-flex items-center gap-x-1 outline-none hover:text-[#ae7aff] ${
                      post.bookmarked
                        ? "focus:text-white"
                        : "focus:text-[#ae7aff]"
                    }`}
                  >
                    <BookmarkIcon
                      className={`h-5 w-5 ${
                        post.bookmarked
                          ? "fill-[#ae7aff] text-[#ae7aff] group-focus:fill-none group-focus:text-inherit"
                          : "group-focus:fill-[#ae7aff]"
                      }`}
                    />
                  </button>
                </div>
              </div>
            </div>
          </div>

          {/* Add Comment Form */}
          <div className="flex w-full items-center justify-start border-b border-white px-4 py-2 last:border-none">
            <img
              className="flex aspect-square h-10 w-10 shrink-0 rounded-full object-cover"
              src="https://images.pexels.com/photos/7775642/pexels-photo-7775642.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
              alt="avatar"
            />
            <input
              placeholder="Comment..."
              className="w-full bg-transparent p-2 text-white !outline-none placeholder:text-gray-500 md:p-4"
            />
            <div className="flex gap-x-1 sm:gap-x-2">
              <button className="flex shrink-0 items-center justify-center p-1">
                <FaceSmileIcon className="w-6 text-white" />
              </button>
              <button className="flex shrink-0 items-center justify-center p-1">
                <PlusIcon className="w-6 text-white" />
              </button>
              <button className="flex shrink-0 items-center justify-center bg-[#ae7aff] p-1">
                <PaperAirplaneIcon className="w-6 text-black" />
              </button>
            </div>
          </div>

          {/* Post Comments */}
          {post.comments.map((comment) => (
            <div
              className="relative border-b border-white last:border-none"
              key={comment.id}
            >
              <div className="flex p-4 text-white">
                {/* Author Profile */}
                <div
                  className={`relative shrink-0 before:absolute before:left-1/2 before:top-[30px] before:z-[5] before:h-full before:w-[1px] ${
                    comment.replies.length > 0
                      ? "before:bg-white"
                      : "before:bg-transparent"
                  }`}
                >
                  <div className="relative z-10 h-10 w-10 sm:h-12 sm:w-12">
                    <img
                      src={comment.authorImage}
                      alt={comment.authorName}
                      className="h-full w-full rounded-full object-cover"
                    />
                  </div>
                </div>
                {/* Center-Right Content */}
                <div className="pl-4 pt-1">
                  {/* Post Metadata */}
                  <div className="mb-2 flex items-center gap-x-2">
                    <div className="w-full">
                      <h2 className="inline-block font-bold">
                        {comment.authorName}
                      </h2>
                      <span className="ml-2 inline-block text-sm text-gray-400">
                        {comment.createdOn}
                      </span>
                    </div>
                    <button className="ml-auto shrink-0 hover:text-[#ae7aff]">
                      <EllipsisVerticalIcon className="h-5 w-5" />
                    </button>
                  </div>
                  {/* Post Text */}
                  <p className="mb-4 text-sm sm:text-base">{comment.text}</p>
                  {/* Post Images */}
                  {comment.images.length > 0 && (
                    <div className="mb-4 grid grid-cols-[repeat(auto-fit,_minmax(200px,_1fr))] gap-4">
                      {comment.images.map((image, i) => (
                        <img
                          key={image}
                          src={image}
                          alt={`attachment-${i}`}
                          className="rounded-md"
                        />
                      ))}
                    </div>
                  )}
                  {/* Post Actions Buttons */}
                  <div className="flex gap-x-4">
                    {/* Like Button */}
                    <button
                      className={`group inline-flex items-center gap-x-1 outline-none after:content-[attr(data-like-count)] focus:after:content-[attr(data-like-count-alt)] ${
                        comment.liked
                          ? "text-[#ae7aff] focus:text-inherit"
                          : "hover:text-[#ae7aff] focus:text-[#ae7aff]"
                      }`}
                      data-like-count={comment.likeCount}
                      data-like-count-alt={
                        comment.liked
                          ? comment.likeCount - 1
                          : comment.likeCount + 1
                      }
                    >
                      <HeartIcon
                        className={`h-5 w-5 ${
                          comment.liked
                            ? "fill-[#ae7aff] group-focus:fill-none"
                            : "group-focus:fill-[#ae7aff]"
                        }`}
                      />
                    </button>
                    {/* Comment Button */}
                    <button className="inline-flex items-center gap-x-1 outline-none hover:text-[#ae7aff]">
                      <ChatBubbleLeftRightIcon className="h-5 w-5" />
                      <span>{comment.commentCount}</span>
                    </button>
                  </div>
                </div>
              </div>
              {/* Nested Comments */}
              {comment.replies.map((comment) => (
                <div key={comment.id} className="flex p-4 text-white">
                  {/* Author Profile */}
                  <div className="h-10 w-10 shrink-0 sm:h-12 sm:w-12">
                    <img
                      src={comment.authorImage}
                      alt={comment.authorName}
                      className="h-full w-full rounded-full object-cover"
                    />
                  </div>
                  {/* Center-Right Content */}
                  <div className="pl-4 pt-1">
                    {/* Post Metadata */}
                    <div className="mb-2 flex items-center gap-x-2">
                      <div className="w-full">
                        <h2 className="inline-block font-bold">
                          {comment.authorName}
                        </h2>
                        <span className="ml-2 inline-block text-sm text-gray-400">
                          {comment.createdOn}
                        </span>
                      </div>
                      <button className="ml-auto shrink-0 hover:text-[#ae7aff]">
                        <EllipsisVerticalIcon className="h-5 w-5" />
                      </button>
                    </div>
                    {/* Post Text */}
                    <p className="mb-4 text-sm sm:text-base">{comment.text}</p>
                    {/* Post Images */}
                    {comment.images.length > 0 && (
                      <div className="mb-4 grid grid-cols-[repeat(auto-fit,_minmax(200px,_1fr))] gap-4">
                        {comment.images.map((image, i) => (
                          <img
                            key={image}
                            src={image}
                            alt={`attachment-${i}`}
                            className="rounded-md"
                          />
                        ))}
                      </div>
                    )}
                    {/* Post Actions Buttons */}
                    <div className="flex gap-x-4">
                      {/* Like Button */}
                      <button
                        className={`group inline-flex items-center gap-x-1 outline-none after:content-[attr(data-like-count)] focus:after:content-[attr(data-like-count-alt)] ${
                          comment.liked
                            ? "text-[#ae7aff] focus:text-inherit"
                            : "hover:text-[#ae7aff] focus:text-[#ae7aff]"
                        }`}
                        data-like-count={comment.likeCount}
                        data-like-count-alt={
                          comment.liked
                            ? comment.likeCount - 1
                            : comment.likeCount + 1
                        }
                      >
                        <HeartIcon
                          className={`h-5 w-5 ${
                            comment.liked
                              ? "fill-[#ae7aff] group-focus:fill-none"
                              : "group-focus:fill-[#ae7aff]"
                          }`}
                        />
                      </button>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          ))}
        </section>
        {/* Trending Topics */}
        <aside className="hidden text-white lg:col-span-3 lg:block">
          <div className="sticky top-[100px] border p-4">
            <h2 className="mb-4 font-bold"># Trending Hashtags</h2>
            <ul className="list-disc pl-4">
              {["javascript", "typescript", "java", "python", "golang"].map(
                (hashtag) => (
                  <li key={hashtag}>
                    <button className="hover:text-[#ae7aff]">#{hashtag}</button>
                  </li>
                ),
              )}
            </ul>
          </div>
        </aside>
      </div>
    </div>
  );
};

export default PostDetail;


================================================
FILE: src/components/templates/social-media/post-listing.jsx
================================================
import React from "react";
import {
  BellIcon,
  BookmarkIcon,
  EllipsisVerticalIcon,
  FaceSmileIcon,
  HeartIcon,
  LinkIcon,
  MagnifyingGlassIcon,
  PlusIcon,
} from "@heroicons/react/24/outline";
import {
  ChatBubbleOvalLeftEllipsisIcon,
  PaperAirplaneIcon,
  PlusCircleIcon,
  ShareIcon,
} from "@heroicons/react/24/solid";

const posts = [
  {
    id: 1,
    authorImage:
      "https://images.pexels.com/photos/18264716/pexels-photo-18264716.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    authorName: "Mystical Wanderer",
    createdOn: "15 minutes ago",
    text: "Uncovering ancient secrets and mystical wonders. The journey is the destination. 🔮🌟 #MythologyQuest",
    images: [],
    likeCount: 46,
    commentCount: 13,
    bookmarked: false,
    liked: true,
  },
  {
    id: 2,
    authorImage:
      "https://images.pexels.com/photos/13847596/pexels-photo-13847596.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    authorName: "Aqua Explorer",
    createdOn: "1 hour ago",
    text: "Swimming with the dolphins today, and it was magical! 🐬🌊 #OceanAdventure",
    images: [
      "https://images.pexels.com/photos/18107024/pexels-photo-18107024/free-photo-of-an-old-city-view.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    ],
    likeCount: 102,
    commentCount: 18,
    bookmarked: true,
    liked: false,
  },
  {
    id: 3,
    authorImage:
      "https://images.pexels.com/photos/7775637/pexels-photo-7775637.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    authorName: "Solar Flare ",
    createdOn: "59 minutes ago",
    text: "Harnessing the power of the sun for a brighter future. ☀️🔋 #SolarEnergy",
    images: [
      "https://images.pexels.com/photos/18107025/pexels-photo-18107025/free-photo-of-man-reading-newspaper.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      "https://images.pexels.com/photos/18148933/pexels-photo-18148933/free-photo-of-city-road-man-people.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      "https://images.pexels.com/photos/18148937/pexels-photo-18148937/free-photo-of-city-road-traffic-landscape.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    ],
    likeCount: 802,
    commentCount: 99,
    bookmarked: true,
    liked: true,
  },
  {
    id: 4,
    authorImage:
      "https://images.pexels.com/photos/7775642/pexels-photo-7775642.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    authorName: "Aurora Starlight",
    createdOn: "17 hours ago",
    text: "Embracing the lunar magic tonight. The full moon is my muse. 🌕🌌 #MoonlightDreams",
    images: [],
    likeCount: 420,
    commentCount: 20,
    bookmarked: false,
    liked: false,
    link: {
      image:
        "https://images.pexels.com/photos/7775642/pexels-photo-7775642.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      title: "Aurora Starlight",
      caption: "Digital artist | Creative mind | Color magician 🎨🖌️🖼️",
      url: "https://www.aurorastarry.com/",
    },
  },
  {
    id: 5,
    authorImage:
      "https://images.pexels.com/photos/3532553/pexels-photo-3532553.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    authorName: "Nova Sparks",
    createdOn: "1 day ago",
    text: "💡 Tech Poll: Which emerging technology excites you the most?",
    images: [],
    likeCount: 207,
    commentCount: 63,
    bookmarked: false,
    liked: false,
    poll: [
      {
        name: "Artificial Intelligence",
      },
      {
        name: "Virtual Reality",
      },
      {
        name: "Quantum Computing",
      },
      {
        name: "5G Connectivity",
      },
    ],
  },
  {
    id: 6,
    authorImage:
      "https://images.pexels.com/photos/569314/pexels-photo-569314.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    authorName: "Zen Garden",
    createdOn: "7 days ago",
    text: "🧘‍♂️ Mindfulness Poll: Which mindfulness practice resonates with you the most?",
    images: [],
    likeCount: 97,
    commentCount: 13,
    liked: true,
    bookmarked: false,
    poll: [
      {
        name: "Meditation",
        votePercentage: 30,
      },
      {
        name: "Yoga",
        selected: true,
        votePercentage: 33,
      },
      {
        name: "Deep Breathing",
        votePercentage: 27,
      },
      {
        name: "Tai Chi",
        votePercentage: 20,
      },
    ],
  },
  {
    id: 7,
    authorImage:
      "https://images.pexels.com/photos/1739942/pexels-photo-1739942.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    authorName: "Pixel Painter",
    createdOn: "1 months ago",
    text: "🎨 Art Poll: What's your preferred art medium for creating masterpieces?",
    images: [],
    likeCount: 99,
    commentCount: 13,
    bookmarked: true,
    liked: false,
    poll: [
      {
        name: "Acrylic Paint",
        votePercentage: 20,
      },
      {
        name: "Watercolor",
        votePercentage: 19,
      },
      {
        name: "Digital Art",
        votePercentage: 18,
      },
      {
        name: "Charcoal Sketching",
        votePercentage: 43,
      },
    ],
  },
];

const PostListing = () => {
  return (
    <div className="min-h-screen bg-[#121212]">
      <header className="fixed top-0 z-10 mx-auto flex w-full max-w-full items-center justify-between border-b-[1px] border-b-slate-300 bg-[#121212] p-4 text-white lg:px-10">
        <h1 className="text-xl font-extrabold md:text-3xl">All Posts</h1>
        <div className="flex w-max flex-shrink-0 items-center justify-end gap-6">
          <span className="relative">
            <MagnifyingGlassIcon className="h-8 w-8" />
          </span>
          <span className="relative">
            <BellIcon className="h-8 w-8 text-white" />
            <span className="absolute right-1 top-0 flex h-2.5 w-2.5 items-center justify-center rounded-full bg-green-500 p-1 text-white"></span>
          </span>
          <button className="hidden w-max items-center justify-center border-[1px] border-white p-3 text-center font-bold text-white md:inline-flex">
            <PlusCircleIcon className="mr-2 h-5 w-5" /> Create new
          </button>
        </div>
      </header>
      <div className="mt-[65px] grid grid-cols-12 gap-4 pb-8 pt-0 sm:px-4 sm:pt-8 md:mt-[83px] lg:px-10">
        {/* Profile */}
        <aside className="hidden text-white md:col-span-4 md:block lg:col-span-3">
          <div className="sticky top-[100px] border p-4">
            <img
              className="mb-3 flex aspect-square h-16 w-16 flex-shrink-0 rounded-full object-cover"
              src="https://images.pexels.com/photos/7775642/pexels-photo-7775642.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
              alt="avatar"
            />
            <h2>Aurora Starlight</h2>
            <p className="text-sm">
              <button className="hover:text-[#ae7aff]">
                starryaurora@gmail.com
              </button>
            </p>
            <hr className="my-2 h-[1px] w-full" />
            <p className="mb-4">
              Night owl | Moon enthusiast | Wanderlust 🌕🌙🌎
            </p>
            <button className="inline-flex w-max items-center bg-[#ae7aff] px-4 py-2 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e]">
              View Profile
            </button>
          </div>
        </aside>
        <section className="col-span-12 md:col-span-8 lg:col-span-6">
          {/* Create Post Form */}
          <div className="mb-2 flex w-full items-center justify-start border-b border-t border-white px-4 py-2 sm:mb-6 sm:border-l sm:border-r sm:shadow-[5px_5px_0px_0px_#4f4e4e]">
            <img
              className="flex aspect-square h-10 w-10 shrink-0 rounded-full object-cover"
              src="https://images.pexels.com/photos/7775642/pexels-photo-7775642.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
              alt="avatar"
            />
            <input
              placeholder="Type to add something"
              className="w-full bg-transparent p-2 text-white !outline-none placeholder:text-gray-500 md:p-4"
            />
            <div className="flex gap-x-1 sm:gap-x-2">
              <button className="flex shrink-0 items-center justify-center p-1">
                <FaceSmileIcon className="w-6 text-white" />
              </button>
              <button className="flex shrink-0 items-center justify-center p-1">
                <PlusIcon className="w-6 text-white" />
              </button>
              <button className="flex shrink-0 items-center justify-center bg-[#ae7aff] p-1">
                <PaperAirplaneIcon className="w-6 text-black" />
              </button>
            </div>
          </div>
          {/* Post Lists */}
          {posts.map((post) => (
            <div
              key={post.id}
              className="relative mb-2 w-full last:mb-0 sm:mb-4"
            >
              <div className="flex border-b border-t border-white p-4 text-white sm:border-l sm:border-r">
                {/* Author Profile */}
                <div className="h-10 w-10 shrink-0 sm:h-12 sm:w-12">
                  <img
                    src={post.authorImage}
                    alt={post.authorName}
                    className="h-full w-full rounded-full object-cover"
                  />
                </div>
                {/* Center-Right Content */}
                <div className="pl-4 pt-1">
                  {/* Post Metadata */}
                  <div className="mb-2 flex items-center gap-x-2">
                    <div className="w-full">
                      <h2 className="inline-block font-bold">
                        {post.authorName}
                      </h2>
                      <span className="ml-2 inline-block text-sm text-gray-400">
                        {post.createdOn}
                      </span>
                    </div>
                    <button className="ml-auto shrink-0 hover:text-[#ae7aff]">
                      <EllipsisVerticalIcon className="h-5 w-5" />
                    </button>
                  </div>
                  {/* Post Text */}
                  <p className="mb-4 text-sm sm:text-base">{post.text}</p>
                  {/* Post Images */}
                  {post.images.length > 0 && (
                    <div className="mb-4 grid grid-cols-[repeat(auto-fit,_minmax(200px,_1fr))] gap-4">
                      {post.images.map((image, i) => (
                        <img
                          key={image}
                          src={image}
                          alt={`attachment-${i}`}
                          className="rounded-md"
                        />
                      ))}
                    </div>
                  )}
                  {/* Link Preview */}
                  {post.link && (
                    <div className="group mb-4 border opacity-95 hover:opacity-100">
                      <div className="max-h-52 overflow-hidden">
                        <img
                          src={post.link.image}
                          alt={post.link.title}
                          className="object-cover"
                        />
                      </div>
                      {/* Link Content */}
                      <div className="p-4">
                        <h3 className="mb-2 font-bold">{post.link.title}</h3>
                        <p className="mb-3 text-sm">{post.link.caption}</p>
                        <span className="inline-flex items-center gap-x-2 break-all text-sm text-[#ae7aff] no-underline group-hover:underline">
                          <LinkIcon className="h-4 w-4 shrink-0" />
                          {post.link.url}
                        </span>
                      </div>
                    </div>
                  )}
                  {/* Polls */}
                  {post.poll &&
                    post.poll.map((option) => (
                      <button
                        key={option?.name}
                        className={`relative z-[1] mb-4 inline-flex w-full items-center gap-x-4 border p-4 before:absolute before:inset-y-0 before:left-0 before:z-[-1] before:w-[var(--data-vote-percentage)] last:mb-0 ${
                          option?.votePercentage && option?.votePercentage >= 0
                            ? ""
                            : "hover:bg-[#ae7aff] hover:text-black focus:border-[#ae7aff] focus:bg-[#ae7aff] focus:text-black"
                        } ${
                          option?.selected
                            ? "before:bg-[#ae7aff]"
                            : "before:bg-gray-400/10"
                        }
              `}
                        disabled={Boolean(option?.votePercentage)}
                        style={{
                          "--data-vote-percentage": `${
                            option?.votePercentage || 0
                          }%`,
                        }}
                      >
                        {option?.name}{" "}
                        {option?.votePercentage && (
                          <span className="ml-auto shrink-0 text-sm">
                            {option.votePercentage}%
                          </span>
                        )}
                      </button>
                    ))}
                  {/* Post Actions Buttons */}
                  <div className="flex gap-x-4">
                    {/* Like Button */}
                    <button
                      className={`group inline-flex items-center gap-x-1 outline-none after:content-[attr(data-like-count)] focus:after:content-[attr(data-like-count-alt)] ${
                        post.liked
                          ? "text-[#ae7aff] focus:text-inherit"
                          : "hover:text-[#ae7aff] focus:text-[#ae7aff]"
                      }`}
                      data-like-count={post.likeCount}
                      data-like-count-alt={
                        post.liked ? post.likeCount - 1 : post.likeCount + 1
                      }
                    >
                      <HeartIcon
                        className={`h-5 w-5 ${
                          post.liked
                            ? "fill-[#ae7aff] group-focus:fill-none"
                            : "group-focus:fill-[#ae7aff]"
                        }`}
                      />
                    </button>
                    {/* Comment Button */}
                    <button className="inline-flex items-center gap-x-1 outline-none hover:text-[#ae7aff]">
                      <ChatBubbleOvalLeftEllipsisIcon className="h-5 w-5" />
                      <span>{post.commentCount}</span>
                    </button>
                    {/* Share and Bookmarked Button */}
                    <div className="ml-auto">
                      <button className="mr-2 inline-flex items-center gap-x-1 outline-none hover:text-[#ae7aff]">
                        <ShareIcon className="h-5 w-5" />
                      </button>
                      <button
                        className={`group inline-flex items-center gap-x-1 outline-none hover:text-[#ae7aff] ${
                          post.bookmarked
                            ? "focus:text-white"
                            : "focus:text-[#ae7aff]"
                        }`}
                      >
                        <BookmarkIcon
                          className={`h-5 w-5 ${
                            post.bookmarked
                              ? "fill-[#ae7aff] text-[#ae7aff] group-focus:fill-none group-focus:text-inherit"
                              : "group-focus:fill-[#ae7aff]"
                          }`}
                        />
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </section>
        {/* Trending Topics */}
        <aside className="hidden text-white lg:col-span-3 lg:block">
          <div className="sticky top-[100px] border p-4">
            <h2 className="mb-4 font-bold"># Trending Hashtags</h2>
            <ul className="list-disc pl-4">
              {["javascript", "typescript", "java", "python", "golang"].map(
                (hashtag) => (
                  <li key={hashtag}>
                    <button className="hover:text-[#ae7aff]">#{hashtag}</button>
                  </li>
                ),
              )}
            </ul>
          </div>
        </aside>
      </div>
    </div>
  );
};

export default PostListing;


================================================
FILE: src/components/templates/social-media/register.jsx
================================================
import { PlusIcon } from "@heroicons/react/24/outline";

const SocialRegister = () => {
  return (
    <div className="min-h-screen bg-[#121212]">
      <header className="fixed top-0 z-10 mx-auto flex w-full max-w-full items-center justify-between border-b-[1px] border-b-slate-300 bg-[#121212] p-4 text-white lg:px-10">
        <h1 className="text-xl font-extrabold md:text-3xl">Register</h1>
        <div className="flex w-max flex-shrink-0 items-center justify-end gap-6">
          <button className="hidden w-max items-center justify-center border-[1px] border-white p-3 text-center font-bold text-white md:inline-flex">
            Login
          </button>
        </div>
      </header>
      <div className="mx-auto flex w-full items-stretch justify-between gap-10">
        <div className="mx-auto mt-28 flex w-full flex-col items-start justify-start p-6 sm:max-w-4xl lg:px-10">
          <div className="w-full text-center">
            <h1 className="mb-3 text-5xl font-extrabold text-white">
              Register
            </h1>
            <p className="text-xs text-slate-400">
              Before we post, please create your account
            </p>
          </div>
          <div className="my-14 flex w-full flex-col items-start justify-start gap-4">
            <div className="flex w-full items-center justify-center">
              <input id="avatar-input-1" hidden type="file" />
              <label
                htmlFor="avatar-input-1"
                className="relative flex aspect-square h-24 w-24 cursor-pointer items-center justify-center overflow-visible rounded-full border-4 border-[#ae7aff] p-1"
              >
                <div className="flex h-full w-full items-center justify-center rounded-full">
                  <PlusIcon className="h-8 w-8 text-white" />
                </div>
                <span className="absolute bottom-0 right-0 flex aspect-square h-5 w-5 items-center justify-center rounded-full bg-[#ae7aff] p-1">
                  <PlusIcon className="h-3 w-3 text-black" />
                </span>
              </label>
            </div>

            <div className="mt-10 flex w-full flex-col items-center justify-between gap-4 md:flex-row">
              <div className="flex w-full flex-col items-start justify-start gap-2">
                <label className="text-xs text-slate-200">First name</label>
                <input
                  placeholder="Enter a first name..."
                  autoComplete="false"
                  className="w-full border-[1px] border-white bg-black p-4 text-white placeholder:text-gray-500"
                />
              </div>
              <div className="flex w-full flex-col items-start justify-start gap-2">
                <label className="text-xs text-slate-200">Last name</label>
                <input
                  placeholder="Enter a last name..."
                  autoComplete="false"
                  className="w-full border-[1px] border-white bg-black p-4 text-white placeholder:text-gray-500"
                />
              </div>
            </div>
            <div className="flex w-full flex-col items-start justify-start gap-2">
              <label className="text-xs text-slate-200">Tagline</label>
              <input
                placeholder="Enter a profile tagline..."
                autoComplete="false"
                className="w-full border-[1px] border-white bg-black p-4 text-white placeholder:text-gray-500"
              />
            </div>
            <div className="flex w-full flex-col items-start justify-start gap-2">
              <label className="text-xs text-slate-200">Username</label>
              <input
                placeholder="Enter a username..."
                autoComplete="false"
                className="w-full border-[1px] border-white bg-black p-4 text-white placeholder:text-gray-500"
              />
            </div>

            <div className="flex w-full flex-col items-start justify-start gap-2">
              <label className="text-xs text-slate-200">Email</label>
              <input
                placeholder="Enter an email..."
                autoComplete="false"
                className="w-full border-[1px] border-white bg-black p-4 text-white placeholder:text-gray-500"
              />
            </div>
            <div className="flex w-full flex-col items-start justify-start gap-2">
              <label className="text-xs text-slate-200">Password</label>
              <input
                placeholder="Enter a password..."
                autoComplete="false"
                type="password"
                className="w-full border-[1px] border-white bg-black p-4 text-white placeholder:text-gray-500"
              />
            </div>

            <div className="mr-4 flex items-center">
              <input
                type="checkbox"
                id="checkbox-2"
                name="checkbox-2"
                className="absolute h-6 w-6 cursor-pointer opacity-0 [&:checked+div]:bg-green-500 [&:checked+div_svg]:block"
              />
              <div className="mr-2 flex h-6 w-6 flex-shrink-0 items-center justify-center border-[1px] border-white bg-transparent focus-within:border-white">
                <svg
                  className="pointer-events-none hidden h-3 w-3 fill-current text-white"
                  version="1.1"
                  viewBox="0 0 17 12"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <g fill="none" fillRule="evenodd">
                    <g
                      transform="translate(-9 -11)"
                      fill="#000000"
                      fillRule="nonzero"
                    >
                      <path d="m25.576 11.414c0.56558 0.55188 0.56558 1.4439 0 1.9961l-9.404 9.176c-0.28213 0.27529-0.65247 0.41385-1.0228 0.41385-0.37034 0-0.74068-0.13855-1.0228-0.41385l-4.7019-4.588c-0.56584-0.55188-0.56584-1.4442 0-1.9961 0.56558-0.55214 1.4798-0.55214 2.0456 0l3.679 3.5899 8.3812-8.1779c0.56558-0.55214 1.4798-0.55214 2.0456 0z" />
                    </g>
                  </g>
                </svg>
              </div>
              <div className="ml-3 text-sm leading-6">
                <label
                  htmlFor="checkbox-2"
                  className="text-sm font-medium text-white"
                >
                  I agree to the terms and conditions
                </label>
              </div>
            </div>
            <button className="w-full bg-[#ae7aff] p-3 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e]">
              Create Account
            </button>
            <p className="text-sm font-light text-white">
              Already registered?{" "}
              <span className="cursor-pointer font-bold hover:underline">
                Sign in to your account
              </span>
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default SocialRegister;


================================================
FILE: src/components/templates/social-media/user-profile.jsx
================================================
import React from "react";
import {
  BellIcon,
  BookmarkIcon,
  EllipsisVerticalIcon,
  HeartIcon,
  LinkIcon,
  MagnifyingGlassIcon,
} from "@heroicons/react/24/outline";
import {
  ChatBubbleOvalLeftEllipsisIcon,
  PlusCircleIcon,
  ShareIcon,
} from "@heroicons/react/24/solid";

const posts = [
  {
    id: 1,
    authorImage:
      "https://images.pexels.com/photos/569314/pexels-photo-569314.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    authorName: "Zen Garden",
    createdOn: "15 minutes ago",
    text: "Uncovering ancient secrets and mystical wonders. The journey is the destination. 🔮🌟 #MythologyQuest",
    images: [],
    likeCount: 46,
    commentCount: 13,
    bookmarked: false,
    liked: true,
  },
  {
    id: 2,
    authorImage:
      "https://images.pexels.com/photos/569314/pexels-photo-569314.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    authorName: "Zen Garden",
    createdOn: "1 hour ago",
    text: "Swimming with the dolphins today, and it was magical! 🐬🌊 #OceanAdventure",
    images: [
      "https://images.pexels.com/photos/18107024/pexels-photo-18107024/free-photo-of-an-old-city-view.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    ],
    likeCount: 102,
    commentCount: 18,
    bookmarked: true,
    liked: false,
  },
  {
    id: 3,
    authorImage:
      "https://images.pexels.com/photos/569314/pexels-photo-569314.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    authorName: "Zen Garden",
    createdOn: "59 minutes ago",
    text: "Harnessing the power of the sun for a brighter future. ☀️🔋 #SolarEnergy",
    images: [
      "https://images.pexels.com/photos/18107025/pexels-photo-18107025/free-photo-of-man-reading-newspaper.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      "https://images.pexels.com/photos/18148933/pexels-photo-18148933/free-photo-of-city-road-man-people.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      "https://images.pexels.com/photos/18148937/pexels-photo-18148937/free-photo-of-city-road-traffic-landscape.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    ],
    likeCount: 802,
    commentCount: 99,
    bookmarked: true,
    liked: true,
  },
  {
    id: 4,
    authorImage:
      "https://images.pexels.com/photos/569314/pexels-photo-569314.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    authorName: "Zen Garden",
    createdOn: "17 hours ago",
    text: "Embracing the lunar magic tonight. The full moon is my muse. 🌕🌌 #MoonlightDreams",
    images: [],
    likeCount: 420,
    commentCount: 20,
    bookmarked: false,
    liked: false,
    link: {
      image:
        "https://images.pexels.com/photos/569314/pexels-photo-569314.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      title: "Zen Garden",
      caption: "Digital artist | Creative mind | Color magician 🎨🖌️🖼️",
      url: "http://www.zengardenmindfulness.com/",
    },
  },
  {
    id: 5,
    authorImage:
      "https://images.pexels.com/photos/569314/pexels-photo-569314.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    authorName: "Zen Garden",
    createdOn: "1 day ago",
    text: "💡 Tech Poll: Which emerging technology excites you the most?",
    images: [],
    likeCount: 207,
    commentCount: 63,
    bookmarked: false,
    liked: false,
    poll: [
      {
        name: "Artificial Intelligence",
      },
      {
        name: "Virtual Reality",
      },
      {
        name: "Quantum Computing",
      },
      {
        name: "5G Connectivity",
      },
    ],
  },
  {
    id: 6,
    authorImage:
      "https://images.pexels.com/photos/569314/pexels-photo-569314.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    authorName: "Zen Garden",
    createdOn: "7 days ago",
    text: "🧘‍♂️ Mindfulness Poll: Which mindfulness practice resonates with you the most?",
    images: [],
    likeCount: 97,
    commentCount: 13,
    liked: true,
    bookmarked: false,
    poll: [
      {
        name: "Meditation",
        votePercentage: 30,
      },
      {
        name: "Yoga",
        selected: true,
        votePercentage: 33,
      },
      {
        name: "Deep Breathing",
        votePercentage: 27,
      },
      {
        name: "Tai Chi",
        votePercentage: 20,
      },
    ],
  },
  {
    id: 7,
    authorImage:
      "https://images.pexels.com/photos/569314/pexels-photo-569314.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    authorName: "Zen Garden",
    createdOn: "1 months ago",
    text: "🎨 Art Poll: What's your preferred art medium for creating masterpieces?",
    images: [],
    likeCount: 99,
    commentCount: 13,
    bookmarked: true,
    liked: false,
    poll: [
      {
        name: "Acrylic Paint",
        votePercentage: 20,
      },
      {
        name: "Watercolor",
        votePercentage: 19,
      },
      {
        name: "Digital Art",
        votePercentage: 18,
      },
      {
        name: "Charcoal Sketching",
        votePercentage: 43,
      },
    ],
  },
];

const UserProfile = () => {
  return (
    <div className="min-h-screen bg-[#121212]">
      <header className="fixed top-0 z-10 mx-auto flex w-full max-w-full items-center justify-between border-b-[1px] border-b-slate-300 bg-[#121212] p-4 text-white lg:px-10">
        <h1 className="text-xl font-extrabold md:text-3xl">Profile</h1>
        <div className="flex w-max flex-shrink-0 items-center justify-end gap-6">
          <span className="relative">
            <MagnifyingGlassIcon className="h-8 w-8" />
          </span>
          <span className="relative">
            <BellIcon className="h-8 w-8 text-white" />
            <span className="absolute right-1 top-0 flex h-2.5 w-2.5 items-center justify-center rounded-full bg-green-500 p-1 text-white"></span>
          </span>
          <button className="hidden w-max items-center justify-center border-[1px] border-white p-3 text-center font-bold text-white md:inline-flex">
            <PlusCircleIcon className="mr-2 h-5 w-5" /> Create new
          </button>
        </div>
      </header>
      <div className="mt-[65px] grid grid-cols-12 gap-4 pb-8 pt-0 sm:px-4 sm:pt-8 md:mt-[83px] lg:px-10">
        {/* Empty */}
        <aside className="col-span-12 text-white md:col-span-5 lg:col-span-4 xl:col-span-3">
          {/* Profile Card */}
          <div className="sticky top-[100px] border-b border-white p-4 sm:border">
            <img
              className="mb-3 flex aspect-square h-16 w-16 rounded-full border-2 border-[#ae7aff] object-cover"
              src="https://images.pexels.com/photos/569314/pexels-photo-569314.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
              alt="avatar"
            />

            <h2 className="mb-1 font-bold">Zen Garden</h2>
            <p className="text-sm">
              Meditation guru | Nature lover | Zen master 🧘‍♂️🌿🍃
            </p>

            <hr className="my-4 h-[1px] w-full" />
            <div className="mb-4">
              <h3 className="mb-1 font-bold">Short Bio</h3>
              <p className="text-sm">
                Guiding inner peace through meditation, finding solace in
                nature&apos;s embrace, and mastering the art of Zen living.
                🧘‍♂️🌿🍃
              </p>
            </div>
            <div className="mb-4 text-sm">
              <h3 className="mb-1 font-bold">Public link</h3>
              <button className="block text-[#ae7aff] hover:underline">
                gardenzen@gmail.com
              </button>
              <button className="block break-all text-[#ae7aff] hover:underline">
                http://www.zengardenmindfulness.com/
              </button>
            </div>
            <p className="mb-4 flex gap-x-4">
              <span className="inline-block">
                <span className="font-bold">400&nbsp;</span>
                <span className="text-sm text-gray-400">Followers</span>
              </span>
              <span className="inline-block">
                <span className="font-bold">70&nbsp;</span>
                <span className="text-sm text-gray-400">Following</span>
              </span>
            </p>
            <button className="inline-flex w-max items-center bg-[#ae7aff] px-4 py-2 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out after:content-['Follow'] focus:after:content-['Unfollow'] active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e]"></button>
          </div>
        </aside>

        <section className="col-span-12 text-white md:col-span-7 lg:col-span-5 xl:col-span-6">
          {/* Post Lists */}
          {posts.map((post) => (
            <div
              key={post.id}
              className="relative mb-2 w-full last:mb-0 sm:mb-4"
            >
              <div className="flex border-b border-t border-white p-4 text-white sm:border-l sm:border-r">
                {/* Author Profile */}
                <div className="h-10 w-10 shrink-0 sm:h-12 sm:w-12">
                  <img
                    src={post.authorImage}
                    alt={post.authorName}
                    className="h-full w-full rounded-full object-cover"
                  />
                </div>
                {/* Center-Right Content */}
                <div className="pl-4 pt-1">
                  {/* Post Metadata */}
                  <div className="mb-2 flex items-center gap-x-2">
                    <div className="w-full">
                      <h2 className="inline-block font-bold">
                        {post.authorName}
                      </h2>
                      <span className="ml-2 inline-block text-sm text-gray-400">
                        {post.createdOn}
                      </span>
                    </div>
                    <button className="ml-auto shrink-0 hover:text-[#ae7aff]">
                      <EllipsisVerticalIcon className="h-5 w-5" />
                    </button>
                  </div>
                  {/* Post Text */}
                  <p className="mb-4 text-sm sm:text-base">{post.text}</p>
                  {/* Post Images */}
                  {post.images.length > 0 && (
                    <div className="mb-4 grid grid-cols-[repeat(auto-fit,_minmax(200px,_1fr))] gap-4">
                      {post.images.map((image, i) => (
                        <img
                          key={image}
                          src={image}
                          alt={`attachment-${i}`}
                          className="rounded-md"
                        />
                      ))}
                    </div>
                  )}
                  {/* Link Preview */}
                  {post.link && (
                    <div className="group mb-4 border opacity-95 hover:opacity-100">
                      <div className="max-h-52 overflow-hidden">
                        <img
                          src={post.link.image}
                          alt={post.link.title}
                          className="object-cover"
                        />
                      </div>
                      {/* Link Content */}
                      <div className="p-4">
                        <h3 className="mb-2 font-bold">{post.link.title}</h3>
                        <p className="mb-3 text-sm">{post.link.caption}</p>
                        <span className="inline-flex items-center gap-x-2 break-all text-sm text-[#ae7aff] no-underline group-hover:underline">
                          <LinkIcon className="h-4 w-4 shrink-0" />
                          {post.link.url}
                        </span>
                      </div>
                    </div>
                  )}
                  {/* Polls */}
                  {post.poll &&
                    post.poll.map((option) => (
                      <button
                        key={option?.name}
                        className={`relative z-[1] mb-4 inline-flex w-full items-center gap-x-4 border p-4 before:absolute before:inset-y-0 before:left-0 before:z-[-1] before:w-[var(--data-vote-percentage)] last:mb-0 ${
                          option?.votePercentage && option?.votePercentage >= 0
                            ? ""
                            : "hover:bg-[#ae7aff] hover:text-black focus:border-[#ae7aff] focus:bg-[#ae7aff] focus:text-black"
                        } ${
                          option?.selected
                            ? "before:bg-[#ae7aff]"
                            : "before:bg-gray-400/10"
                        }
              `}
                        disabled={Boolean(option?.votePercentage)}
                        style={{
                          "--data-vote-percentage": `${
                            option?.votePercentage || 0
                          }%`,
                        }}
                      >
                        {option?.name}{" "}
                        {option?.votePercentage && (
                          <span className="ml-auto shrink-0 text-sm">
                            {option.votePercentage}%
                          </span>
                        )}
                      </button>
                    ))}
                  {/* Post Actions Buttons */}
                  <div className="flex gap-x-4">
                    {/* Like Button */}
                    <button
                      className={`group inline-flex items-center gap-x-1 outline-none after:content-[attr(data-like-count)] focus:after:content-[attr(data-like-count-alt)] ${
                        post.liked
                          ? "text-[#ae7aff] focus:text-inherit"
                          : "hover:text-[#ae7aff] focus:text-[#ae7aff]"
                      }`}
                      data-like-count={post.likeCount}
                      data-like-count-alt={
                        post.liked ? post.likeCount - 1 : post.likeCount + 1
                      }
                    >
                      <HeartIcon
                        className={`h-5 w-5 ${
                          post.liked
                            ? "fill-[#ae7aff] group-focus:fill-none"
                            : "group-focus:fill-[#ae7aff]"
                        }`}
                      />
                    </button>
                    {/* Comment Button */}
                    <button className="inline-flex items-center gap-x-1 outline-none hover:text-[#ae7aff]">
                      <ChatBubbleOvalLeftEllipsisIcon className="h-5 w-5" />
                      <span>{post.commentCount}</span>
                    </button>
                    {/* Share and Bookmarked Button */}
                    <div className="ml-auto">
                      <button className="mr-2 inline-flex items-center gap-x-1 outline-none hover:text-[#ae7aff]">
                        <ShareIcon className="h-5 w-5" />
                      </button>
                      <button
                        className={`group inline-flex items-center gap-x-1 outline-none hover:text-[#ae7aff] ${
                          post.bookmarked
                            ? "focus:text-white"
                            : "focus:text-[#ae7aff]"
                        }`}
                      >
                        <BookmarkIcon
                          className={`h-5 w-5 ${
                            post.bookmarked
                              ? "fill-[#ae7aff] text-[#ae7aff] group-focus:fill-none group-focus:text-inherit"
                              : "group-focus:fill-[#ae7aff]"
                          }`}
                        />
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </section>
        {/* Trending Topics */}
        <aside className="hidden text-white lg:col-span-3 lg:block">
          <div className="sticky top-[100px] border p-4">
            <h2 className="mb-4 font-bold"># Trending Hashtags</h2>
            <ul className="list-disc pl-4">
              {["javascript", "typescript", "java", "python", "golang"].map(
                (hashtag) => (
                  <li key={hashtag}>
                    <button className="hover:text-[#ae7aff]">#{hashtag}</button>
                  </li>
                ),
              )}
            </ul>
          </div>
        </aside>
      </div>
    </div>
  );
};

export default UserProfile;


================================================
FILE: src/components/templates/todo/empty-todos.jsx
================================================
import React from "react";
import { PlusCircleIcon } from "@heroicons/react/20/solid";
import { InboxIcon } from "@heroicons/react/24/outline";

const EmptyTodos = () => {
  return (
    <div className="min-h-screen bg-[#121212]">
      <header className="fixed top-0 z-10 mx-auto flex w-full max-w-full items-center justify-between border-b-[1px] border-b-slate-300 bg-[#121212] p-4 text-white lg:px-10">
        <h1 className="text-xl font-extrabold md:text-3xl">All todos</h1>
        <button className="inline-flex w-max items-center justify-center border-[1px] border-white p-3 text-center font-bold text-white">
          <PlusCircleIcon className="mr-2 h-5 w-5" /> Create new
        </button>
      </header>
      <div className="flex h-full min-h-screen w-full flex-col items-center justify-center px-4 text-center">
        <div className="flex flex-col items-center justify-center gap-4 text-white">
          <InboxIcon className="h-20 w-20 text-white md:h-28 md:w-28" />
          <h1 className="text-4xl font-extrabold md:text-6xl">
            No todos found?
          </h1>
          <p className="max-w-sm text-xs text-gray-200 md:text-sm">
            No todo has been added till now. Click the below button to create a
            new task.
          </p>
        </div>
        <button className="mt-14 inline-flex w-max items-center bg-[#ae7aff] p-3 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e]">
          <PlusCircleIcon className="mr-2 h-5 w-5 text-[#121212]" /> Create a
          new task
        </button>
      </div>
    </div>
  );
};

export default EmptyTodos;


================================================
FILE: src/components/templates/todo/index.ts
================================================
import TodosList from "./todos";
import EmptyTodos from "./empty-todos";

const Todo = {
  TodosList,
  EmptyTodos,
};

export default Todo;


================================================
FILE: src/components/templates/todo/todos.jsx
================================================
import { PlusCircleIcon } from "@heroicons/react/20/solid";
import { PencilIcon, TrashIcon } from "@heroicons/react/24/outline";

const todos = [
  {
    task: "Complete coding challenge",
    date: "10 Aug 2023",
  },
  {
    task: "Read programming article",
    date: "15 Aug 2023",
  },
  {
    task: "Debug the issue in the backend",
    date: "20 Aug 2023",
  },
  {
    task: "Review pull requests",
    date: "25 Aug 2023",
  },
  {
    task: "Prepare presentation on algorithms",
    date: "05 Sept 2023",
  },
  {
    task: "Attend programming meetup",
    date: "18 Sept 2023",
  },
  {
    task: "Optimize database queries",
    date: "10 Oct 2023",
  },
  {
    task: "Participate in hackathon",
    date: "05 Nov 2023",
  },
  {
    task: "Contribute to open source project",
    date: "15 Nov 2023",
  },
];

const TodosList = () => {
  return (
    <div className="min-h-screen bg-[#121212]">
      <header className="fixed top-0 z-10 mx-auto flex w-full max-w-full items-center justify-between border-b-[1px] border-b-slate-300 bg-[#121212] p-4 text-white lg:px-10">
        <h1 className="text-xl font-extrabold md:text-3xl">All todos</h1>
        <button className="inline-flex w-max items-center justify-center border-[1px] border-white p-3 text-center font-bold text-white">
          <PlusCircleIcon className="mr-2 h-5 w-5" /> Create new
        </button>
      </header>
      <div className="mx-auto flex h-full min-h-screen w-full max-w-full flex-col items-start justify-start px-4 py-28 text-center md:max-w-5xl">
        <div className="flex w-full flex-col gap-5">
          <div className="flex w-full flex-shrink-0 flex-wrap items-center justify-start gap-3 md:gap-6">
            <button className="border-[1px] border-[#565656] bg-[#232323] px-3 py-2 text-sm font-semibold text-white md:text-base">
              All todos
            </button>
            <button className="px-3 py-2 text-sm font-semibold text-white hover:bg-[#232323] md:text-base">
              Pending
            </button>
            <button className="px-3 py-2 text-sm font-semibold text-white hover:bg-[#232323] md:text-base">
              Completed
            </button>
          </div>
          <ul className="divide-y-[1px] divide-white border-[1px] border-white p-0">
            <li className="flex w-full items-center justify-start">
              <input
                placeholder="Type to add a new todo..."
                className="w-full bg-transparent p-4 text-white placeholder:text-gray-500 md:p-6"
              />
              <button className="bg-green-500 p-4 text-center text-black hover:bg-green-400 active:bg-green-600 md:p-6">
                <PlusCircleIcon className="h-8 w-8" />
              </button>
            </li>
            {todos.map(({ task, date }, i) => {
              return (
                <li
                  key={i}
                  className="flex w-full items-center justify-start p-4 md:p-6"
                >
                  <input
                    type="checkbox"
                    id={`checkbox-${i + 1}`}
                    name={`checkbox-${i + 1}`}
                    className={`absolute h-5 w-5 cursor-pointer opacity-0 md:h-6 md:w-6 [&:checked+div+p]:text-[#898989] [&:checked+div+p]:line-through [&:checked+div]:bg-green-500 [&:checked+div_svg]:block`}
                  />
                  <div className="mr-2 flex h-5 w-5 flex-shrink-0 items-center justify-center border-[1px] border-white bg-transparent focus-within:border-white md:mr-4 md:h-6 md:w-6">
                    <svg
                      className="pointer-events-none hidden h-3 w-3 fill-current text-white"
                      version="1.1"
                      viewBox="0 0 17 12"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <g fill="none" fillRule="evenodd">
                        <g
                          transform="translate(-9 -11)"
                          fill="#000000"
                          fillRule="nonzero"
                        >
                          <path d="m25.576 11.414c0.56558 0.55188 0.56558 1.4439 0 1.9961l-9.404 9.176c-0.28213 0.27529-0.65247 0.41385-1.0228 0.41385-0.37034 0-0.74068-0.13855-1.0228-0.41385l-4.7019-4.588c-0.56584-0.55188-0.56584-1.4442 0-1.9961 0.56558-0.55214 1.4798-0.55214 2.0456 0l3.679 3.5899 8.3812-8.1779c0.56558-0.55214 1.4798-0.55214 2.0456 0z" />
                        </g>
                      </g>
                    </svg>
                  </div>
                  <p
                    id={`todo_${i + 1}`}
                    className="mr-3 truncate text-left text-sm font-semibold text-white md:text-base"
                  >
                    {task}
                  </p>
                  <div className="ml-auto flex flex-shrink-0 border-[1px] border-white px-2 py-1 text-xs text-white md:text-sm">
                    {date}
                  </div>
                  <button className="ml-2 flex flex-shrink-0 border-[1px] border-red-500 bg-red-500 p-1">
                    <TrashIcon className="h-5 w-5 text-white" />
                  </button>
                  <button className="ml-2 flex flex-shrink-0 border-[1px] border-blue-500 bg-blue-500 p-1">
                    <PencilIcon className="h-5 w-5 text-white" />
                  </button>
                </li>
              );
            })}
          </ul>
        </div>
      </div>
    </div>
  );
};

export default TodosList;


================================================
FILE: src/components/templates/youtube/change-password.jsx
================================================
"use client";
import { classNames } from "@/utils";
import React from "react";
import { MagnifyingGlassIcon, XCircleIcon } from "@heroicons/react/24/outline";
import { bottomTotalItems, navItems, logo } from "./data";

const ChangePassword = () => {
  return (
    <div className="h-screen overflow-y-auto bg-[#121212] text-white">
      <header className="sticky inset-x-0 top-0 z-50 w-full border-b border-white bg-[#121212] px-4">
        <nav className="mx-auto flex max-w-7xl items-center py-2">
          <div className="mr-4 w-12 shrink-0 sm:w-16">{logo}</div>
          <div className="relative mx-auto hidden w-full max-w-md overflow-hidden sm:block">
            <input
              className="w-full border bg-transparent py-1 pl-8 pr-3 placeholder-white outline-none sm:py-2"
              placeholder="Search"
            />
            <span className="absolute left-2.5 top-1/2 inline-block -translate-y-1/2">
              <MagnifyingGlassIcon className=" h-4 w-4" />
            </span>
          </div>
          <button className="ml-auto sm:hidden">
            <MagnifyingGlassIcon className=" h-6 w-6" />
          </button>
          <button className="group peer ml-4 flex w-6 shrink-0 flex-wrap gap-y-1.5 sm:hidden">
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-2/3 bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
          </button>
          <div className="fixed inset-y-0 right-0 flex w-full max-w-xs shrink-0 translate-x-full flex-col border-l border-white bg-[#121212] duration-200 hover:translate-x-0 peer-focus:translate-x-0 sm:static sm:ml-4 sm:w-auto sm:translate-x-0 sm:border-none">
            <div className="relative flex w-full items-center justify-between border-b border-white px-4 py-2 sm:hidden">
              <span className="inline-block w-12">{logo}</span>
              <button className="inline-block w-8">
                <XCircleIcon />
              </button>
            </div>
            <ul className="my-4 flex w-full flex-wrap gap-2 px-4 sm:hidden">
              {navItems
                .filter((item) => !item.mobileView)
                .map((item) => (
                  <li key={item.name} className="w-full">
                    <button className="flex w-full items-center justify-start gap-x-4 border border-white px-4 py-1.5 text-left hover:bg-[#ae7aff] hover:text-black focus:border-[#ae7aff] focus:bg-[#ae7aff] focus:text-black">
                      <span className="inline-block w-full max-w-[20px] group-hover:mr-4 lg:mr-4">
                        {item.icon}
                      </span>
                      <span>{item.name}</span>
                    </button>
                  </li>
                ))}
            </ul>

            <div className="mb-8 mt-auto px-4 sm:mb-0 sm:mt-0 sm:px-0">
              <button className="flex w-full gap-4 text-left sm:items-center">
                <img
                  src="https://images.pexels.com/photos/1115816/pexels-photo-1115816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                  alt="React-Patterns"
                  className="h-16 w-16 shrink-0 rounded-full sm:h-12 sm:w-12"
                />

                <div className="w-full pt-2 sm:hidden">
                  <h6 className="font-semibold">React Patterns</h6>
                  <p className="text-sm text-gray-300">@reactpatterns</p>
                </div>
              </button>
            </div>
          </div>
        </nav>
      </header>
      <div className="flex min-h-[calc(100vh-66px)] sm:min-h-[calc(100vh-82px)]">
        <aside className="group fixed inset-x-0 bottom-0 z-40 w-full shrink-0 border-t border-white bg-[#121212] px-2 py-2 sm:absolute sm:inset-y-0 sm:max-w-[70px] sm:border-r sm:border-t-0 sm:py-6 sm:hover:max-w-[250px] lg:sticky lg:max-w-[250px]">
          <ul className="flex justify-around gap-y-2 sm:sticky sm:top-[106px] sm:min-h-[calc(100vh-130px)] sm:flex-col">
            {navItems.map((item, i, arr) => (
              <li
                key={item.name}
                className={classNames(
                  item.mobileView ? "" : "hidden sm:block",
                  arr.length - i === bottomTotalItems ? "mt-auto" : "",
                )}
              >
                <button className="flex flex-col items-center justify-center border-white py-1 focus:text-[#ae7aff] sm:w-full sm:flex-row sm:border sm:p-1.5 sm:hover:bg-[#ae7aff] sm:hover:text-black sm:focus:border-[#ae7aff] sm:focus:bg-[#ae7aff] sm:focus:text-black sm:group-hover:justify-start sm:group-hover:px-4 lg:justify-start lg:px-4">
                  <span className="inline-block w-5 shrink-0 sm:group-hover:mr-4 lg:mr-4">
                    {item.icon}
                  </span>
                  <span className="block sm:hidden sm:group-hover:inline lg:inline">
                    {item.name}
                  </span>
                </button>
              </li>
            ))}
          </ul>
        </aside>
        <section className="w-full pb-[70px] sm:ml-[70px] sm:pb-0 lg:ml-0">
          <div className="relative min-h-[150px] w-full pt-[16.28%]">
            <div className="absolute inset-0 overflow-hidden">
              <img
                src="https://images.pexels.com/photos/1092424/pexels-photo-1092424.jpeg?auto=compress"
                alt="cover-photo"
              />
            </div>
          </div>
          <div className="px-4 pb-4">
            <div className="flex flex-wrap gap-4 pb-4 pt-6">
              <div className="relative -mt-12 inline-block h-28 w-28 shrink-0 overflow-hidden rounded-full border-2">
                <img
                  src="https://images.pexels.com/photos/1115816/pexels-photo-1115816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                  alt="Channel"
                  className="h-full w-full"
                />
              </div>

              <div className="mr-auto inline-block">
                <h1 className="font-bolg text-xl">React Patterns</h1>
                <p className="text-sm text-gray-400">@reactpatterns</p>
              </div>

              <div className="inline-block">
                <button className="group/btn mr-1 flex w-full items-center gap-x-2 bg-[#ae7aff] px-3 py-2 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e] sm:w-auto">
                  View channel
                </button>
              </div>
            </div>

            <ul className="no-scrollbar sticky top-[66px] z-[2] flex flex-row gap-x-2 overflow-auto border-b-2 border-gray-400 bg-[#121212] py-2 sm:top-[82px]">
              <li className="w-full">
                <button className="w-full border-b-2 border-transparent px-3 py-1.5 text-gray-400">
                  Personal Information
                </button>
              </li>
              <li className="w-full">
                <button className="w-full border-b-2 border-transparent px-3 py-1.5 text-gray-400">
                  Channel Information
                </button>
              </li>
              <li className="w-full">
                <button className="w-full border-b-2 border-[#ae7aff] bg-white px-3 py-1.5 text-[#ae7aff]">
                  Change Password
                </button>
              </li>
            </ul>

            <div className="flex flex-wrap justify-center gap-y-4 py-4">
              <div className="w-full sm:w-1/2 lg:w-1/3">
                <h5 className="font-semibold">Password</h5>
                <p className="text-gray-300">
                  Please enter your current password to change your password.
                </p>
              </div>
              <div className="w-full sm:w-1/2 lg:w-2/3">
                <div className="rounded-lg border">
                  <div className="flex flex-wrap gap-y-4 p-4">
                    <div className="w-full">
                      <label className="mb-1 inline-block" htmlFor="old-pwd">
                        Current password
                      </label>
                      <input
                        type="password"
                        className="w-full rounded-lg border bg-transparent px-2 py-1.5"
                        id="old-pwd"
                        placeholder="Current password"
                      />
                    </div>
                    <div className="w-full">
                      <label className="mb-1 inline-block" htmlFor="new-pwd">
                        New password
                      </label>
                      <input
                        type="password"
                        className="w-full rounded-lg border bg-transparent px-2 py-1.5"
                        id="new-pwd"
                        placeholder="New password"
                      />
                      <p className="mt-0.5 text-sm text-gray-300">
                        Your new password must be more than 8 characters.
                      </p>
                    </div>
                    <div className="w-full">
                      <label className="mb-1 inline-block" htmlFor="cnfrm-pwd">
                        Confirm password
                      </label>
                      <input
                        type="password"
                        className="w-full rounded-lg border bg-transparent px-2 py-1.5"
                        id="cnfrm-pwd"
                        placeholder="Confirm password"
                      />
                    </div>
                  </div>
                  <hr className="border border-gray-300" />
                  <div className="flex items-center justify-end gap-4 p-4">
                    <button className="inline-block rounded-lg border px-3 py-1.5 hover:bg-white/10">
                      Cancel
                    </button>
                    <button className="inline-block bg-[#ae7aff] px-3 py-1.5 text-black">
                      Update Password
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  );
};

export default ChangePassword;


================================================
FILE: src/components/templates/youtube/channel-empty-playlist.jsx
================================================
"use client";
import { classNames } from "@/utils";
import React from "react";
import {
  MagnifyingGlassIcon,
  UserPlusIcon,
  XCircleIcon,
} from "@heroicons/react/24/outline";
import { bottomTotalItems, navItems, logo, icons } from "./data";

const ChannelEmptyPlaylist = () => {
  return (
    <div className="h-screen overflow-y-auto bg-[#121212] text-white">
      <header className="sticky inset-x-0 top-0 z-50 w-full border-b border-white bg-[#121212] px-4">
        <nav className="mx-auto flex max-w-7xl items-center py-2">
          <div className="mr-4 w-12 shrink-0 sm:w-16">{logo}</div>
          <div className="relative mx-auto hidden w-full max-w-md overflow-hidden sm:block">
            <input
              className="w-full border bg-transparent py-1 pl-8 pr-3 placeholder-white outline-none sm:py-2"
              placeholder="Search"
            />
            <span className="absolute left-2.5 top-1/2 inline-block -translate-y-1/2">
              <MagnifyingGlassIcon className=" h-4 w-4" />
            </span>
          </div>
          <button className="ml-auto sm:hidden">
            <MagnifyingGlassIcon className=" h-6 w-6" />
          </button>
          <button className="group peer ml-4 flex w-6 shrink-0 flex-wrap gap-y-1.5 sm:hidden">
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-2/3 bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
          </button>
          <div className="fixed inset-y-0 right-0 flex w-full max-w-xs shrink-0 translate-x-full flex-col border-l border-white bg-[#121212] duration-200 hover:translate-x-0 peer-focus:translate-x-0 sm:static sm:ml-4 sm:w-auto sm:translate-x-0 sm:border-none">
            <div className="relative flex w-full items-center justify-between border-b border-white px-4 py-2 sm:hidden">
              <span className="inline-block w-12">{logo}</span>
              <button className="inline-block w-8">
                <XCircleIcon />
              </button>
            </div>
            <ul className="my-4 flex w-full flex-wrap gap-2 px-4 sm:hidden">
              {navItems
                .filter((item) => !item.mobileView)
                .map((item) => (
                  <li key={item.name} className="w-full">
                    <button className="flex w-full items-center justify-start gap-x-4 border border-white px-4 py-1.5 text-left hover:bg-[#ae7aff] hover:text-black focus:border-[#ae7aff] focus:bg-[#ae7aff] focus:text-black">
                      <span className="inline-block w-full max-w-[20px] group-hover:mr-4 lg:mr-4">
                        {item.icon}
                      </span>
                      <span>{item.name}</span>
                    </button>
                  </li>
                ))}
            </ul>

            <div className="mb-8 mt-auto flex w-full flex-wrap gap-4 px-4 sm:mb-0 sm:mt-0 sm:items-center sm:px-0">
              <button className="w-full bg-[#383737] px-3 py-2 hover:bg-[#4f4e4e] sm:w-auto sm:bg-transparent">
                Log in
              </button>
              <button className="mr-1 w-full bg-[#ae7aff] px-3 py-2 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e] sm:w-auto">
                Sign up
              </button>
            </div>
          </div>
        </nav>
      </header>
      <div className="flex min-h-[calc(100vh-66px)] sm:min-h-[calc(100vh-82px)]">
        <aside className="group fixed inset-x-0 bottom-0 z-40 w-full shrink-0 border-t border-white bg-[#121212] px-2 py-2 sm:absolute sm:inset-y-0 sm:max-w-[70px] sm:border-r sm:border-t-0 sm:py-6 sm:hover:max-w-[250px] lg:sticky lg:max-w-[250px]">
          <ul className="flex justify-around gap-y-2 sm:sticky sm:top-[106px] sm:min-h-[calc(100vh-130px)] sm:flex-col">
            {navItems.map((item, i, arr) => (
              <li
                key={item.name}
                className={classNames(
                  item.mobileView ? "" : "hidden sm:block",
                  arr.length - i === bottomTotalItems ? "mt-auto" : "",
                )}
              >
                <button className="flex flex-col items-center justify-center border-white py-1 focus:text-[#ae7aff] sm:w-full sm:flex-row sm:border sm:p-1.5 sm:hover:bg-[#ae7aff] sm:hover:text-black sm:focus:border-[#ae7aff] sm:focus:bg-[#ae7aff] sm:focus:text-black sm:group-hover:justify-start sm:group-hover:px-4 lg:justify-start lg:px-4">
                  <span className="inline-block w-5 shrink-0 sm:group-hover:mr-4 lg:mr-4">
                    {item.icon}
                  </span>
                  <span className="block sm:hidden sm:group-hover:inline lg:inline">
                    {item.name}
                  </span>
                </button>
              </li>
            ))}
          </ul>
        </aside>
        <section className="w-full pb-[70px] sm:ml-[70px] sm:pb-0 lg:ml-0">
          <div className="relative min-h-[150px] w-full pt-[16.28%]">
            <div className="absolute inset-0 overflow-hidden">
              <img
                src="https://images.pexels.com/photos/1092424/pexels-photo-1092424.jpeg?auto=compress"
                alt="cover-photo"
              />
            </div>
          </div>
          <div className="px-4 pb-4">
            <div className="flex flex-wrap gap-4 pb-4 pt-6">
              <span className="relative -mt-12 inline-block h-28 w-28 shrink-0 overflow-hidden rounded-full border-2">
                <img
                  src="https://images.pexels.com/photos/1115816/pexels-photo-1115816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                  alt="Channel"
                  className="h-full w-full"
                />
              </span>

              <div className="mr-auto inline-block">
                <h1 className="font-bolg text-xl">React Patterns</h1>
                <p className="text-sm text-gray-400">@reactpatterns</p>
                <p className="text-sm text-gray-400">
                  600k Subscribers&nbsp;&middot;&nbsp;220 Subscribed
                </p>
              </div>

              <div className="inline-block">
                <div className="inline-flex min-w-[145px] justify-end">
                  <button className="group/btn mr-1 flex w-full items-center gap-x-2 bg-[#ae7aff] px-3 py-2 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e] sm:w-auto">
                    <span className="inline-block w-5">
                      <UserPlusIcon strokeWidth={2} />
                    </span>
                    <span className="group-focus/btn:hidden">Subscribe</span>
                    <span className="hidden group-focus/btn:block">
                      Subscribed
                    </span>
                  </button>
                </div>
              </div>
            </div>

            <ul className="no-scrollbar sticky top-[66px] z-[2] flex flex-row gap-x-2 overflow-auto border-b-2 border-gray-400 bg-[#121212] py-2 sm:top-[82px]">
              <li className="w-full">
                <button className="w-full border-b-2 border-transparent px-3 py-1.5 text-gray-400">
                  Videos
                </button>
              </li>
              <li className="w-full">
                <button className="w-full border-b-2 border-[#ae7aff] bg-white px-3 py-1.5 text-[#ae7aff]">
                  Playlist
                </button>
              </li>
              <li className="w-full">
                <button className="w-full border-b-2 border-transparent px-3 py-1.5 text-gray-400">
                  Tweets
                </button>
              </li>
              <li className="w-full">
                <button className="w-full border-b-2 border-transparent px-3 py-1.5 text-gray-400">
                  Subscribed
                </button>
              </li>
            </ul>
            <div className="flex justify-center p-4">
              <div className="w-full max-w-sm text-center">
                <p className="mb-3 w-full">
                  <span className="inline-flex rounded-full bg-[#E4D3FF] p-2 text-[#AE7AFF]">
                    <span className="inline-block w-6">
                      {icons.collections}
                    </span>
                  </span>
                </p>
                <h5 className="mb-2 font-semibold">No playlist created</h5>
                <p>There are no playlist created on this channel.</p>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  );
};

export default ChannelEmptyPlaylist;


================================================
FILE: src/components/templates/youtube/channel-empty-subscribed.jsx
================================================
"use client";
import { classNames } from "@/utils";
import React from "react";
import {
  MagnifyingGlassIcon,
  UserPlusIcon,
  UsersIcon,
  XCircleIcon,
} from "@heroicons/react/24/outline";
import { bottomTotalItems, navItems, logo } from "./data";

const ChannelEmptySubscribed = () => {
  return (
    <div className="h-screen overflow-y-auto bg-[#121212] text-white">
      <header className="sticky inset-x-0 top-0 z-50 w-full border-b border-white bg-[#121212] px-4">
        <nav className="mx-auto flex max-w-7xl items-center py-2">
          <div className="mr-4 w-12 shrink-0 sm:w-16">{logo}</div>
          <div className="relative mx-auto hidden w-full max-w-md overflow-hidden sm:block">
            <input
              className="w-full border bg-transparent py-1 pl-8 pr-3 placeholder-white outline-none sm:py-2"
              placeholder="Search"
            />
            <span className="absolute left-2.5 top-1/2 inline-block -translate-y-1/2">
              <MagnifyingGlassIcon className=" h-4 w-4" />
            </span>
          </div>
          <button className="ml-auto sm:hidden">
            <MagnifyingGlassIcon className=" h-6 w-6" />
          </button>
          <button className="group peer ml-4 flex w-6 shrink-0 flex-wrap gap-y-1.5 sm:hidden">
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-2/3 bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
          </button>
          <div className="fixed inset-y-0 right-0 flex w-full max-w-xs shrink-0 translate-x-full flex-col border-l border-white bg-[#121212] duration-200 hover:translate-x-0 peer-focus:translate-x-0 sm:static sm:ml-4 sm:w-auto sm:translate-x-0 sm:border-none">
            <div className="relative flex w-full items-center justify-between border-b border-white px-4 py-2 sm:hidden">
              <span className="inline-block w-12">{logo}</span>
              <button className="inline-block w-8">
                <XCircleIcon />
              </button>
            </div>
            <ul className="my-4 flex w-full flex-wrap gap-2 px-4 sm:hidden">
              {navItems
                .filter((item) => !item.mobileView)
                .map((item) => (
                  <li key={item.name} className="w-full">
                    <button className="flex w-full items-center justify-start gap-x-4 border border-white px-4 py-1.5 text-left hover:bg-[#ae7aff] hover:text-black focus:border-[#ae7aff] focus:bg-[#ae7aff] focus:text-black">
                      <span className="inline-block w-full max-w-[20px] group-hover:mr-4 lg:mr-4">
                        {item.icon}
                      </span>
                      <span>{item.name}</span>
                    </button>
                  </li>
                ))}
            </ul>

            <div className="mb-8 mt-auto flex w-full flex-wrap gap-4 px-4 sm:mb-0 sm:mt-0 sm:items-center sm:px-0">
              <button className="w-full bg-[#383737] px-3 py-2 hover:bg-[#4f4e4e] sm:w-auto sm:bg-transparent">
                Log in
              </button>
              <button className="mr-1 w-full bg-[#ae7aff] px-3 py-2 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e] sm:w-auto">
                Sign up
              </button>
            </div>
          </div>
        </nav>
      </header>
      <div className="flex min-h-[calc(100vh-66px)] sm:min-h-[calc(100vh-82px)]">
        <aside className="group fixed inset-x-0 bottom-0 z-40 w-full shrink-0 border-t border-white bg-[#121212] px-2 py-2 sm:absolute sm:inset-y-0 sm:max-w-[70px] sm:border-r sm:border-t-0 sm:py-6 sm:hover:max-w-[250px] lg:sticky lg:max-w-[250px]">
          <ul className="flex justify-around gap-y-2 sm:sticky sm:top-[106px] sm:min-h-[calc(100vh-130px)] sm:flex-col">
            {navItems.map((item, i, arr) => (
              <li
                key={item.name}
                className={classNames(
                  item.mobileView ? "" : "hidden sm:block",
                  arr.length - i === bottomTotalItems ? "mt-auto" : "",
                )}
              >
                <button className="flex flex-col items-center justify-center border-white py-1 focus:text-[#ae7aff] sm:w-full sm:flex-row sm:border sm:p-1.5 sm:hover:bg-[#ae7aff] sm:hover:text-black sm:focus:border-[#ae7aff] sm:focus:bg-[#ae7aff] sm:focus:text-black sm:group-hover:justify-start sm:group-hover:px-4 lg:justify-start lg:px-4">
                  <span className="inline-block w-5 shrink-0 sm:group-hover:mr-4 lg:mr-4">
                    {item.icon}
                  </span>
                  <span className="block sm:hidden sm:group-hover:inline lg:inline">
                    {item.name}
                  </span>
                </button>
              </li>
            ))}
          </ul>
        </aside>
        <section className="w-full pb-[70px] sm:ml-[70px] sm:pb-0 lg:ml-0">
          <div className="relative min-h-[150px] w-full pt-[16.28%]">
            <div className="absolute inset-0 overflow-hidden">
              <img
                src="https://images.pexels.com/photos/1092424/pexels-photo-1092424.jpeg?auto=compress"
                alt="cover-photo"
              />
            </div>
          </div>
          <div className="px-4 pb-4">
            <div className="flex flex-wrap gap-4 pb-4 pt-6">
              <span className="relative -mt-12 inline-block h-28 w-28 shrink-0 overflow-hidden rounded-full border-2">
                <img
                  src="https://images.pexels.com/photos/1115816/pexels-photo-1115816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                  alt="Channel"
                  className="h-full w-full"
                />
              </span>

              <div className="mr-auto inline-block">
                <h1 className="font-bolg text-xl">React Patterns</h1>
                <p className="text-sm text-gray-400">@reactpatterns</p>
                <p className="text-sm text-gray-400">
                  600k Subscribers&nbsp;&middot;&nbsp;220 Subscribed
                </p>
              </div>

              <div className="inline-block">
                <div className="inline-flex min-w-[145px] justify-end">
                  <button className="group/btn mr-1 flex w-full items-center gap-x-2 bg-[#ae7aff] px-3 py-2 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e] sm:w-auto">
                    <span className="inline-block w-5">
                      <UserPlusIcon strokeWidth={2} />
                    </span>
                    <span className="group-focus/btn:hidden">Subscribe</span>
                    <span className="hidden group-focus/btn:block">
                      Subscribed
                    </span>
                  </button>
                </div>
              </div>
            </div>

            <ul className="no-scrollbar sticky top-[66px] z-[2] flex flex-row gap-x-2 overflow-auto border-b-2 border-gray-400 bg-[#121212] py-2 sm:top-[82px]">
              <li className="w-full">
                <button className="w-full border-b-2 border-transparent px-3 py-1.5 text-gray-400">
                  Videos
                </button>
              </li>
              <li className="w-full">
                <button className="w-full border-b-2 border-transparent px-3 py-1.5 text-gray-400">
                  Playlist
                </button>
              </li>
              <li className="w-full">
                <button className="w-full border-b-2 border-transparent px-3 py-1.5 text-gray-400">
                  Tweets
                </button>
              </li>
              <li className="w-full">
                <button className="w-full border-b-2 border-[#ae7aff] bg-white px-3 py-1.5 text-[#ae7aff]">
                  Subscribed
                </button>
              </li>
            </ul>
            <div className="flex justify-center p-4">
              <div className="w-full max-w-sm text-center">
                <p className="mb-3 w-full">
                  <span className="inline-flex rounded-full bg-[#E4D3FF] p-2 text-[#AE7AFF]">
                    <span className="inline-block w-6">
                      <UsersIcon className="w-6" />
                    </span>
                  </span>
                </p>
                <h5 className="mb-2 font-semibold">No people subscribers</h5>
                <p>
                  This channel has yet to <strong>subscribe</strong> a new
                  channel.
                </p>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  );
};

export default ChannelEmptySubscribed;


================================================
FILE: src/components/templates/youtube/channel-empty-tweet.jsx
================================================
"use client";
import { classNames } from "@/utils";
import React from "react";
import {
  MagnifyingGlassIcon,
  UserPlusIcon,
  UsersIcon,
  XCircleIcon,
} from "@heroicons/react/24/outline";
import { bottomTotalItems, navItems, logo } from "./data";

const ChannelEmptyTweet = () => {
  return (
    <div className="h-screen overflow-y-auto bg-[#121212] text-white">
      <header className="sticky inset-x-0 top-0 z-50 w-full border-b border-white bg-[#121212] px-4">
        <nav className="mx-auto flex max-w-7xl items-center py-2">
          <div className="mr-4 w-12 shrink-0 sm:w-16">{logo}</div>
          <div className="relative mx-auto hidden w-full max-w-md overflow-hidden sm:block">
            <input
              className="w-full border bg-transparent py-1 pl-8 pr-3 placeholder-white outline-none sm:py-2"
              placeholder="Search"
            />
            <span className="absolute left-2.5 top-1/2 inline-block -translate-y-1/2">
              <MagnifyingGlassIcon className=" h-4 w-4" />
            </span>
          </div>
          <button className="ml-auto sm:hidden">
            <MagnifyingGlassIcon className=" h-6 w-6" />
          </button>
          <button className="group peer ml-4 flex w-6 shrink-0 flex-wrap gap-y-1.5 sm:hidden">
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-2/3 bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
          </button>
          <div className="fixed inset-y-0 right-0 flex w-full max-w-xs shrink-0 translate-x-full flex-col border-l border-white bg-[#121212] duration-200 hover:translate-x-0 peer-focus:translate-x-0 sm:static sm:ml-4 sm:w-auto sm:translate-x-0 sm:border-none">
            <div className="relative flex w-full items-center justify-between border-b border-white px-4 py-2 sm:hidden">
              <span className="inline-block w-12">{logo}</span>
              <button className="inline-block w-8">
                <XCircleIcon />
              </button>
            </div>
            <ul className="my-4 flex w-full flex-wrap gap-2 px-4 sm:hidden">
              {navItems
                .filter((item) => !item.mobileView)
                .map((item) => (
                  <li key={item.name} className="w-full">
                    <button className="flex w-full items-center justify-start gap-x-4 border border-white px-4 py-1.5 text-left hover:bg-[#ae7aff] hover:text-black focus:border-[#ae7aff] focus:bg-[#ae7aff] focus:text-black">
                      <span className="inline-block w-full max-w-[20px] group-hover:mr-4 lg:mr-4">
                        {item.icon}
                      </span>
                      <span>{item.name}</span>
                    </button>
                  </li>
                ))}
            </ul>

            <div className="mb-8 mt-auto flex w-full flex-wrap gap-4 px-4 sm:mb-0 sm:mt-0 sm:items-center sm:px-0">
              <button className="w-full bg-[#383737] px-3 py-2 hover:bg-[#4f4e4e] sm:w-auto sm:bg-transparent">
                Log in
              </button>
              <button className="mr-1 w-full bg-[#ae7aff] px-3 py-2 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e] sm:w-auto">
                Sign up
              </button>
            </div>
          </div>
        </nav>
      </header>
      <div className="flex min-h-[calc(100vh-66px)] sm:min-h-[calc(100vh-82px)]">
        <aside className="group fixed inset-x-0 bottom-0 z-40 w-full shrink-0 border-t border-white bg-[#121212] px-2 py-2 sm:absolute sm:inset-y-0 sm:max-w-[70px] sm:border-r sm:border-t-0 sm:py-6 sm:hover:max-w-[250px] lg:sticky lg:max-w-[250px]">
          <ul className="flex justify-around gap-y-2 sm:sticky sm:top-[106px] sm:min-h-[calc(100vh-130px)] sm:flex-col">
            {navItems.map((item, i, arr) => (
              <li
                key={item.name}
                className={classNames(
                  item.mobileView ? "" : "hidden sm:block",
                  arr.length - i === bottomTotalItems ? "mt-auto" : "",
                )}
              >
                <button className="flex flex-col items-center justify-center border-white py-1 focus:text-[#ae7aff] sm:w-full sm:flex-row sm:border sm:p-1.5 sm:hover:bg-[#ae7aff] sm:hover:text-black sm:focus:border-[#ae7aff] sm:focus:bg-[#ae7aff] sm:focus:text-black sm:group-hover:justify-start sm:group-hover:px-4 lg:justify-start lg:px-4">
                  <span className="inline-block w-5 shrink-0 sm:group-hover:mr-4 lg:mr-4">
                    {item.icon}
                  </span>
                  <span className="block sm:hidden sm:group-hover:inline lg:inline">
                    {item.name}
                  </span>
                </button>
              </li>
            ))}
          </ul>
        </aside>
        <section className="w-full pb-[70px] sm:ml-[70px] sm:pb-0 lg:ml-0">
          <div className="relative min-h-[150px] w-full pt-[16.28%]">
            <div className="absolute inset-0 overflow-hidden">
              <img
                src="https://images.pexels.com/photos/1092424/pexels-photo-1092424.jpeg?auto=compress"
                alt="cover-photo"
              />
            </div>
          </div>
          <div className="px-4 pb-4">
            <div className="flex flex-wrap gap-4 pb-4 pt-6">
              <span className="relative -mt-12 inline-block h-28 w-28 shrink-0 overflow-hidden rounded-full border-2">
                <img
                  src="https://images.pexels.com/photos/1115816/pexels-photo-1115816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                  alt="Channel"
                  className="h-full w-full"
                />
              </span>

              <div className="mr-auto inline-block">
                <h1 className="font-bolg text-xl">React Patterns</h1>
                <p className="text-sm text-gray-400">@reactpatterns</p>
                <p className="text-sm text-gray-400">
                  600k Subscribers&nbsp;&middot;&nbsp;220 Subscribed
                </p>
              </div>

              <div className="inline-block">
                <div className="inline-flex min-w-[145px] justify-end">
                  <button className="group/btn mr-1 flex w-full items-center gap-x-2 bg-[#ae7aff] px-3 py-2 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e] sm:w-auto">
                    <span className="inline-block w-5">
                      <UserPlusIcon strokeWidth={2} />
                    </span>
                    <span className="group-focus/btn:hidden">Subscribe</span>
                    <span className="hidden group-focus/btn:block">
                      Subscribed
                    </span>
                  </button>
                </div>
              </div>
            </div>

            <ul className="no-scrollbar sticky top-[66px] z-[2] flex flex-row gap-x-2 overflow-auto border-b-2 border-gray-400 bg-[#121212] py-2 sm:top-[82px]">
              <li className="w-full">
                <button className="w-full border-b-2 border-transparent px-3 py-1.5 text-gray-400">
                  Videos
                </button>
              </li>
              <li className="w-full">
                <button className="w-full border-b-2 border-transparent px-3 py-1.5 text-gray-400">
                  Playlist
                </button>
              </li>
              <li className="w-full">
                <button className="w-full border-b-2 border-[#ae7aff] bg-white px-3 py-1.5 text-[#ae7aff]">
                  Tweets
                </button>
              </li>
              <li className="w-full">
                <button className="w-full border-b-2 border-transparent px-3 py-1.5 text-gray-400">
                  Subscribed
                </button>
              </li>
            </ul>
            <div className="flex justify-center p-4">
              <div className="w-full max-w-sm text-center">
                <p className="mb-3 w-full">
                  <span className="inline-flex rounded-full bg-[#E4D3FF] p-2 text-[#AE7AFF]">
                    <span className="inline-block w-6">
                      <UsersIcon className="w-6" />
                    </span>
                  </span>
                </p>
                <h5 className="mb-2 font-semibold">No Tweets</h5>
                <p>
                  This channel has yet to make a <strong>Tweet</strong>.
                </p>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  );
};

export default ChannelEmptyTweet;


================================================
FILE: src/components/templates/youtube/channel-empty-video.jsx
================================================
"use client";
import { classNames } from "@/utils";
import React from "react";
import {
  MagnifyingGlassIcon,
  PlayIcon,
  UserPlusIcon,
  XCircleIcon,
} from "@heroicons/react/24/outline";
import { bottomTotalItems, navItems, logo } from "./data";

const ChannelEmptyVideo = () => {
  return (
    <div className="h-screen overflow-y-auto bg-[#121212] text-white">
      <header className="sticky inset-x-0 top-0 z-50 w-full border-b border-white bg-[#121212] px-4">
        <nav className="mx-auto flex max-w-7xl items-center py-2">
          <div className="mr-4 w-12 shrink-0 sm:w-16">{logo}</div>
          <div className="relative mx-auto hidden w-full max-w-md overflow-hidden sm:block">
            <input
              className="w-full border bg-transparent py-1 pl-8 pr-3 placeholder-white outline-none sm:py-2"
              placeholder="Search"
            />
            <span className="absolute left-2.5 top-1/2 inline-block -translate-y-1/2">
              <MagnifyingGlassIcon className=" h-4 w-4" />
            </span>
          </div>
          <button className="ml-auto sm:hidden">
            <MagnifyingGlassIcon className=" h-6 w-6" />
          </button>
          <button className="group peer ml-4 flex w-6 shrink-0 flex-wrap gap-y-1.5 sm:hidden">
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-2/3 bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
          </button>
          <div className="fixed inset-y-0 right-0 flex w-full max-w-xs shrink-0 translate-x-full flex-col border-l border-white bg-[#121212] duration-200 hover:translate-x-0 peer-focus:translate-x-0 sm:static sm:ml-4 sm:w-auto sm:translate-x-0 sm:border-none">
            <div className="relative flex w-full items-center justify-between border-b border-white px-4 py-2 sm:hidden">
              <span className="inline-block w-12">{logo}</span>
              <button className="inline-block w-8">
                <XCircleIcon />
              </button>
            </div>
            <ul className="my-4 flex w-full flex-wrap gap-2 px-4 sm:hidden">
              {navItems
                .filter((item) => !item.mobileView)
                .map((item) => (
                  <li key={item.name} className="w-full">
                    <button className="flex w-full items-center justify-start gap-x-4 border border-white px-4 py-1.5 text-left hover:bg-[#ae7aff] hover:text-black focus:border-[#ae7aff] focus:bg-[#ae7aff] focus:text-black">
                      <span className="inline-block w-full max-w-[20px] group-hover:mr-4 lg:mr-4">
                        {item.icon}
                      </span>
                      <span>{item.name}</span>
                    </button>
                  </li>
                ))}
            </ul>

            <div className="mb-8 mt-auto flex w-full flex-wrap gap-4 px-4 sm:mb-0 sm:mt-0 sm:items-center sm:px-0">
              <button className="w-full bg-[#383737] px-3 py-2 hover:bg-[#4f4e4e] sm:w-auto sm:bg-transparent">
                Log in
              </button>
              <button className="mr-1 w-full bg-[#ae7aff] px-3 py-2 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e] sm:w-auto">
                Sign up
              </button>
            </div>
          </div>
        </nav>
      </header>
      <div className="flex min-h-[calc(100vh-66px)] sm:min-h-[calc(100vh-82px)]">
        <aside className="group fixed inset-x-0 bottom-0 z-40 w-full shrink-0 border-t border-white bg-[#121212] px-2 py-2 sm:absolute sm:inset-y-0 sm:max-w-[70px] sm:border-r sm:border-t-0 sm:py-6 sm:hover:max-w-[250px] lg:sticky lg:max-w-[250px]">
          <ul className="flex justify-around gap-y-2 sm:sticky sm:top-[106px] sm:min-h-[calc(100vh-130px)] sm:flex-col">
            {navItems.map((item, i, arr) => (
              <li
                key={item.name}
                className={classNames(
                  item.mobileView ? "" : "hidden sm:block",
                  arr.length - i === bottomTotalItems ? "mt-auto" : "",
                )}
              >
                <button className="flex flex-col items-center justify-center border-white py-1 focus:text-[#ae7aff] sm:w-full sm:flex-row sm:border sm:p-1.5 sm:hover:bg-[#ae7aff] sm:hover:text-black sm:focus:border-[#ae7aff] sm:focus:bg-[#ae7aff] sm:focus:text-black sm:group-hover:justify-start sm:group-hover:px-4 lg:justify-start lg:px-4">
                  <span className="inline-block w-5 shrink-0 sm:group-hover:mr-4 lg:mr-4">
                    {item.icon}
                  </span>
                  <span className="block sm:hidden sm:group-hover:inline lg:inline">
                    {item.name}
                  </span>
                </button>
              </li>
            ))}
          </ul>
        </aside>
        <section className="w-full pb-[70px] sm:ml-[70px] sm:pb-0 lg:ml-0">
          <div className="relative min-h-[150px] w-full pt-[16.28%]">
            <div className="absolute inset-0 overflow-hidden">
              <img
                src="https://images.pexels.com/photos/1092424/pexels-photo-1092424.jpeg?auto=compress"
                alt="cover-photo"
              />
            </div>
          </div>
          <div className="px-4 pb-4">
            <div className="flex flex-wrap gap-4 pb-4 pt-6">
              <span className="relative -mt-12 inline-block h-28 w-28 shrink-0 overflow-hidden rounded-full border-2">
                <img
                  src="https://images.pexels.com/photos/1115816/pexels-photo-1115816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                  alt="Channel"
                  className="h-full w-full"
                />
              </span>

              <div className="mr-auto inline-block">
                <h1 className="font-bolg text-xl">React Patterns</h1>
                <p className="text-sm text-gray-400">@reactpatterns</p>
                <p className="text-sm text-gray-400">
                  600k Subscribers&nbsp;&middot;&nbsp;220 Subscribed
                </p>
              </div>

              <div className="inline-block">
                <div className="inline-flex min-w-[145px] justify-end">
                  <button className="group/btn mr-1 flex w-full items-center gap-x-2 bg-[#ae7aff] px-3 py-2 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e] sm:w-auto">
                    <span className="inline-block w-5">
                      <UserPlusIcon strokeWidth={2} />
                    </span>
                    <span className="group-focus/btn:hidden">Subscribe</span>
                    <span className="hidden group-focus/btn:block">
                      Subscribed
                    </span>
                  </button>
                </div>
              </div>
            </div>

            <ul className="no-scrollbar sticky top-[66px] z-[2] flex flex-row gap-x-2 overflow-auto border-b-2 border-gray-400 bg-[#121212] py-2 sm:top-[82px]">
              <li className="w-full">
                <button className="w-full border-b-2 border-[#ae7aff] bg-white px-3 py-1.5 text-[#ae7aff]">
                  Videos
                </button>
              </li>
              <li className="w-full">
                <button className="w-full border-b-2 border-transparent px-3 py-1.5 text-gray-400">
                  Playlist
                </button>
              </li>
              <li className="w-full">
                <button className="w-full border-b-2 border-transparent px-3 py-1.5 text-gray-400">
                  Tweets
                </button>
              </li>
              <li className="w-full">
                <button className="w-full border-b-2 border-transparent px-3 py-1.5 text-gray-400">
                  Subscribed
                </button>
              </li>
            </ul>
            <div className="flex justify-center p-4">
              <div className="w-full max-w-sm text-center">
                <p className="mb-3 w-full">
                  <span className="inline-flex rounded-full bg-[#E4D3FF] p-2 text-[#AE7AFF]">
                    <PlayIcon className="w-6" />
                  </span>
                </p>
                <h5 className="mb-2 font-semibold">No videos uploaded</h5>
                <p>
                  This page has yet to upload a video. Search another page in
                  order to find more videos.
                </p>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  );
};

export default ChannelEmptyVideo;


================================================
FILE: src/components/templates/youtube/channel-playlist-videos.jsx
================================================
"use client";
import { classNames } from "@/utils";
import { MagnifyingGlassIcon, XCircleIcon } from "@heroicons/react/24/outline";
import React from "react";
import { bottomTotalItems, navItems, logo, playlistList } from "./data";

const ChannelPlaylistVideos = () => {
  const playlist = playlistList[0];
  playlist.videos = playlist.videos.filter((video) => video.isPublished);

  return (
    <div className="h-screen overflow-y-auto bg-[#121212] text-white">
      <header className="sticky inset-x-0 top-0 z-50 w-full border-b border-white bg-[#121212] px-4">
        <nav className="mx-auto flex max-w-7xl items-center py-2">
          <div className="mr-4 w-12 shrink-0 sm:w-16">{logo}</div>
          <div className="relative mx-auto hidden w-full max-w-md overflow-hidden sm:block">
            <input
              className="w-full border bg-transparent py-1 pl-8 pr-3 placeholder-white outline-none sm:py-2"
              placeholder="Search"
            />
            <span className="absolute left-2.5 top-1/2 inline-block -translate-y-1/2">
              <MagnifyingGlassIcon className=" h-4 w-4" />
            </span>
          </div>
          <button className="ml-auto sm:hidden">
            <MagnifyingGlassIcon className=" h-6 w-6" />
          </button>
          <button className="group peer ml-4 flex w-6 shrink-0 flex-wrap gap-y-1.5 sm:hidden">
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-2/3 bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
          </button>
          <div className="fixed inset-y-0 right-0 flex w-full max-w-xs shrink-0 translate-x-full flex-col border-l border-white bg-[#121212] duration-200 hover:translate-x-0 peer-focus:translate-x-0 sm:static sm:ml-4 sm:w-auto sm:translate-x-0 sm:border-none">
            <div className="relative flex w-full items-center justify-between border-b border-white px-4 py-2 sm:hidden">
              <span className="inline-block w-12">{logo}</span>
              <button className="inline-block w-8">
                <XCircleIcon />
              </button>
            </div>
            <ul className="my-4 flex w-full flex-wrap gap-2 px-4 sm:hidden">
              {navItems
                .filter((item) => !item.mobileView)
                .map((item) => (
                  <li key={item.name} className="w-full">
                    <button className="flex w-full items-center justify-start gap-x-4 border border-white px-4 py-1.5 text-left hover:bg-[#ae7aff] hover:text-black focus:border-[#ae7aff] focus:bg-[#ae7aff] focus:text-black">
                      <span className="inline-block w-full max-w-[20px] group-hover:mr-4 lg:mr-4">
                        {item.icon}
                      </span>
                      <span>{item.name}</span>
                    </button>
                  </li>
                ))}
            </ul>

            <div className="mb-8 mt-auto flex w-full flex-wrap gap-4 px-4 sm:mb-0 sm:mt-0 sm:items-center sm:px-0">
              <button className="w-full bg-[#383737] px-3 py-2 hover:bg-[#4f4e4e] sm:w-auto sm:bg-transparent">
                Log in
              </button>
              <button className="mr-1 w-full bg-[#ae7aff] px-3 py-2 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e] sm:w-auto">
                Sign up
              </button>
            </div>
          </div>
        </nav>
      </header>
      <div className="flex min-h-[calc(100vh-66px)] sm:min-h-[calc(100vh-82px)]">
        <aside className="group fixed inset-x-0 bottom-0 z-40 w-full shrink-0 border-t border-white bg-[#121212] px-2 py-2 sm:absolute sm:inset-y-0 sm:max-w-[70px] sm:border-r sm:border-t-0 sm:py-6 sm:hover:max-w-[250px] lg:sticky lg:max-w-[250px]">
          <ul className="flex justify-around gap-y-2 sm:sticky sm:top-[106px] sm:min-h-[calc(100vh-130px)] sm:flex-col">
            {navItems.map((item, i, arr) => (
              <li
                key={item.name}
                className={classNames(
                  item.mobileView ? "" : "hidden sm:block",
                  arr.length - i === bottomTotalItems ? "mt-auto" : "",
                )}
              >
                <button className="flex flex-col items-center justify-center border-white py-1 focus:text-[#ae7aff] sm:w-full sm:flex-row sm:border sm:p-1.5 sm:hover:bg-[#ae7aff] sm:hover:text-black sm:focus:border-[#ae7aff] sm:focus:bg-[#ae7aff] sm:focus:text-black sm:group-hover:justify-start sm:group-hover:px-4 lg:justify-start lg:px-4">
                  <span className="inline-block w-5 shrink-0 sm:group-hover:mr-4 lg:mr-4">
                    {item.icon}
                  </span>
                  <span className="block sm:hidden sm:group-hover:inline lg:inline">
                    {item.name}
                  </span>
                </button>
              </li>
            ))}
          </ul>
        </aside>
        <section className="w-full pb-[70px] sm:ml-[70px] sm:pb-0 lg:ml-0">
          <div className="flex flex-wrap gap-x-4 gap-y-10 p-4 xl:flex-nowrap">
            <div className="w-full shrink-0 sm:max-w-md xl:max-w-sm">
              <div className="relative mb-2 w-full pt-[56%]">
                <div className="absolute inset-0">
                  <img
                    src={playlist.videos[0].thumbnail}
                    alt={playlist.name}
                    className="h-full w-full"
                  />
                  <div className="absolute inset-x-0 bottom-0">
                    <div className="relative border-t bg-white/30 p-4 text-white backdrop-blur-sm before:absolute before:inset-0 before:bg-black/40">
                      <div className="relative z-[1]">
                        <p className="flex justify-between">
                          <span className="inline-block">Playlist</span>
                          <span className="inline-block">
                            {playlist.videos.length}
                            &nbsp;videos
                          </span>
                        </p>
                        <p className="text-sm text-gray-200">
                          {playlist.views} Views&nbsp;&middot;&nbsp;
                          {playlist.createdAt}
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <h6 className="mb-1 font-semibold">{playlist.name}</h6>
              <p className="flex text-sm text-gray-200">
                {playlist.description}
              </p>
              <div className="mt-6 flex items-center gap-x-3">
                <div className="h-16 w-16 shrink-0">
                  <img
                    src={playlist.owner.avatar}
                    alt={playlist.owner.fullName}
                    className="h-full w-full rounded-full"
                  />
                </div>
                <div className="w-full">
                  <h6 className="font-semibold">{playlist.owner.fullName}</h6>
                  <p className="text-sm text-gray-300">
                    {playlist.owner.subscribers} Subscribers
                  </p>
                </div>
              </div>
            </div>
            <div className="flex w-full flex-col gap-y-4">
              {playlist.videos.map(
                (video) =>
                  video.isPublished && (
                    <div key={video.id} className="border">
                      <div className="w-full max-w-3xl gap-x-4 sm:flex">
                        <div className="relative mb-2 w-full sm:mb-0 sm:w-5/12">
                          <div className="w-full pt-[56%]">
                            <div className="absolute inset-0">
                              <img
                                src={video.thumbnail}
                                alt={video.title}
                                className="h-full w-full"
                              />
                            </div>
                            <span className="absolute bottom-1 right-1 inline-block rounded bg-black px-1.5 text-sm">
                              {video.duration}
                            </span>
                          </div>
                        </div>
                        <div className="flex gap-x-2 px-2 sm:w-7/12 sm:px-0">
                          <div className="h-10 w-10 shrink-0 sm:hidden">
                            <img
                              src={video.owner.avatar}
                              alt={video.owner.username}
                              className="h-full w-full rounded-full"
                            />
                          </div>
                          <div className="w-full">
                            <h6 className="mb-1 font-semibold sm:max-w-[75%]">
                              {video.title}
                            </h6>
                            <p className="flex text-sm text-gray-200 sm:mt-3">
                              {video.views}&nbsp;Views &middot; {video.time}
                            </p>
                            <div className="flex items-center gap-x-4">
                              <div className="mt-2 hidden h-10 w-10 shrink-0 sm:block">
                                <img
                                  src={video.owner.avatar}
                                  alt={video.owner.username}
                                  className="h-full w-full rounded-full"
                                />
                              </div>
                              <p className="text-sm text-gray-200">
                                {video.owner.fullName}
                              </p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  ),
              )}
            </div>
          </div>
        </section>
      </div>
    </div>
  );
};

export default ChannelPlaylistVideos;


================================================
FILE: src/components/templates/youtube/channel-playlist.jsx
================================================
"use client";
import { classNames } from "@/utils";
import React from "react";
import {
  MagnifyingGlassIcon,
  UserPlusIcon,
  XCircleIcon,
} from "@heroicons/react/24/outline";
import { bottomTotalItems, navItems, logo, playlistList } from "./data";

const ChannelPlaylist = () => {
  return (
    <div className="h-screen overflow-y-auto bg-[#121212] text-white">
      <header className="sticky inset-x-0 top-0 z-50 w-full border-b border-white bg-[#121212] px-4">
        <nav className="mx-auto flex max-w-7xl items-center py-2">
          <div className="mr-4 w-12 shrink-0 sm:w-16">{logo}</div>
          <div className="relative mx-auto hidden w-full max-w-md overflow-hidden sm:block">
            <input
              className="w-full border bg-transparent py-1 pl-8 pr-3 placeholder-white outline-none sm:py-2"
              placeholder="Search"
            />
            <span className="absolute left-2.5 top-1/2 inline-block -translate-y-1/2">
              <MagnifyingGlassIcon className=" h-4 w-4" />
            </span>
          </div>
          <button className="ml-auto sm:hidden">
            <MagnifyingGlassIcon className=" h-6 w-6" />
          </button>
          <button className="group peer ml-4 flex w-6 shrink-0 flex-wrap gap-y-1.5 sm:hidden">
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-2/3 bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
          </button>
          <div className="fixed inset-y-0 right-0 flex w-full max-w-xs shrink-0 translate-x-full flex-col border-l border-white bg-[#121212] duration-200 hover:translate-x-0 peer-focus:translate-x-0 sm:static sm:ml-4 sm:w-auto sm:translate-x-0 sm:border-none">
            <div className="relative flex w-full items-center justify-between border-b border-white px-4 py-2 sm:hidden">
              <span className="inline-block w-12">{logo}</span>
              <button className="inline-block w-8">
                <XCircleIcon />
              </button>
            </div>
            <ul className="my-4 flex w-full flex-wrap gap-2 px-4 sm:hidden">
              {navItems
                .filter((item) => !item.mobileView)
                .map((item) => (
                  <li key={item.name} className="w-full">
                    <button className="flex w-full items-center justify-start gap-x-4 border border-white px-4 py-1.5 text-left hover:bg-[#ae7aff] hover:text-black focus:border-[#ae7aff] focus:bg-[#ae7aff] focus:text-black">
                      <span className="inline-block w-full max-w-[20px] group-hover:mr-4 lg:mr-4">
                        {item.icon}
                      </span>
                      <span>{item.name}</span>
                    </button>
                  </li>
                ))}
            </ul>

            <div className="mb-8 mt-auto flex w-full flex-wrap gap-4 px-4 sm:mb-0 sm:mt-0 sm:items-center sm:px-0">
              <button className="w-full bg-[#383737] px-3 py-2 hover:bg-[#4f4e4e] sm:w-auto sm:bg-transparent">
                Log in
              </button>
              <button className="mr-1 w-full bg-[#ae7aff] px-3 py-2 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e] sm:w-auto">
                Sign up
              </button>
            </div>
          </div>
        </nav>
      </header>
      <div className="flex min-h-[calc(100vh-66px)] sm:min-h-[calc(100vh-82px)]">
        <aside className="group fixed inset-x-0 bottom-0 z-40 w-full shrink-0 border-t border-white bg-[#121212] px-2 py-2 sm:absolute sm:inset-y-0 sm:max-w-[70px] sm:border-r sm:border-t-0 sm:py-6 sm:hover:max-w-[250px] lg:sticky lg:max-w-[250px]">
          <ul className="flex justify-around gap-y-2 sm:sticky sm:top-[106px] sm:min-h-[calc(100vh-130px)] sm:flex-col">
            {navItems.map((item, i, arr) => (
              <li
                key={item.name}
                className={classNames(
                  item.mobileView ? "" : "hidden sm:block",
                  arr.length - i === bottomTotalItems ? "mt-auto" : "",
                )}
              >
                <button className="flex flex-col items-center justify-center border-white py-1 focus:text-[#ae7aff] sm:w-full sm:flex-row sm:border sm:p-1.5 sm:hover:bg-[#ae7aff] sm:hover:text-black sm:focus:border-[#ae7aff] sm:focus:bg-[#ae7aff] sm:focus:text-black sm:group-hover:justify-start sm:group-hover:px-4 lg:justify-start lg:px-4">
                  <span className="inline-block w-5 shrink-0 sm:group-hover:mr-4 lg:mr-4">
                    {item.icon}
                  </span>
                  <span className="block sm:hidden sm:group-hover:inline lg:inline">
                    {item.name}
                  </span>
                </button>
              </li>
            ))}
          </ul>
        </aside>
        <section className="w-full pb-[70px] sm:ml-[70px] sm:pb-0 lg:ml-0">
          <div className="relative min-h-[150px] w-full pt-[16.28%]">
            <div className="absolute inset-0 overflow-hidden">
              <img
                src="https://images.pexels.com/photos/1092424/pexels-photo-1092424.jpeg?auto=compress"
                alt="cover-photo"
              />
            </div>
          </div>
          <div className="px-4 pb-4">
            <div className="flex flex-wrap gap-4 pb-4 pt-6">
              <span className="relative -mt-12 inline-block h-28 w-28 shrink-0 overflow-hidden rounded-full border-2">
                <img
                  src="https://images.pexels.com/photos/1115816/pexels-photo-1115816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                  alt="Channel"
                  className="h-full w-full"
                />
              </span>

              <div className="mr-auto inline-block">
                <h1 className="font-bolg text-xl">React Patterns</h1>
                <p className="text-sm text-gray-400">@reactpatterns</p>
                <p className="text-sm text-gray-400">
                  600k Subscribers&nbsp;&middot;&nbsp;220 Subscribed
                </p>
              </div>

              <div className="inline-block">
                <div className="inline-flex min-w-[145px] justify-end">
                  <button className="group/btn mr-1 flex w-full items-center gap-x-2 bg-[#ae7aff] px-3 py-2 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e] sm:w-auto">
                    <span className="inline-block w-5">
                      <UserPlusIcon strokeWidth={2} />
                    </span>
                    <span className="group-focus/btn:hidden">Subscribe</span>
                    <span className="hidden group-focus/btn:block">
                      Subscribed
                    </span>
                  </button>
                </div>
              </div>
            </div>

            <ul className="no-scrollbar sticky top-[66px] z-[2] flex flex-row gap-x-2 overflow-auto border-b-2 border-gray-400 bg-[#121212] py-2 sm:top-[82px]">
              <li className="w-full">
                <button className="w-full border-b-2 border-transparent px-3 py-1.5 text-gray-400">
                  Videos
                </button>
              </li>
              <li className="w-full">
                <button className="w-full border-b-2 border-[#ae7aff] bg-white px-3 py-1.5 text-[#ae7aff]">
                  Playlist
                </button>
              </li>
              <li className="w-full">
                <button className="w-full border-b-2 border-transparent px-3 py-1.5 text-gray-400">
                  Tweets
                </button>
              </li>
              <li className="w-full">
                <button className="w-full border-b-2 border-transparent px-3 py-1.5 text-gray-400">
                  Subscribed
                </button>
              </li>
            </ul>
            <div className="grid gap-4 pt-2 sm:grid-cols-[repeat(auto-fit,_minmax(400px,_1fr))]">
              {playlistList.map(
                (playlist) =>
                  playlist.videos.filter((video) => video.isPublished).length >
                    0 && (
                    <div key={playlist.id} className="w-full">
                      <div className="relative mb-2 w-full pt-[56%]">
                        <div className="absolute inset-0">
                          <img
                            src={
                              playlist.videos.find((video) => video.isPublished)
                                .thumbnail
                            }
                            alt={playlist.name}
                            className="h-full w-full"
                          />
                          <div className="absolute inset-x-0 bottom-0">
                            <div className="relative border-t bg-white/30 p-4 text-white backdrop-blur-sm before:absolute before:inset-0 before:bg-black/40">
                              <div className="relative z-[1]">
                                <p className="flex justify-between">
                                  <span className="inline-block">Playlist</span>
                                  <span className="inline-block">
                                    {
                                      playlist.videos.filter(
                                        (video) => video.isPublished,
                                      ).length
                                    }
                                    &nbsp;videos
                                  </span>
                                </p>
                                <p className="text-sm text-gray-200">
                                  {playlist.views} Views&nbsp;&middot;&nbsp;
                                  {playlist.createdAt}
                                </p>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <h6 className="mb-1 font-semibold">{playlist.name}</h6>
                      <p className="flex text-sm text-gray-200">
                        {playlist.description}
                      </p>
                    </div>
                  ),
              )}
            </div>
          </div>
        </section>
      </div>
    </div>
  );
};

export default ChannelPlaylist;


================================================
FILE: src/components/templates/youtube/channel-subscribed.jsx
================================================
"use client";
import { classNames } from "@/utils";
import React from "react";
import {
  MagnifyingGlassIcon,
  UserPlusIcon,
  XCircleIcon,
} from "@heroicons/react/24/outline";
import { bottomTotalItems, navItems, logo, channels } from "./data";

const ChannelSubscribed = () => {
  return (
    <div className="h-screen overflow-y-auto bg-[#121212] text-white">
      <header className="sticky inset-x-0 top-0 z-50 w-full border-b border-white bg-[#121212] px-4">
        <nav className="mx-auto flex max-w-7xl items-center py-2">
          <div className="mr-4 w-12 shrink-0 sm:w-16">{logo}</div>
          <div className="relative mx-auto hidden w-full max-w-md overflow-hidden sm:block">
            <input
              className="w-full border bg-transparent py-1 pl-8 pr-3 placeholder-white outline-none sm:py-2"
              placeholder="Search"
            />
            <span className="absolute left-2.5 top-1/2 inline-block -translate-y-1/2">
              <MagnifyingGlassIcon className=" h-4 w-4" />
            </span>
          </div>
          <button className="ml-auto sm:hidden">
            <MagnifyingGlassIcon className=" h-6 w-6" />
          </button>
          <button className="group peer ml-4 flex w-6 shrink-0 flex-wrap gap-y-1.5 sm:hidden">
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-2/3 bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
          </button>
          <div className="fixed inset-y-0 right-0 flex w-full max-w-xs shrink-0 translate-x-full flex-col border-l border-white bg-[#121212] duration-200 hover:translate-x-0 peer-focus:translate-x-0 sm:static sm:ml-4 sm:w-auto sm:translate-x-0 sm:border-none">
            <div className="relative flex w-full items-center justify-between border-b border-white px-4 py-2 sm:hidden">
              <span className="inline-block w-12">{logo}</span>
              <button className="inline-block w-8">
                <XCircleIcon />
              </button>
            </div>
            <ul className="my-4 flex w-full flex-wrap gap-2 px-4 sm:hidden">
              {navItems
                .filter((item) => !item.mobileView)
                .map((item) => (
                  <li key={item.name} className="w-full">
                    <button className="flex w-full items-center justify-start gap-x-4 border border-white px-4 py-1.5 text-left hover:bg-[#ae7aff] hover:text-black focus:border-[#ae7aff] focus:bg-[#ae7aff] focus:text-black">
                      <span className="inline-block w-full max-w-[20px] group-hover:mr-4 lg:mr-4">
                        {item.icon}
                      </span>
                      <span>{item.name}</span>
                    </button>
                  </li>
                ))}
            </ul>

            <div className="mb-8 mt-auto flex w-full flex-wrap gap-4 px-4 sm:mb-0 sm:mt-0 sm:items-center sm:px-0">
              <button className="w-full bg-[#383737] px-3 py-2 hover:bg-[#4f4e4e] sm:w-auto sm:bg-transparent">
                Log in
              </button>
              <button className="mr-1 w-full bg-[#ae7aff] px-3 py-2 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e] sm:w-auto">
                Sign up
              </button>
            </div>
          </div>
        </nav>
      </header>
      <div className="flex min-h-[calc(100vh-66px)] sm:min-h-[calc(100vh-82px)]">
        <aside className="group fixed inset-x-0 bottom-0 z-40 w-full shrink-0 border-t border-white bg-[#121212] px-2 py-2 sm:absolute sm:inset-y-0 sm:max-w-[70px] sm:border-r sm:border-t-0 sm:py-6 sm:hover:max-w-[250px] lg:sticky lg:max-w-[250px]">
          <ul className="flex justify-around gap-y-2 sm:sticky sm:top-[106px] sm:min-h-[calc(100vh-130px)] sm:flex-col">
            {navItems.map((item, i, arr) => (
              <li
                key={item.name}
                className={classNames(
                  item.mobileView ? "" : "hidden sm:block",
                  arr.length - i === bottomTotalItems ? "mt-auto" : "",
                )}
              >
                <button className="flex flex-col items-center justify-center border-white py-1 focus:text-[#ae7aff] sm:w-full sm:flex-row sm:border sm:p-1.5 sm:hover:bg-[#ae7aff] sm:hover:text-black sm:focus:border-[#ae7aff] sm:focus:bg-[#ae7aff] sm:focus:text-black sm:group-hover:justify-start sm:group-hover:px-4 lg:justify-start lg:px-4">
                  <span className="inline-block w-5 shrink-0 sm:group-hover:mr-4 lg:mr-4">
                    {item.icon}
                  </span>
                  <span className="block sm:hidden sm:group-hover:inline lg:inline">
                    {item.name}
                  </span>
                </button>
              </li>
            ))}
          </ul>
        </aside>
        <section className="w-full pb-[70px] sm:ml-[70px] sm:pb-0 lg:ml-0">
          <div className="relative min-h-[150px] w-full pt-[16.28%]">
            <div className="absolute inset-0 overflow-hidden">
              <img
                src="https://images.pexels.com/photos/1092424/pexels-photo-1092424.jpeg?auto=compress"
                alt="cover-photo"
              />
            </div>
          </div>
          <div className="px-4 pb-4">
            <div className="flex flex-wrap gap-4 pb-4 pt-6">
              <span className="relative -mt-12 inline-block h-28 w-28 shrink-0 overflow-hidden rounded-full border-2">
                <img
                  src="https://images.pexels.com/photos/1115816/pexels-photo-1115816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                  alt="Channel"
                  className="h-full w-full"
                />
              </span>

              <div className="mr-auto inline-block">
                <h1 className="font-bolg text-xl">React Patterns</h1>
                <p className="text-sm text-gray-400">@reactpatterns</p>
                <p className="text-sm text-gray-400">
                  600k Subscribers&nbsp;&middot;&nbsp;220 Subscribed
                </p>
              </div>

              <div className="inline-block">
                <div className="inline-flex min-w-[145px] justify-end">
                  <button className="group/btn mr-1 flex w-full items-center gap-x-2 bg-[#ae7aff] px-3 py-2 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e] sm:w-auto">
                    <span className="inline-block w-5">
                      <UserPlusIcon strokeWidth={2} />
                    </span>
                    <span className="group-focus/btn:hidden">Subscribe</span>
                    <span className="hidden group-focus/btn:block">
                      Subscribed
                    </span>
                  </button>
                </div>
              </div>
            </div>

            <ul className="no-scrollbar sticky top-[66px] z-[2] flex flex-row gap-x-2 overflow-auto border-b-2 border-gray-400 bg-[#121212] py-2 sm:top-[82px]">
              <li className="w-full">
                <button className="w-full border-b-2 border-transparent px-3 py-1.5 text-gray-400">
                  Videos
                </button>
              </li>
              <li className="w-full">
                <button className="w-full border-b-2 border-transparent px-3 py-1.5 text-gray-400">
                  Playlist
                </button>
              </li>
              <li className="w-full">
                <button className="w-full border-b-2 border-transparent px-3 py-1.5 text-gray-400">
                  Tweets
                </button>
              </li>
              <li className="w-full">
                <button className="w-full border-b-2 border-[#ae7aff] bg-white px-3 py-1.5 text-[#ae7aff]">
                  Subscribed
                </button>
              </li>
            </ul>
            <div className="flex flex-col gap-y-4 py-4">
              <div className="relative mb-2 rounded-lg bg-white py-2 pl-8 pr-3 text-black">
                <span className="absolute left-2 top-1/2 -translate-y-1/2 text-gray-400">
                  <MagnifyingGlassIcon className="h-5 w-5" strokeWidth={2} />
                </span>
                <input
                  className="w-full bg-transparent outline-none"
                  placeholder="Search"
                />
              </div>

              {channels.map((channel, i) => (
                <div
                  className="flex w-full justify-between"
                  key={channel.id + "-" + i}
                >
                  <div className="flex items-center gap-x-2">
                    <div className="h-14 w-14 shrink-0">
                      <img
                        src={channel.avatar}
                        alt={channel.fullName}
                        className="h-full w-full rounded-full"
                      />
                    </div>
                    <div className="block">
                      <h6 className="font-semibold">{channel.fullName}</h6>
                      <p className="text-sm text-gray-300">
                        {channel.subscribers}&nbsp;Subscribers
                      </p>
                    </div>
                  </div>
                  <div className="block">
                    <button
                      className={classNames(
                        "group/btn px-3 py-2 text-black",
                        channel.isSubscribed
                          ? "bg-[#ae7aff] focus:bg-white"
                          : "bg-white focus:bg-[#ae7aff]",
                      )}
                    >
                      <span className="group-focus/btn:hidden">
                        {channel.isSubscribed ? "Subscribed" : "Subscribe"}
                      </span>
                      <span className="hidden group-focus/btn:inline">
                        {!channel.isSubscribed ? "Subscribed" : "Subscribe"}
                      </span>
                    </button>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>
      </div>
    </div>
  );
};

export default ChannelSubscribed;


================================================
FILE: src/components/templates/youtube/channel-tweets.jsx
================================================
"use client";
import { classNames } from "@/utils";
import React from "react";
import {
  HandThumbDownIcon,
  HandThumbUpIcon,
  MagnifyingGlassIcon,
  UserPlusIcon,
  XCircleIcon,
} from "@heroicons/react/24/outline";
import { bottomTotalItems, navItems, logo, tweets } from "./data";

const ChannelTweets = () => {
  return (
    <div className="h-screen overflow-y-auto bg-[#121212] text-white">
      <header className="sticky inset-x-0 top-0 z-50 w-full border-b border-white bg-[#121212] px-4">
        <nav className="mx-auto flex max-w-7xl items-center py-2">
          <div className="mr-4 w-12 shrink-0 sm:w-16">{logo}</div>
          <div className="relative mx-auto hidden w-full max-w-md overflow-hidden sm:block">
            <input
              className="w-full border bg-transparent py-1 pl-8 pr-3 placeholder-white outline-none sm:py-2"
              placeholder="Search"
            />
            <span className="absolute left-2.5 top-1/2 inline-block -translate-y-1/2">
              <MagnifyingGlassIcon className=" h-4 w-4" />
            </span>
          </div>
          <button className="ml-auto sm:hidden">
            <MagnifyingGlassIcon className=" h-6 w-6" />
          </button>
          <button className="group peer ml-4 flex w-6 shrink-0 flex-wrap gap-y-1.5 sm:hidden">
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-2/3 bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
          </button>
          <div className="fixed inset-y-0 right-0 flex w-full max-w-xs shrink-0 translate-x-full flex-col border-l border-white bg-[#121212] duration-200 hover:translate-x-0 peer-focus:translate-x-0 sm:static sm:ml-4 sm:w-auto sm:translate-x-0 sm:border-none">
            <div className="relative flex w-full items-center justify-between border-b border-white px-4 py-2 sm:hidden">
              <span className="inline-block w-12">{logo}</span>
              <button className="inline-block w-8">
                <XCircleIcon />
              </button>
            </div>
            <ul className="my-4 flex w-full flex-wrap gap-2 px-4 sm:hidden">
              {navItems
                .filter((item) => !item.mobileView)
                .map((item) => (
                  <li key={item.name} className="w-full">
                    <button className="flex w-full items-center justify-start gap-x-4 border border-white px-4 py-1.5 text-left hover:bg-[#ae7aff] hover:text-black focus:border-[#ae7aff] focus:bg-[#ae7aff] focus:text-black">
                      <span className="inline-block w-full max-w-[20px] group-hover:mr-4 lg:mr-4">
                        {item.icon}
                      </span>
                      <span>{item.name}</span>
                    </button>
                  </li>
                ))}
            </ul>

            <div className="mb-8 mt-auto flex w-full flex-wrap gap-4 px-4 sm:mb-0 sm:mt-0 sm:items-center sm:px-0">
              <button className="w-full bg-[#383737] px-3 py-2 hover:bg-[#4f4e4e] sm:w-auto sm:bg-transparent">
                Log in
              </button>
              <button className="mr-1 w-full bg-[#ae7aff] px-3 py-2 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e] sm:w-auto">
                Sign up
              </button>
            </div>
          </div>
        </nav>
      </header>
      <div className="flex min-h-[calc(100vh-66px)] sm:min-h-[calc(100vh-82px)]">
        <aside className="group fixed inset-x-0 bottom-0 z-40 w-full shrink-0 border-t border-white bg-[#121212] px-2 py-2 sm:absolute sm:inset-y-0 sm:max-w-[70px] sm:border-r sm:border-t-0 sm:py-6 sm:hover:max-w-[250px] lg:sticky lg:max-w-[250px]">
          <ul className="flex justify-around gap-y-2 sm:sticky sm:top-[106px] sm:min-h-[calc(100vh-130px)] sm:flex-col">
            {navItems.map((item, i, arr) => (
              <li
                key={item.name}
                className={classNames(
                  item.mobileView ? "" : "hidden sm:block",
                  arr.length - i === bottomTotalItems ? "mt-auto" : "",
                )}
              >
                <button className="flex flex-col items-center justify-center border-white py-1 focus:text-[#ae7aff] sm:w-full sm:flex-row sm:border sm:p-1.5 sm:hover:bg-[#ae7aff] sm:hover:text-black sm:focus:border-[#ae7aff] sm:focus:bg-[#ae7aff] sm:focus:text-black sm:group-hover:justify-start sm:group-hover:px-4 lg:justify-start lg:px-4">
                  <span className="inline-block w-5 shrink-0 sm:group-hover:mr-4 lg:mr-4">
                    {item.icon}
                  </span>
                  <span className="block sm:hidden sm:group-hover:inline lg:inline">
                    {item.name}
                  </span>
                </button>
              </li>
            ))}
          </ul>
        </aside>
        <section className="w-full pb-[70px] sm:ml-[70px] sm:pb-0 lg:ml-0">
          <div className="relative min-h-[150px] w-full pt-[16.28%]">
            <div className="absolute inset-0 overflow-hidden">
              <img
                src="https://images.pexels.com/photos/1092424/pexels-photo-1092424.jpeg?auto=compress"
                alt="cover-photo"
              />
            </div>
          </div>
          <div className="px-4 pb-4">
            <div className="flex flex-wrap gap-4 pb-4 pt-6">
              <span className="relative -mt-12 inline-block h-28 w-28 shrink-0 overflow-hidden rounded-full border-2">
                <img
                  src="https://images.pexels.com/photos/1115816/pexels-photo-1115816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                  alt="Channel"
                  className="h-full w-full"
                />
              </span>

              <div className="mr-auto inline-block">
                <h1 className="font-bolg text-xl">React Patterns</h1>
                <p className="text-sm text-gray-400">@reactpatterns</p>
                <p className="text-sm text-gray-400">
                  600k Subscribers&nbsp;&middot;&nbsp;220 Subscribed
                </p>
              </div>

              <div className="inline-block">
                <div className="inline-flex min-w-[145px] justify-end">
                  <button className="group/btn mr-1 flex w-full items-center gap-x-2 bg-[#ae7aff] px-3 py-2 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e] sm:w-auto">
                    <span className="inline-block w-5">
                      <UserPlusIcon strokeWidth={2} />
                    </span>
                    <span className="group-focus/btn:hidden">Subscribe</span>
                    <span className="hidden group-focus/btn:block">
                      Subscribed
                    </span>
                  </button>
                </div>
              </div>
            </div>

            <ul className="no-scrollbar sticky top-[66px] z-[2] flex flex-row gap-x-2 overflow-auto border-b-2 border-gray-400 bg-[#121212] py-2 sm:top-[82px]">
              <li className="w-full">
                <button className="w-full border-b-2 border-transparent px-3 py-1.5 text-gray-400">
                  Videos
                </button>
              </li>
              <li className="w-full">
                <button className="w-full border-b-2 border-transparent px-3 py-1.5 text-gray-400">
                  Playlist
                </button>
              </li>
              <li className="w-full">
                <button className="w-full border-b-2 border-[#ae7aff] bg-white px-3 py-1.5 text-[#ae7aff]">
                  Tweets
                </button>
              </li>
              <li className="w-full">
                <button className="w-full border-b-2 border-transparent px-3 py-1.5 text-gray-400">
                  Subscribed
                </button>
              </li>
            </ul>
            <div className="py-4">
              {tweets.map((tweet) => (
                <div
                  key={tweet.id}
                  className="flex gap-3 border-b border-gray-700 py-4 last:border-b-transparent"
                >
                  <div className="h-14 w-14 shrink-0">
                    <img
                      src={tweet.owner.avatar}
                      alt={tweet.owner.fullName}
                      className="h-full w-full rounded-full"
                    />
                  </div>
                  <div className="w-full">
                    <h4 className="mb-1 flex items-center gap-x-2">
                      <span className="font-semibold">
                        {tweet.owner.fullName}
                      </span>
                      &nbsp;
                      <span className="inline-block text-sm text-gray-400">
                        {tweet.createdAt}
                      </span>
                    </h4>
                    <p className="mb-2">{tweet.content}</p>
                    <div className="flex gap-4">
                      <button
                        className={`group inline-flex items-center gap-x-1 outline-none after:content-[attr(data-like-count)] focus:after:content-[attr(data-like-count-alt)]`}
                        data-like-count={tweet.likeCount}
                        data-like-count-alt={
                          tweet.liked
                            ? tweet.likeCount - 1
                            : tweet.likeCount + 1
                        }
                      >
                        <HandThumbUpIcon
                          className={`h-5 w-5 ${
                            tweet.liked
                              ? "text-[#ae7aff] group-focus:text-inherit"
                              : "text-inherit group-focus:text-[#ae7aff]"
                          }`}
                        />
                      </button>
                      <button
                        className={`group inline-flex items-center gap-x-1 outline-none after:content-[attr(data-dislike-count)] focus:after:content-[attr(data-dislike-count-alt)]`}
                        data-dislike-count={tweet.dislikeCount}
                        data-dislike-count-alt={
                          tweet.disliked
                            ? tweet.dislikeCount - 1
                            : tweet.dislikeCount + 1
                        }
                      >
                        <HandThumbDownIcon
                          className={`h-5 w-5 ${
                            tweet.disliked
                              ? "text-[#ae7aff] group-focus:text-inherit"
                              : "text-inherit group-focus:text-[#ae7aff]"
                          }`}
                        />
                      </button>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>
      </div>
    </div>
  );
};

export default ChannelTweets;


================================================
FILE: src/components/templates/youtube/channel-video-list.jsx
================================================
"use client";
import { classNames } from "@/utils";
import React from "react";
import {
  MagnifyingGlassIcon,
  UserPlusIcon,
  XCircleIcon,
} from "@heroicons/react/24/outline";
import { bottomTotalItems, navItems, logo, videos } from "./data";

const ChannelVideoList = () => {
  return (
    <div className="h-screen overflow-y-auto bg-[#121212] text-white">
      <header className="sticky inset-x-0 top-0 z-50 w-full border-b border-white bg-[#121212] px-4">
        <nav className="mx-auto flex max-w-7xl items-center py-2">
          <div className="mr-4 w-12 shrink-0 sm:w-16">{logo}</div>
          <div className="relative mx-auto hidden w-full max-w-md overflow-hidden sm:block">
            <input
              className="w-full border bg-transparent py-1 pl-8 pr-3 placeholder-white outline-none sm:py-2"
              placeholder="Search"
            />
            <span className="absolute left-2.5 top-1/2 inline-block -translate-y-1/2">
              <MagnifyingGlassIcon className=" h-4 w-4" />
            </span>
          </div>
          <button className="ml-auto sm:hidden">
            <MagnifyingGlassIcon className=" h-6 w-6" />
          </button>
          <button className="group peer ml-4 flex w-6 shrink-0 flex-wrap gap-y-1.5 sm:hidden">
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-2/3 bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
          </button>
          <div className="fixed inset-y-0 right-0 flex w-full max-w-xs shrink-0 translate-x-full flex-col border-l border-white bg-[#121212] duration-200 hover:translate-x-0 peer-focus:translate-x-0 sm:static sm:ml-4 sm:w-auto sm:translate-x-0 sm:border-none">
            <div className="relative flex w-full items-center justify-between border-b border-white px-4 py-2 sm:hidden">
              <span className="inline-block w-12">{logo}</span>
              <button className="inline-block w-8">
                <XCircleIcon />
              </button>
            </div>
            <ul className="my-4 flex w-full flex-wrap gap-2 px-4 sm:hidden">
              {navItems
                .filter((item) => !item.mobileView)
                .map((item) => (
                  <li key={item.name} className="w-full">
                    <button className="flex w-full items-center justify-start gap-x-4 border border-white px-4 py-1.5 text-left hover:bg-[#ae7aff] hover:text-black focus:border-[#ae7aff] focus:bg-[#ae7aff] focus:text-black">
                      <span className="inline-block w-full max-w-[20px] group-hover:mr-4 lg:mr-4">
                        {item.icon}
                      </span>
                      <span>{item.name}</span>
                    </button>
                  </li>
                ))}
            </ul>

            <div className="mb-8 mt-auto flex w-full flex-wrap gap-4 px-4 sm:mb-0 sm:mt-0 sm:items-center sm:px-0">
              <button className="w-full bg-[#383737] px-3 py-2 hover:bg-[#4f4e4e] sm:w-auto sm:bg-transparent">
                Log in
              </button>
              <button className="mr-1 w-full bg-[#ae7aff] px-3 py-2 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e] sm:w-auto">
                Sign up
              </button>
            </div>
          </div>
        </nav>
      </header>
      <div className="flex min-h-[calc(100vh-66px)] sm:min-h-[calc(100vh-82px)]">
        <aside className="group fixed inset-x-0 bottom-0 z-40 w-full shrink-0 border-t border-white bg-[#121212] px-2 py-2 sm:absolute sm:inset-y-0 sm:max-w-[70px] sm:border-r sm:border-t-0 sm:py-6 sm:hover:max-w-[250px] lg:sticky lg:max-w-[250px]">
          <ul className="flex justify-around gap-y-2 sm:sticky sm:top-[106px] sm:min-h-[calc(100vh-130px)] sm:flex-col">
            {navItems.map((item, i, arr) => (
              <li
                key={item.name}
                className={classNames(
                  item.mobileView ? "" : "hidden sm:block",
                  arr.length - i === bottomTotalItems ? "mt-auto" : "",
                )}
              >
                <button className="flex flex-col items-center justify-center border-white py-1 focus:text-[#ae7aff] sm:w-full sm:flex-row sm:border sm:p-1.5 sm:hover:bg-[#ae7aff] sm:hover:text-black sm:focus:border-[#ae7aff] sm:focus:bg-[#ae7aff] sm:focus:text-black sm:group-hover:justify-start sm:group-hover:px-4 lg:justify-start lg:px-4">
                  <span className="inline-block w-5 shrink-0 sm:group-hover:mr-4 lg:mr-4">
                    {item.icon}
                  </span>
                  <span className="block sm:hidden sm:group-hover:inline lg:inline">
                    {item.name}
                  </span>
                </button>
              </li>
            ))}
          </ul>
        </aside>
        <section className="w-full pb-[70px] sm:ml-[70px] sm:pb-0 lg:ml-0">
          <div className="relative min-h-[150px] w-full pt-[16.28%]">
            <div className="absolute inset-0 overflow-hidden">
              <img
                src="https://images.pexels.com/photos/1092424/pexels-photo-1092424.jpeg?auto=compress"
                alt="cover-photo"
              />
            </div>
          </div>
          <div className="px-4 pb-4">
            <div className="flex flex-wrap gap-4 pb-4 pt-6">
              <span className="relative -mt-12 inline-block h-28 w-28 shrink-0 overflow-hidden rounded-full border-2">
                <img
                  src="https://images.pexels.com/photos/1115816/pexels-photo-1115816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                  alt="Channel"
                  className="h-full w-full"
                />
              </span>

              <div className="mr-auto inline-block">
                <h1 className="font-bolg text-xl">React Patterns</h1>
                <p className="text-sm text-gray-400">@reactpatterns</p>
                <p className="text-sm text-gray-400">
                  600k Subscribers&nbsp;&middot;&nbsp;220 Subscribed
                </p>
              </div>

              <div className="inline-block">
                <div className="inline-flex min-w-[145px] justify-end">
                  <button className="group/btn mr-1 flex w-full items-center gap-x-2 bg-[#ae7aff] px-3 py-2 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e] sm:w-auto">
                    <span className="inline-block w-5">
                      <UserPlusIcon strokeWidth={2} />
                    </span>
                    <span className="group-focus/btn:hidden">Subscribe</span>
                    <span className="hidden group-focus/btn:block">
                      Subscribed
                    </span>
                  </button>
                </div>
              </div>
            </div>

            <ul className="no-scrollbar sticky top-[66px] z-[2] flex flex-row gap-x-2 overflow-auto border-b-2 border-gray-400 bg-[#121212] py-2 sm:top-[82px]">
              <li className="w-full">
                <button className="w-full border-b-2 border-[#ae7aff] bg-white px-3 py-1.5 text-[#ae7aff]">
                  Videos
                </button>
              </li>
              <li className="w-full">
                <button className="w-full border-b-2 border-transparent px-3 py-1.5 text-gray-400">
                  Playlist
                </button>
              </li>
              <li className="w-full">
                <button className="w-full border-b-2 border-transparent px-3 py-1.5 text-gray-400">
                  Tweets
                </button>
              </li>
              <li className="w-full">
                <button className="w-full border-b-2 border-transparent px-3 py-1.5 text-gray-400">
                  Subscribed
                </button>
              </li>
            </ul>
            <div className="grid grid-cols-[repeat(auto-fit,_minmax(300px,_1fr))] gap-4 pt-2">
              {videos
                .filter((video) => video.isPublished)
                .map((video) => (
                  <div key={video.id} className="w-full">
                    <div className="relative mb-2 w-full pt-[56%]">
                      <div className="absolute inset-0">
                        <img
                          src={video.thumbnail}
                          alt={video.title}
                          className="h-full w-full"
                        />
                      </div>
                      <span className="absolute bottom-1 right-1 inline-block rounded bg-black px-1.5 text-sm">
                        {video.duration}
                      </span>
                    </div>
                    <h6 className="mb-1 font-semibold">{video.title}</h6>
                    <p className="flex text-sm text-gray-200">
                      {video.views}&nbsp;Views &middot; {video.time}
                    </p>
                  </div>
                ))}
            </div>
          </div>
        </section>
      </div>
    </div>
  );
};

export default ChannelVideoList;


================================================
FILE: src/components/templates/youtube/dashboard.jsx
================================================
"use client";
import {
  EyeIcon,
  HeartIcon,
  MagnifyingGlassIcon,
  PencilIcon,
  PlusIcon,
  TrashIcon,
  UserIcon,
  XCircleIcon,
} from "@heroicons/react/24/outline";
import React from "react";
import { navItems, logo, videos } from "./data";
import { classNames } from "@/utils";

const Dashboard = () => {
  return (
    <div className="h-screen overflow-y-auto bg-[#121212] text-white">
      <header className="sticky inset-x-0 top-0 z-50 w-full border-b border-white bg-[#121212] px-4">
        <nav className="mx-auto flex max-w-7xl items-center py-2">
          <div className="mr-4 w-12 shrink-0 sm:w-16">{logo}</div>
          <div className="relative mx-auto hidden w-full max-w-md overflow-hidden sm:block">
            <input
              className="w-full border bg-transparent py-1 pl-8 pr-3 placeholder-white outline-none sm:py-2"
              placeholder="Search"
            />
            <span className="absolute left-2.5 top-1/2 inline-block -translate-y-1/2">
              <MagnifyingGlassIcon className=" h-4 w-4" />
            </span>
          </div>
          <button className="ml-auto sm:hidden">
            <MagnifyingGlassIcon className=" h-6 w-6" />
          </button>
          <button className="group peer ml-4 flex w-6 shrink-0 flex-wrap gap-y-1.5 sm:hidden">
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-2/3 bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
          </button>
          <div className="fixed inset-y-0 right-0 flex w-full max-w-xs shrink-0 translate-x-full flex-col border-l border-white bg-[#121212] duration-200 hover:translate-x-0 peer-focus:translate-x-0 sm:static sm:ml-4 sm:w-auto sm:translate-x-0 sm:border-none">
            <div className="relative flex w-full items-center justify-between border-b border-white px-4 py-2 sm:hidden">
              <span className="inline-block w-12">{logo}</span>
              <button className="inline-block w-8">
                <XCircleIcon />
              </button>
            </div>
            <ul className="my-4 flex w-full flex-wrap gap-2 px-4 sm:hidden">
              {navItems
                .filter((item) => !item.mobileView)
                .map((item) => (
                  <li key={item.name} className="w-full">
                    <button className="flex w-full items-center justify-start gap-x-4 border border-white px-4 py-1.5 text-left hover:bg-[#ae7aff] hover:text-black focus:border-[#ae7aff] focus:bg-[#ae7aff] focus:text-black">
                      <span className="inline-block w-full max-w-[20px] group-hover:mr-4 lg:mr-4">
                        {item.icon}
                      </span>
                      <span>{item.name}</span>
                    </button>
                  </li>
                ))}
            </ul>

            <div className="mb-8 mt-auto px-4 sm:mb-0 sm:mt-0 sm:px-0">
              <button className="flex w-full gap-4 text-left sm:items-center">
                <img
                  src="https://images.pexels.com/photos/1115816/pexels-photo-1115816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                  alt="React-Patterns"
                  className="h-16 w-16 shrink-0 rounded-full sm:h-12 sm:w-12"
                />

                <div className="w-full pt-2 sm:hidden">
                  <h6 className="font-semibold">React Patterns</h6>
                  <p className="text-sm text-gray-300">@reactpatterns</p>
                </div>
              </button>
            </div>
          </div>
        </nav>
      </header>
      <div className="flex min-h-[calc(100vh-66px)] sm:min-h-[calc(100vh-82px)]">
        <div className="mx-auto flex w-full max-w-7xl flex-col gap-y-6 px-4 py-8">
          <div className="flex flex-wrap justify-between gap-4">
            <div className="block">
              <h1 className="text-2xl font-bold">
                Welcome Back, React Patterns
              </h1>
              <p className="text-sm text-gray-300">
                Seamless Video Management, Elevated Results.
              </p>
            </div>
            <div className="block">
              <button className="inline-flex items-center gap-x-2 bg-[#ae7aff] px-3 py-2 font-semibold text-black">
                <PlusIcon className="h-5 w-5" strokeWidth={2} /> Upload video
              </button>
            </div>
          </div>
          <div className="grid grid-cols-[repeat(auto-fit,_minmax(300px,_1fr))] gap-4">
            {[
              { Icon: EyeIcon, title: "Total views", count: "221,234" },
              { Icon: UserIcon, title: "Total subscribers", count: "4,053" },
              { Icon: HeartIcon, title: "Total likes", count: "63,021" },
            ].map(({ title, Icon, count }) => (
              <div key={title} className="border p-4">
                <div className="mb-4 block">
                  <span className="inline-block h-7 w-7 rounded-full bg-[#E4D3FF] p-1 text-[#ae7aff]">
                    <Icon />
                  </span>
                </div>
                <h6 className="text-gray-300">{title}</h6>
                <p className="text-3xl font-semibold">{count}</p>
              </div>
            ))}
          </div>
          <div className="w-full overflow-auto">
            <table className="w-full min-w-[1200px] border-collapse border text-white">
              <thead>
                <tr>
                  <th className="border-collapse border-b p-4">Status</th>
                  <th className="border-collapse border-b p-4">Status</th>
                  <th className="border-collapse border-b p-4">Uploaded</th>
                  <th className="border-collapse border-b p-4">Rating</th>
                  <th className="border-collapse border-b p-4">
                    Date uploaded
                  </th>
                  <th className="border-collapse border-b p-4"></th>
                </tr>
              </thead>
              <tbody>
                {videos.map((video) => (
                  <tr key={video.id} className="group border">
                    <td className="border-collapse border-b border-gray-600 px-4 py-3 group-last:border-none">
                      <div className="flex justify-center">
                        <label
                          htmlFor={"vid-pub-" + video.id}
                          className="relative inline-block w-12 cursor-pointer overflow-hidden"
                        >
                          <input
                            type="checkbox"
                            id={"vid-pub-" + video.id}
                            className="peer sr-only"
                            defaultChecked={video.isPublished}
                          />
                          <span className="inline-block h-6 w-full rounded-2xl bg-gray-200 duration-200 after:absolute after:bottom-1 after:left-1 after:top-1 after:h-4 after:w-4 after:rounded-full after:bg-black after:duration-200 peer-checked:bg-[#ae7aff] peer-checked:after:left-7"></span>
                        </label>
                      </div>
                    </td>
                    <td className="border-collapse border-b border-gray-600 px-4 py-3 group-last:border-none">
                      <div className="flex justify-center">
                        <span
                          className={classNames(
                            "inline-block rounded-2xl border px-1.5 py-0.5",
                            video.isPublished
                              ? "border-green-600 text-green-600"
                              : "border-orange-600 text-orange-600",
                          )}
                        >
                          {video.isPublished ? "Published" : "Unpublished"}
                        </span>
                      </div>
                    </td>
                    <td className="border-collapse border-b border-gray-600 px-4 py-3 group-last:border-none">
                      <div className="flex items-center gap-4">
                        <img
                          className="h-10 w-10 rounded-full"
                          src={video.owner.avatar}
                          alt={video.owner.fullName}
                        />
                        <h3 className="font-semibold">{video.title}</h3>
                      </div>
                    </td>
                    <td className="border-collapse border-b border-gray-600 px-4 py-3 group-last:border-none">
                      <div className="flex justify-center gap-4">
                        <span className="inline-block rounded-xl bg-green-200 px-1.5 py-0.5 text-green-700">
                          {video.likeCount} likes
                        </span>
                        <span className="inline-block rounded-xl bg-red-200 px-1.5 py-0.5 text-red-700">
                          {video.dislikeCount} dislikes
                        </span>
                      </div>
                    </td>
                    <td className="border-collapse border-b border-gray-600 px-4 py-3 group-last:border-none">
                      {new Date(video.createdAt).toLocaleDateString()}
                    </td>
                    <td className="border-collapse border-b border-gray-600 px-4 py-3 group-last:border-none">
                      <div className="flex gap-4">
                        <button className="h-5 w-5 hover:text-[#ae7aff]">
                          <TrashIcon />
                        </button>
                        <button className="h-5 w-5 hover:text-[#ae7aff]">
                          <PencilIcon />
                        </button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Dashboard;


================================================
FILE: src/components/templates/youtube/data.jsx
================================================
export const logo = (
  <svg
    style={{ width: "100%" }}
    viewBox="0 0 63 64"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M47.25 47.458C55.9485 38.7595 55.9485 24.6565 47.25 15.958C38.5515 7.25952 24.4485 7.25952 15.75 15.958C7.05151 24.6565 7.05151 38.7595 15.75 47.458C24.4485 56.1565 38.5515 56.1565 47.25 47.458Z"
      stroke="#E9FCFF"
      strokeWidth="1.38962"
      strokeMiterlimit="10"
    />
    <path
      d="M10.5366 47.7971V17.5057C10.5366 16.9599 11.1511 16.6391 11.599 16.9495L33.4166 32.0952C33.8041 32.3639 33.8041 32.9368 33.4166 33.2076L11.599 48.3533C11.1511 48.6657 10.5366 48.3429 10.5366 47.7971Z"
      stroke="url(#paint0_linear_53_10115)"
      strokeWidth="6.99574"
      strokeMiterlimit="10"
      strokeLinecap="round"
    />
    <path
      d="M18.1915 27.6963C20.1641 27.6963 21.7285 28.7066 21.7285 30.9021C21.7285 33.0976 20.1621 34.2433 18.1915 34.2433H16.8854V37.8677H14.1733V27.6984H18.1915V27.6963Z"
      fill="#E9FCFF"
    />
    <path
      d="M25.2053 27.6963V35.4868H28.484V37.8657H22.4932V27.6963H25.2053Z"
      fill="#E9FCFF"
    />
    <path
      d="M35.3142 27.6963L39.4553 37.8657H36.5328L35.9162 36.1763H32.1939L31.5773 37.8657H28.6548L32.7959 27.6963H35.3101H35.3142ZM34.9143 33.5663L34.2144 31.7832C34.1582 31.6395 33.954 31.6395 33.8978 31.7832L33.1979 33.5663C33.1541 33.6767 33.2354 33.7975 33.3562 33.7975H34.756C34.8747 33.7975 34.958 33.6767 34.9143 33.5663Z"
      fill="#E9FCFF"
    />
    <path
      d="M40.9491 27.6963L42.8592 30.5188L44.7694 27.6963H48.0355L44.2132 33.2559V37.8657H41.5011V33.2559L37.6787 27.6963H40.9449H40.9491Z"
      fill="#E9FCFF"
    />
    <path
      d="M16.894 32.1396V29.9129C16.894 29.8212 16.9982 29.7671 17.0732 29.8191L18.6771 30.9315C18.7417 30.9773 18.7417 31.0731 18.6771 31.1189L17.0732 32.2313C16.9982 32.2834 16.894 32.2313 16.894 32.1375V32.1396Z"
      fill="#232323"
    />
    <defs>
      <linearGradient
        id="paint0_linear_53_10115"
        x1="2.23416"
        y1="20.3361"
        x2="26.863"
        y2="44.9649"
        gradientUnits="userSpaceOnUse"
      >
        <stop stopColor="#007EF8" />
        <stop offset="1" stopColor="#FF4A9A" />
      </linearGradient>
    </defs>
  </svg>
);

export const icons = {
  home: (
    <svg
      style={{ width: "100%" }}
      viewBox="0 0 20 21"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M6 15.9997H14M9.0177 1.76375L2.23539 7.03888C1.78202 7.3915 1.55534 7.56781 1.39203 7.78861C1.24737 7.9842 1.1396 8.20454 1.07403 8.43881C1 8.70327 1 8.99045 1 9.56481V16.7997C1 17.9198 1 18.4799 1.21799 18.9077C1.40973 19.284 1.71569 19.59 2.09202 19.7818C2.51984 19.9997 3.07989 19.9997 4.2 19.9997H15.8C16.9201 19.9997 17.4802 19.9997 17.908 19.7818C18.2843 19.59 18.5903 19.284 18.782 18.9077C19 18.4799 19 17.9198 19 16.7997V9.56481C19 8.99045 19 8.70327 18.926 8.43881C18.8604 8.20454 18.7526 7.9842 18.608 7.78861C18.4447 7.56781 18.218 7.3915 17.7646 7.03888L10.9823 1.76376C10.631 1.4905 10.4553 1.35388 10.2613 1.30136C10.0902 1.25502 9.9098 1.25502 9.73865 1.30136C9.54468 1.35388 9.36902 1.4905 9.0177 1.76375Z"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  ),
  like: (
    <svg
      style={{ width: "100%" }}
      viewBox="0 0 22 22"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M6 21V10M1 12V19C1 20.1046 1.89543 21 3 21H16.4262C17.907 21 19.1662 19.9197 19.3914 18.4562L20.4683 11.4562C20.7479 9.6389 19.3418 8 17.5032 8H14C13.4477 8 13 7.55228 13 7V3.46584C13 2.10399 11.896 1 10.5342 1C10.2093 1 9.91498 1.1913 9.78306 1.48812L6.26394 9.40614C6.10344 9.76727 5.74532 10 5.35013 10H3C1.89543 10 1 10.8954 1 12Z"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  ),
  history: (
    <svg
      style={{ width: "100%" }}
      viewBox="0 0 22 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M20.7 11.5L18.7005 9.5L16.7 11.5M19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1C13.3019 1 16.1885 2.77814 17.7545 5.42909M10 5V10L13 12"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  ),
  myContent: (
    <svg
      style={{ width: "100%" }}
      viewBox="0 0 22 16"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M21 4.93137C21 4.32555 21 4.02265 20.8802 3.88238C20.7763 3.76068 20.6203 3.69609 20.4608 3.70865C20.2769 3.72312 20.0627 3.93731 19.6343 4.36569L16 8L19.6343 11.6343C20.0627 12.0627 20.2769 12.2769 20.4608 12.2914C20.6203 12.3039 20.7763 12.2393 20.8802 12.1176C21 11.9774 21 11.6744 21 11.0686V4.93137Z"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M1 5.8C1 4.11984 1 3.27976 1.32698 2.63803C1.6146 2.07354 2.07354 1.6146 2.63803 1.32698C3.27976 1 4.11984 1 5.8 1H11.2C12.8802 1 13.7202 1 14.362 1.32698C14.9265 1.6146 15.3854 2.07354 15.673 2.63803C16 3.27976 16 4.11984 16 5.8V10.2C16 11.8802 16 12.7202 15.673 13.362C15.3854 13.9265 14.9265 14.3854 14.362 14.673C13.7202 15 12.8802 15 11.2 15H5.8C4.11984 15 3.27976 15 2.63803 14.673C2.07354 14.3854 1.6146 13.9265 1.32698 13.362C1 12.7202 1 11.8802 1 10.2V5.8Z"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  ),
  collections: (
    <svg
      style={{ width: "100%" }}
      viewBox="0 0 22 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M12 5L10.8845 2.76892C10.5634 2.1268 10.4029 1.80573 10.1634 1.57116C9.95158 1.36373 9.69632 1.20597 9.41607 1.10931C9.09916 1 8.74021 1 8.02229 1H4.2C3.0799 1 2.51984 1 2.09202 1.21799C1.71569 1.40973 1.40973 1.71569 1.21799 2.09202C1 2.51984 1 3.0799 1 4.2V5M1 5H16.2C17.8802 5 18.7202 5 19.362 5.32698C19.9265 5.6146 20.3854 6.07354 20.673 6.63803C21 7.27976 21 8.11984 21 9.8V14.2C21 15.8802 21 16.7202 20.673 17.362C20.3854 17.9265 19.9265 18.3854 19.362 18.673C18.7202 19 17.8802 19 16.2 19H5.8C4.11984 19 3.27976 19 2.63803 18.673C2.07354 18.3854 1.6146 17.9265 1.32698 17.362C1 16.7202 1 15.8802 1 14.2V5Z"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  ),
  subscribers: (
    <svg
      style={{ width: "100%" }}
      viewBox="0 0 22 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M11 13.5H6.5C5.10444 13.5 4.40665 13.5 3.83886 13.6722C2.56045 14.06 1.56004 15.0605 1.17224 16.3389C1 16.9067 1 17.6044 1 19M15 16L17 18L21 14M13.5 5.5C13.5 7.98528 11.4853 10 9 10C6.51472 10 4.5 7.98528 4.5 5.5C4.5 3.01472 6.51472 1 9 1C11.4853 1 13.5 3.01472 13.5 5.5Z"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  ),
  support: (
    <svg
      style={{ width: "100%" }}
      viewBox="0 0 22 22"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M8.09 8C8.3251 7.33167 8.78915 6.76811 9.39995 6.40913C10.0108 6.05016 10.7289 5.91894 11.4272 6.03871C12.1255 6.15849 12.7588 6.52152 13.2151 7.06353C13.6713 7.60553 13.9211 8.29152 13.92 9C13.92 11 10.92 12 10.92 12M11 16H11.01M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11Z"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  ),
  settings: (
    <svg
      style={{ width: "100%" }}
      viewBox="0 0 22 22"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M11 14C12.6569 14 14 12.6569 14 11C14 9.34315 12.6569 8 11 8C9.34315 8 8 9.34315 8 11C8 12.6569 9.34315 14 11 14Z"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M17.7273 13.7273C17.6063 14.0015 17.5702 14.3056 17.6236 14.6005C17.6771 14.8954 17.8177 15.1676 18.0273 15.3818L18.0818 15.4364C18.2509 15.6052 18.385 15.8057 18.4765 16.0265C18.568 16.2472 18.6151 16.4838 18.6151 16.7227C18.6151 16.9617 18.568 17.1983 18.4765 17.419C18.385 17.6397 18.2509 17.8402 18.0818 18.0091C17.913 18.1781 17.7124 18.3122 17.4917 18.4037C17.271 18.4952 17.0344 18.5423 16.7955 18.5423C16.5565 18.5423 16.3199 18.4952 16.0992 18.4037C15.8785 18.3122 15.678 18.1781 15.5091 18.0091L15.4545 17.9545C15.2403 17.745 14.9682 17.6044 14.6733 17.5509C14.3784 17.4974 14.0742 17.5335 13.8 17.6545C13.5311 17.7698 13.3018 17.9611 13.1403 18.205C12.9788 18.4489 12.8921 18.7347 12.8909 19.0273V19.1818C12.8909 19.664 12.6994 20.1265 12.3584 20.4675C12.0174 20.8084 11.5549 21 11.0727 21C10.5905 21 10.1281 20.8084 9.78708 20.4675C9.4461 20.1265 9.25455 19.664 9.25455 19.1818V19.1C9.24751 18.7991 9.15011 18.5073 8.97501 18.2625C8.79991 18.0176 8.55521 17.8312 8.27273 17.7273C7.99853 17.6063 7.69437 17.5702 7.39947 17.6236C7.10456 17.6771 6.83244 17.8177 6.61818 18.0273L6.56364 18.0818C6.39478 18.2509 6.19425 18.385 5.97353 18.4765C5.7528 18.568 5.51621 18.6151 5.27727 18.6151C5.03834 18.6151 4.80174 18.568 4.58102 18.4765C4.36029 18.385 4.15977 18.2509 3.99091 18.0818C3.82186 17.913 3.68775 17.7124 3.59626 17.4917C3.50476 17.271 3.45766 17.0344 3.45766 16.7955C3.45766 16.5565 3.50476 16.3199 3.59626 16.0992C3.68775 15.8785 3.82186 15.678 3.99091 15.5091L4.04545 15.4545C4.25503 15.2403 4.39562 14.9682 4.4491 14.6733C4.50257 14.3784 4.46647 14.0742 4.34545 13.8C4.23022 13.5311 4.03887 13.3018 3.79497 13.1403C3.55107 12.9788 3.26526 12.8921 2.97273 12.8909H2.81818C2.33597 12.8909 1.87351 12.6994 1.53253 12.3584C1.19156 12.0174 1 11.5549 1 11.0727C1 10.5905 1.19156 10.1281 1.53253 9.78708C1.87351 9.4461 2.33597 9.25455 2.81818 9.25455H2.9C3.2009 9.24751 3.49273 9.15011 3.73754 8.97501C3.98236 8.79991 4.16883 8.55521 4.27273 8.27273C4.39374 7.99853 4.42984 7.69437 4.37637 7.39947C4.3229 7.10456 4.18231 6.83244 3.97273 6.61818L3.91818 6.56364C3.74913 6.39478 3.61503 6.19425 3.52353 5.97353C3.43203 5.7528 3.38493 5.51621 3.38493 5.27727C3.38493 5.03834 3.43203 4.80174 3.52353 4.58102C3.61503 4.36029 3.74913 4.15977 3.91818 3.99091C4.08704 3.82186 4.28757 3.68775 4.50829 3.59626C4.72901 3.50476 4.96561 3.45766 5.20455 3.45766C5.44348 3.45766 5.68008 3.50476 5.9008 3.59626C6.12152 3.68775 6.32205 3.82186 6.49091 3.99091L6.54545 4.04545C6.75971 4.25503 7.03183 4.39562 7.32674 4.4491C7.62164 4.50257 7.9258 4.46647 8.2 4.34545H8.27273C8.54161 4.23022 8.77093 4.03887 8.93245 3.79497C9.09397 3.55107 9.18065 3.26526 9.18182 2.97273V2.81818C9.18182 2.33597 9.37338 1.87351 9.71435 1.53253C10.0553 1.19156 10.5178 1 11 1C11.4822 1 11.9447 1.19156 12.2856 1.53253C12.6266 1.87351 12.8182 2.33597 12.8182 2.81818V2.9C12.8193 3.19253 12.906 3.47834 13.0676 3.72224C13.2291 3.96614 13.4584 4.15749 13.7273 4.27273C14.0015 4.39374 14.3056 4.42984 14.6005 4.37637C14.8954 4.3229 15.1676 4.18231 15.3818 3.97273L15.4364 3.91818C15.6052 3.74913 15.8057 3.61503 16.0265 3.52353C16.2472 3.43203 16.4838 3.38493 16.7227 3.38493C16.9617 3.38493 17.1983 3.43203 17.419 3.52353C17.6397 3.61503 17.8402 3.74913 18.0091 3.91818C18.1781 4.08704 18.3122 4.28757 18.4037 4.50829C18.4952 4.72901 18.5423 4.96561 18.5423 5.20455C18.5423 5.44348 18.4952 5.68008 18.4037 5.9008C18.3122 6.12152 18.1781 6.32205 18.0091 6.49091L17.9545 6.54545C17.745 6.75971 17.6044 7.03183 17.5509 7.32674C17.4974 7.62164 17.5335 7.9258 17.6545 8.2V8.27273C17.7698 8.54161 17.9611 8.77093 18.205 8.93245C18.4489 9.09397 18.7347 9.18065 19.0273 9.18182H19.1818C19.664 9.18182 20.1265 9.37338 20.4675 9.71435C20.8084 10.0553 21 10.5178 21 11C21 11.4822 20.8084 11.9447 20.4675 12.2856C20.1265 12.6266 19.664 12.8182 19.1818 12.8182H19.1C18.8075 12.8193 18.5217 12.906 18.2778 13.0676C18.0339 13.2291 17.8425 13.4584 17.7273 13.7273Z"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  ),
};

export const navItems = [
  {
    name: "Home",
    mobileView: true,
    icon: icons.home,
  },
  {
    name: "Liked Videos",
    mobileView: false,
    icon: icons.like,
  },
  {
    name: "History",
    mobileView: true,
    icon: icons.history,
  },
  {
    name: "My Content",
    mobileView: false,
    icon: icons.myContent,
  },
  {
    name: "Collections",
    mobileView: true,
    icon: icons.collections,
  },
  {
    name: "Subscribers",
    mobileView: true,
    icon: icons.subscribers,
  },
  {
    name: "Support",
    mobileView: false,
    icon: icons.support,
  },
  {
    name: "Settings",
    mobileView: false,
    icon: icons.settings,
  },
];

export const siteNavItems = ["Home", "Products", "Resources", "Pricing"];

export const bottomTotalItems = 2;

export const videos = [
  {
    id: "1",
    videoFile: "",
    thumbnail:
      "https://images.pexels.com/photos/3561339/pexels-photo-3561339.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    title: "JavaScript Fundamentals: Variables and Data Types",
    description:
      "Learn the basics of JavaScript, including variables, data types, and how to use them in your programs.",
    duration: "20:45",
    views: "10.3k",
    isPublished: true,
    time: "44 minutes ago",
    createdAt: "2023-09-22T09:54:42.381Z",
    owner: {
      id: "1",
      username: "codemaster",
      fullName: "Code Master",
      avatar:
        "https://images.pexels.com/photos/3532545/pexels-photo-3532545.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    },
    likeCount: 921,
    dislikeCount: 49,
  },
  {
    id: "2",
    videoFile: "",
    thumbnail:
      "https://images.pexels.com/photos/3532553/pexels-photo-3532553.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    title: "React Hooks Explained: useState and useEffect",
    description:
      "Dive into the world of React hooks and understand how to use useState and useEffect in your components.",
    duration: "15:32",
    views: "8.7k",
    isPublished: false,
    time: "1 hour ago",
    createdAt: "2023-09-21T09:54:42.381Z",
    owner: {
      id: "2",
      username: "reactninja",
      fullName: "React Ninja",
      avatar:
        "https://images.pexels.com/photos/3532552/pexels-photo-3532552.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    },
    likeCount: 2520,
    dislikeCount: 279,
  },
  {
    id: "3",
    videoFile: "",
    thumbnail:
      "https://images.pexels.com/photos/3532555/pexels-photo-3532555.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    title: "Mastering Async Await in JavaScript",
    description:
      "Learn how to work with asynchronous JavaScript using the async/await syntax for cleaner and more readable code.",
    duration: "25:10",
    views: "12.5k",
    isPublished: false,
    time: "2 hours ago",
    createdAt: "2023-09-20T09:54:42.381Z",
    owner: {
      id: "3",
      username: "asyncmasters",
      fullName: "Async Masters",
      avatar:
        "https://images.pexels.com/photos/3532549/pexels-photo-3532549.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    },
    likeCount: 943,
    dislikeCount: 244,
  },
  {
    id: "4",
    videoFile: "",
    thumbnail:
      "https://images.pexels.com/photos/3532550/pexels-photo-3532550.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    title: "Building a ToDo App with React and Context API",
    description:
      "Create a simple ToDo application using React and manage state with the Context API for global data.",
    duration: "30:22",
    views: "15.4k",
    isPublished: false,
    time: "3 hours ago",
    createdAt: "2023-09-19T09:54:42.381Z",
    owner: {
      id: "4",
      username: "codecrafters",
      fullName: "Code Crafters",
      avatar:
        "https://images.pexels.com/photos/2522659/pexels-photo-2522659.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    },
    likeCount: 760,
    dislikeCount: 302,
  },
  {
    id: "5",
    videoFile: "",
    thumbnail:
      "https://images.pexels.com/photos/2522660/pexels-photo-2522660.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    title: "Responsive Web Design with Tailwind CSS",
    description:
      "Explore the power of Tailwind CSS and build a responsive website from scratch.",
    duration: "18:56",
    views: "9.8k",
    isPublished: false,
    time: "4 hours ago",
    createdAt: "2023-09-18T09:54:42.381Z",
    owner: {
      id: "5",
      username: "tailwindpro",
      fullName: "Tailwind Pro",
      avatar:
        "https://images.pexels.com/photos/2519823/pexels-photo-2519823.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    },
    likeCount: 2630,
    dislikeCount: 317,
  },
  {
    id: "6",
    videoFile: "",
    thumbnail:
      "https://images.pexels.com/photos/2519817/pexels-photo-2519817.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    title: "Getting Started with Express.js",
    description:
      "Learn the basics of building web applications with Node.js and Express.js framework.",
    duration: "22:18",
    views: "11.k",
    isPublished: true,
    time: "5 hours ago",
    createdAt: "2023-09-17T09:54:42.381Z",
    owner: {
      id: "6",
      username: "expresslearner",
      fullName: "Express Learner",
      avatar:
        "https://images.pexels.com/photos/2519812/pexels-photo-2519812.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    },
    likeCount: 137,
    dislikeCount: 107,
  },
  {
    id: "7",
    videoFile: "",
    thumbnail:
      "https://images.pexels.com/photos/7775641/pexels-photo-7775641.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    title: "State Management with Redux",
    description:
      "Learn how to manage global state in your React applications using Redux.",
    duration: "27:50",
    views: "13.8k",
    isPublished: false,
    time: "6 hours ago",
    createdAt: "2023-09-16T09:54:42.381Z",
    owner: {
      id: "7",
      username: "reduxmaster",
      fullName: "Redux Master",
      avatar:
        "https://images.pexels.com/photos/18264716/pexels-photo-18264716/free-photo-of-man-people-laptop-internet.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    },
    likeCount: 1250,
    dislikeCount: 386,
  },
  {
    id: "8",
    videoFile: "",
    thumbnail:
      "https://images.pexels.com/photos/1739849/pexels-photo-1739849.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    title: "Building a RESTful API with Node.js and Express",
    description:
      "Learn how to create a RESTful API using Node.js and the Express framework for building web applications.",
    duration: "24:33",
    views: "14.5k",
    isPublished: true,
    time: "7 hours ago",
    createdAt: "2023-09-15T09:54:42.381Z",
    owner: {
      id: "8",
      username: "apibuilder",
      fullName: "API Builder",
      avatar:
        "https://images.pexels.com/photos/1739942/pexels-photo-1739942.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    },
    likeCount: 2773,
    dislikeCount: 50,
  },
  {
    id: "9",
    videoFile: "",
    thumbnail:
      "https://images.pexels.com/photos/1739854/pexels-photo-1739854.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    title: "Introduction to React Native",
    description:
      "Discover how to build mobile applications using React Native for both Android and iOS platforms.",
    duration: "19:58",
    views: "10.9k",
    isPublished: true,
    time: "8 hours ago",
    createdAt: "2023-09-14T09:54:42.381Z",
    owner: {
      id: "9",
      username: "reactnativedev",
      fullName: "React Native Dev",
      avatar:
        "https://images.pexels.com/photos/1739856/pexels-photo-1739856.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    },
    likeCount: 1346,
    dislikeCount: 353,
  },
  {
    id: "10",
    videoFile: "",
    thumbnail:
      "https://images.pexels.com/photos/1144256/pexels-photo-1144256.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    title: "Creating Custom Hooks in React",
    description:
      "Learn how to create and use custom hooks to share logic across multiple React components.",
    duration: "16:37",
    views: "9.3k",
    isPublished: true,
    time: "9 hours ago",
    createdAt: "2023-09-13T09:54:42.381Z",
    owner: {
      id: "10",
      username: "hookmaster",
      fullName: "Hook Master",
      avatar:
        "https://images.pexels.com/photos/1144257/pexels-photo-1144257.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    },
    likeCount: 1578,
    dislikeCount: 294,
  },
  {
    id: "11",
    videoFile: "",
    thumbnail:
      "https://images.pexels.com/photos/1144259/pexels-photo-1144259.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    title: "Advanced CSS: Flexbox and Grid Layouts",
    description:
      "Dive deep into CSS layout techniques with Flexbox and Grid for modern and responsive web design.",
    duration: "28:15",
    views: "16.7k",
    isPublished: false,
    time: "10 hours ago",
    createdAt: "2023-09-12T09:54:42.381Z",
    owner: {
      id: "11",
      username: "csswizard",
      fullName: "CSS Wizard",
      avatar:
        "https://images.pexels.com/photos/1144261/pexels-photo-1144261.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    },
    likeCount: 2506,
    dislikeCount: 87,
  },
  {
    id: "12",
    videoFile: "",
    thumbnail:
      "https://images.pexels.com/photos/1144265/pexels-photo-1144265.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    title: "Introduction to Python Programming",
    description:
      "Get started with Python, a versatile and powerful programming language for beginners and professionals.",
    duration: "26:50",
    views: "17.8k",
    isPublished: false,
    time: "11 hours ago",
    createdAt: "2023-09-11T09:54:42.381Z",
    owner: {
      id: "12",
      username: "pythonista",
      fullName: "Pythonista",
      avatar:
        "https://images.pexels.com/photos/1144268/pexels-photo-1144268.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    },
    likeCount: 1312,
    dislikeCount: 399,
  },
  {
    id: "13",
    videoFile: "",
    thumbnail:
      "https://images.pexels.com/photos/1144260/pexels-photo-1144260.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    title: "Building Scalable Web Applications with Django",
    description:
      "Learn how to build robust and scalable web applications using the Django framework for Python.",
    duration: "32:18",
    views: "18.9M",
    isPublished: true,
    time: "12 hours ago",
    createdAt: "2023-09-10T09:54:42.381Z",
    owner: {
      id: "13",
      username: "djangomaster",
      fullName: "Django Master",
      avatar:
        "https://images.pexels.com/photos/1144269/pexels-photo-1144269.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    },
    likeCount: 553,
    dislikeCount: 219,
  },
  {
    id: "14",
    videoFile: "",
    thumbnail:
      "https://images.pexels.com/photos/1144263/pexels-photo-1144263.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    title: "Deep Dive into Machine Learning Algorithms",
    description:
      "Explore the inner workings of popular machine learning algorithms and their applications.",
    duration: "34:22",
    views: "19K",
    isPublished: false,
    time: "13 hours ago",
    createdAt: "2023-09-09T09:54:42.381Z",
    owner: {
      id: "14",
      username: "mlgeek",
      fullName: "ML Geek",
      avatar:
        "https://images.pexels.com/photos/1144275/pexels-photo-1144275.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    },
    likeCount: 2061,
    dislikeCount: 359,
  },
  {
    id: "15",
    videoFile: "",
    thumbnail:
      "https://images.pexels.com/photos/1144276/pexels-photo-1144276.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    title: "Creating Interactive UIs with React and D3",
    description:
      "Learn how to build dynamic and interactive user interfaces with React and the D3.js data visualization library.",
    duration: "29:30",
    views: "20.1k",
    isPublished: true,
    time: "14 hours ago",
    createdAt: "2023-09-08T09:54:42.381Z",
    owner: {
      id: "15",
      username: "reactd3",
      fullName: "ReactD3",
      avatar:
        "https://images.pexels.com/photos/1144277/pexels-photo-1144277.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    },
    likeCount: 1165,
    dislikeCount: 10,
  },
  {
    id: "16",
    videoFile: "",
    thumbnail:
      "https://images.pexels.com/photos/1144274/pexels-photo-1144274.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    title: "Node.js Authentication with Passport.js",
    description:
      "Learn how to implement user authentication in Node.js applications using the Passport.js middleware.",
    duration: "26:58",
    views: "21.2k",
    isPublished: true,
    time: "15 hours ago",
    createdAt: "2023-09-07T09:54:42.381Z",
    owner: {
      id: "16",
      username: "passportpro",
      fullName: "Passport Pro",
      avatar:
        "https://images.pexels.com/photos/1144270/pexels-photo-1144270.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    },
    likeCount: 1812,
    dislikeCount: 347,
  },
  {
    id: "17",
    videoFile: "",
    thumbnail:
      "https://images.pexels.com/photos/1144280/pexels-photo-1144280.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    title: "Creating RESTful APIs with Django Rest Framework",
    description:
      "Learn how to build RESTful APIs with Django Rest Framework for building web applications.",
    duration: "30:42",
    views: "22.3k",
    isPublished: false,
    time: "16 hours ago",
    createdAt: "2023-09-06T09:54:42.381Z",
    owner: {
      id: "17",
      username: "djangorestapi",
      fullName: "Django Rest API",
      avatar:
        "https://images.pexels.com/photos/1144235/pexels-photo-1144235.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    },
    likeCount: 1698,
    dislikeCount: 159,
  },
  {
    id: "18",
    videoFile: "",
    thumbnail:
      "https://images.pexels.com/photos/1144282/pexels-photo-1144282.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    title: "Advanced JavaScript: Closures and Prototypes",
    description:
      "Dive deep into JavaScript concepts like closures and prototypes for more advanced programming.",
    duration: "35:28",
    views: "23.4k",
    isPublished: false,
    time: "17 hours ago",
    createdAt: "2023-09-05T09:54:42.381Z",
    owner: {
      id: "18",
      username: "jsninja",
      fullName: "JS Ninja",
      avatar:
        "https://images.pexels.com/photos/1144232/pexels-photo-1144232.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    },
    likeCount: 2393,
    dislikeCount: 146,
  },
  {
    id: "19",
    videoFile: "",
    thumbnail:
      "https://images.pexels.com/photos/1144231/pexels-photo-1144231.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    title: "Data Visualization with Tableau",
    description:
      "Learn how to create stunning visualizations and dashboards using Tableau for data analysis.",
    duration: "32:14",
    views: "24.5k",
    isPublished: true,
    time: "18 hours ago",
    createdAt: "2023-09-04T09:54:42.381Z",
    owner: {
      id: "19",
      username: "tableaumaster",
      fullName: "Tableau Master",
      avatar:
        "https://images.pexels.com/photos/18264716/pexels-photo-18264716/free-photo-of-man-people-laptop-internet.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    },
    likeCount: 2137,
    dislikeCount: 280,
  },
  {
    id: "20",
    videoFile: "",
    thumbnail:
      "https://images.pexels.com/photos/1144250/pexels-photo-1144250.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    title: "Building Real-Time Applications with Socket.IO",
    description:
      "Learn how to create real-time applications using Socket.IO for seamless communication between clients and servers.",
    duration: "27:37",
    views: "25.6k",
    isPublished: true,
    time: "19 hours ago",
    createdAt: "2023-09-03T09:54:42.381Z",
    owner: {
      id: "20",
      username: "socketioexpert",
      fullName: "Socket.IO Expert",
      avatar:
        "https://images.pexels.com/photos/18264716/pexels-photo-18264716/free-photo-of-man-people-laptop-internet.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    },
    likeCount: 2991,
    dislikeCount: 155,
  },
  {
    id: "21",
    videoFile: "",
    thumbnail:
      "https://images.pexels.com/photos/1144251/pexels-photo-1144251.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    title: "GraphQL: Building APIs with Query Language",
    description:
      "Learn how to build efficient APIs using GraphQL and leverage the power of query language for data retrieval.",
    duration: "29:48",
    views: "26.7k",
    isPublished: false,
    time: "20 hours ago",
    createdAt: "2023-09-02T09:54:42.381Z",
    owner: {
      id: "21",
      username: "graphqlpro",
      fullName: "GraphQL Pro",
      avatar:
        "https://images.pexels.com/photos/18264716/pexels-photo-18264716/free-photo-of-man-people-laptop-internet.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    },
    likeCount: 1095,
    dislikeCount: 359,
  },
  {
    id: "22",
    videoFile: "",
    thumbnail:
      "https://images.pexels.com/photos/1115890/pexels-photo-1115890.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    title: "Full-Stack Development with MERN",
    description:
      "Master full-stack development with the MERN (MongoDB, Express, React, Node.js) stack.",
    duration: "33:15",
    views: "27.8k",
    isPublished: false,
    time: "21 hours ago",
    createdAt: "2023-09-01T09:54:42.381Z",
    owner: {
      id: "22",
      username: "mernstack",
      fullName: "MERN Stack",
      avatar:
        "https://images.pexels.com/photos/1115822/pexels-photo-1115822.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    },
    likeCount: 2375,
    dislikeCount: 152,
  },
  {
    id: "23",
    videoFile: "",
    thumbnail:
      "https://images.pexels.com/photos/1115824/pexels-photo-1115824.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    title: "Advanced CSS: Animations and Transitions",
    description:
      "Learn how to create captivating animations and transitions using CSS for dynamic web experiences.",
    duration: "31:55",
    views: "28.9k",
    isPublished: true,
    time: "22 hours ago",
    createdAt: "2023-08-31T09:54:42.381Z",
    owner: {
      id: "23",
      username: "cssanimations",
      fullName: "CSS Animations",
      avatar:
        "https://images.pexels.com/photos/18264716/pexels-photo-18264716/free-photo-of-man-people-laptop-internet.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    },
    likeCount: 904,
    dislikeCount: 324,
  },
  {
    id: "24",
    videoFile: "",
    thumbnail:
      "https://images.pexels.com/photos/1115821/pexels-photo-1115821.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    title: "Machine Learning for Image Recognition",
    description:
      "Dive into the world of image recognition using machine learning models for object detection.",
    duration: "36:40",
    views: "29M",
    isPublished: false,
    time: "23 hours ago",
    createdAt: "2023-08-30T09:54:42.381Z",
    owner: {
      id: "24",
      username: "mlimage",
      fullName: "ML Image",
      avatar:
        "https://images.pexels.com/photos/18264716/pexels-photo-18264716/free-photo-of-man-people-laptop-internet.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    },
    likeCount: 912,
    dislikeCount: 97,
  },
  {
    id: "25",
    videoFile: "",
    thumbnail:
      "https://images.pexels.com/photos/1115808/pexels-photo-1115808.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    title: "Advanced React Patterns",
    description:
      "Explore advanced patterns and techniques for building scalable and maintainable React applications.",
    duration: "30:25",
    views: "30.1k",
    isPublished: true,
    time: "1 day ago",
    createdAt: "2023-08-29T09:54:42.381Z",
    owner: {
      id: "25",
      username: "reactpatterns",
      fullName: "React Patterns",
      avatar:
        "https://images.pexels.com/photos/18264716/pexels-photo-18264716/free-photo-of-man-people-laptop-internet.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    },
    likeCount: 1391,
    dislikeCount: 319,
  },
];

export const videoDetails = {
  id: "1",
  videoFile:
    "https://res.cloudinary.com/dfw5nnic5/video/upload/v1695117968/Sample_1280x720_mp4_b4db0s.mp4",
  videoType: "video/mp4",
  thumbnail:
    "https://images.pexels.com/photos/1115808/pexels-photo-1115808.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
  title: "Advanced React Patterns",
  description:
    '🚀 Dive into the world of React with our latest tutorial series: "Advanced React Patterns"! 🛠️ Whether you\'re a seasoned developer or just starting out, this series is designed to elevate your React skills to the next level.',
  duration: "30:25",
  views: "30,164",
  likeCount: 3050,
  dislikeCount: 20,
  commentCount: 573,
  isPublished: true,
  createdAt: "18 hours ago",
  updatedAt: new Date(),
  liked: false,
  disliked: false,
  owner: {
    id: "25",
    username: "reactpatterns",
    fullName: "React Patterns",
    avatar:
      "https://images.pexels.com/photos/18264716/pexels-photo-18264716/free-photo-of-man-people-laptop-internet.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    subscribers: "757K",
  },
  comments: [
    {
      id: "1",
      video: "1",
      content:
        "This series is exactly what I've been looking for! Excited to dive into these advanced React patterns. Thanks for putting this together!",
      createdAt: "17 hour ago",
      owner: {
        id: "25",
        username: "sarahjv",
        fullName: "Sarah Johnson",
        avatar:
          "https://images.pexels.com/photos/18148932/pexels-photo-18148932/free-photo-of-woman-reading-book-on-a-bench.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      },
    },
    {
      id: "2",
      video: "1",
      content:
        "Render props have always been a bit tricky for me. Can't wait to see how this series breaks it down. Thanks for sharing!",
      createdAt: "5 minutes ago",
      owner: {
        id: "25",
        username: "mikerod",
        fullName: "Michael Rodriguez",
        avatar:
          "https://images.pexels.com/photos/18107025/pexels-photo-18107025/free-photo-of-man-reading-newspaper.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      },
    },
    {
      id: "3",
      video: "1",
      content:
        "Higher-order components have been a mystery to me for far too long. Looking forward to demystifying them with this series. Thanks!",
      createdAt: "1 hour ago",
      owner: {
        id: "25",
        username: "emilyt",
        fullName: "Emily Turner",
        avatar:
          "https://images.pexels.com/photos/18096595/pexels-photo-18096595/free-photo-of-music-on-street.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      },
    },
    {
      id: "4",
      video: "1",
      content:
        "Compound components are a game-changer for UI development. Can't wait to learn more about them. Great work on this series!",
      createdAt: "3 hour ago",
      owner: {
        id: "25",
        username: "davidc",
        fullName: "David Chen",
        avatar:
          "https://images.pexels.com/photos/18094275/pexels-photo-18094275.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      },
    },
    {
      id: "5",
      video: "1",
      content:
        "Controlled vs. uncontrolled components - finally! This topic has always confused me. Thanks for breaking it down!",
      createdAt: "12 hour ago",
      owner: {
        id: "25",
        username: "alex_p",
        fullName: "Alex Parker",
        avatar:
          "https://images.pexels.com/photos/13847596/pexels-photo-13847596.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      },
    },
    {
      id: "6",
      video: "1",
      content:
        "This series is a goldmine for React developers! Compound components are something I've been eager to master. Thanks for this!",
      createdAt: "5 hour ago",
      owner: {
        id: "25",
        username: "jessicalee",
        fullName: "Jessica Lee",
        avatar:
          "https://images.pexels.com/photos/7775637/pexels-photo-7775637.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      },
    },
    {
      id: "7",
      video: "1",
      content:
        "This is exactly what I needed to take my React skills to the next level. Looking forward to diving into the render props section!",
      createdAt: "Just now",
      owner: {
        id: "25",
        username: "ryanjax",
        fullName: "Ryan Jackson",
        avatar:
          "https://images.pexels.com/photos/3532545/pexels-photo-3532545.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      },
    },
    {
      id: "8",
      video: "1",
      content:
        "This series looks amazing! I'm especially excited to learn more about controlled vs. uncontrolled components. Thanks for sharing!",
      createdAt: "1 minutes ago",
      owner: {
        id: "25",
        username: "lauraw",
        fullName: "Laura Williams",
        avatar:
          "https://images.pexels.com/photos/3532552/pexels-photo-3532552.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      },
    },
  ],
};

export const playlistList = [
  {
    id: "1",
    videos: videos,
    name: "React Mastery",
    views: "100K",
    description:
      "Master the art of building dynamic user interfaces with React.",
    createdAt: "2 hours ago",
    owner: {
      id: "25",
      username: "reactpatterns",
      fullName: "React Patterns",
      avatar:
        "https://images.pexels.com/photos/18264716/pexels-photo-18264716/free-photo-of-man-people-laptop-internet.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      subscribers: "757K",
    },
  },
  {
    id: "2",
    videos: [videos[3], videos[4], videos[5]],
    name: "JavaScript Fundamentals",
    views: "120K",
    description:
      "Learn the core concepts and fundamentals of JavaScript programming language.",
    createdAt: "3 hours ago",
    owner: {
      id: "25",
      username: "reactpatterns",
      fullName: "React Patterns",
      avatar:
        "https://images.pexels.com/photos/18264716/pexels-photo-18264716/free-photo-of-man-people-laptop-internet.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      subscribers: "757K",
    },
  },
  {
    id: "3",
    videos: [videos[6], videos[7], videos[8]],
    name: "TypeScript Essentials",
    views: "90K",
    description:
      "Dive into TypeScript for enhanced type safety and scalable JavaScript applications.",
    createdAt: "4 hours ago",
    owner: {
      id: "25",
      username: "reactpatterns",
      fullName: "React Patterns",
      avatar:
        "https://images.pexels.com/photos/18264716/pexels-photo-18264716/free-photo-of-man-people-laptop-internet.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      subscribers: "757K",
    },
  },
  {
    id: "4",
    videos: [videos[9], videos[10], videos[11]],
    name: "React State Management",
    views: "80K",
    description:
      "Explore various state management techniques in React applications.",
    createdAt: "5 hours ago",
    owner: {
      id: "25",
      username: "reactpatterns",
      fullName: "React Patterns",
      avatar:
        "https://images.pexels.com/photos/18264716/pexels-photo-18264716/free-photo-of-man-people-laptop-internet.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      subscribers: "757K",
    },
  },
  {
    id: "5",
    videos: [videos[12], videos[13], videos[14]],
    name: "Advanced JavaScript Techniques",
    views: "110K",
    description:
      "Delve into advanced JavaScript concepts and techniques for professional-level programming.",
    createdAt: "6 hours ago",
    owner: {
      id: "25",
      username: "reactpatterns",
      fullName: "React Patterns",
      avatar:
        "https://images.pexels.com/photos/18264716/pexels-photo-18264716/free-photo-of-man-people-laptop-internet.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      subscribers: "757K",
    },
  },
];

export const tweets = [
  {
    id: "1",
    likeCount: 425,
    dislikeCount: 87,
    liked: true,
    disliked: false,
    content:
      "Exploring the latest features in JavaScript ES11! The language keeps evolving. 💡 #JavaScript #ES11",
    createdAt: "5 hours ago",
    owner: {
      id: "25",
      username: "reactpatterns",
      fullName: "React Patterns",
      avatar:
        "https://images.pexels.com/photos/1115816/pexels-photo-1115816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      subscribers: "757K",
    },
  },
  {
    id: "2",
    likeCount: 425,
    dislikeCount: 87,
    liked: false,
    disliked: false,
    content:
      "Embracing the benefits of TypeScript for stronger, more reliable code. 🚀 #TypeScript #Programming",
    createdAt: "6 hours ago",
    owner: {
      id: "25",
      username: "reactpatterns",
      fullName: "React Patterns",
      avatar:
        "https://images.pexels.com/photos/1115816/pexels-photo-1115816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      subscribers: "757K",
    },
  },
  {
    id: "3",
    likeCount: 425,
    dislikeCount: 87,
    liked: false,
    disliked: false,
    content:
      "Styling made easy with Tailwind CSS! Rapidly build beautiful, responsive interfaces. 🎨 #TailwindCSS #WebDev",
    createdAt: "7 hours ago",
    owner: {
      id: "25",
      username: "reactpatterns",
      fullName: "React Patterns",
      avatar:
        "https://images.pexels.com/photos/1115816/pexels-photo-1115816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      subscribers: "757K",
    },
  },
  {
    id: "4",
    likeCount: 425,
    dislikeCount: 87,
    liked: true,
    disliked: false,
    content:
      "Building dynamic user interfaces with React! The go-to library for modern web development. 🚀 #React #WebDev",
    createdAt: "8 hours ago",
    owner: {
      id: "25",
      username: "reactpatterns",
      fullName: "React Patterns",
      avatar:
        "https://images.pexels.com/photos/1115816/pexels-photo-1115816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      subscribers: "757K",
    },
  },
  {
    id: "5",
    likeCount: 425,
    dislikeCount: 87,
    liked: false,
    disliked: true,
    content:
      "Next.js makes server-side rendering a breeze! Boost your React app's performance with ease. 🚀 #Nextjs #React",
    createdAt: "9 hours ago",
    owner: {
      id: "25",
      username: "reactpatterns",
      fullName: "React Patterns",
      avatar:
        "https://images.pexels.com/photos/1115816/pexels-photo-1115816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      subscribers: "757K",
    },
  },
  {
    id: "6",
    likeCount: 425,
    dislikeCount: 87,
    liked: true,
    disliked: false,
    content:
      "Dive into advanced JavaScript concepts like closures and prototypes. Level up your coding skills! 🔍 #AdvancedJS #CodingTips",
    createdAt: "10 hours ago",
    owner: {
      id: "25",
      username: "reactpatterns",
      fullName: "React Patterns",
      avatar:
        "https://images.pexels.com/photos/1115816/pexels-photo-1115816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      subscribers: "757K",
    },
  },
  {
    id: "7",
    likeCount: 425,
    dislikeCount: 87,
    liked: true,
    disliked: false,
    content:
      "Mastering TypeScript: From basics to advanced concepts. Boost your development workflow with strong typing! 🚀 #TypeScript #Development",
    createdAt: "11 hours ago",
    owner: {
      id: "26",
      username: "tscripter",
      fullName: "TS Scripter",
      avatar:
        "https://images.pexels.com/photos/1115816/pexels-photo-1115816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      subscribers: "420K",
    },
  },
  {
    id: "8",
    likeCount: 425,
    dislikeCount: 87,
    liked: true,
    disliked: false,
    content:
      "Simplify your CSS workflow with Tailwind CSS. Effortless styling for modern web development! 🎨 #TailwindCSS #WebDev",
    createdAt: "12 hours ago",
    owner: {
      id: "27",
      username: "tailwiz",
      fullName: "Tailwind Wizard",
      avatar:
        "https://images.pexels.com/photos/1115816/pexels-photo-1115816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      subscribers: "600K",
    },
  },
  {
    id: "9",
    likeCount: 425,
    dislikeCount: 87,
    liked: true,
    disliked: false,
    content:
      "Building dynamic UIs with React - A comprehensive guide for developers. Get started with React today! 🚀 #React #WebDevelopment",
    createdAt: "13 hours ago",
    owner: {
      id: "25",
      username: "reactpatterns",
      fullName: "React Patterns",
      avatar:
        "https://images.pexels.com/photos/1115816/pexels-photo-1115816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      subscribers: "757K",
    },
  },
  {
    id: "10",
    likeCount: 425,
    dislikeCount: 87,
    liked: true,
    disliked: false,
    content:
      "Optimize server-side rendering with Next.js. Improve performance and SEO for your React applications! 🚀 #Nextjs #React",
    createdAt: "14 hours ago",
    owner: {
      id: "25",
      username: "reactpatterns",
      fullName: "React Patterns",
      avatar:
        "https://images.pexels.com/photos/1115816/pexels-photo-1115816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      subscribers: "757K",
    },
  },
];

export const channels = videos.map((video, i) => ({
  ...video.owner,
  subscribers: 20 * (i + 1) + "K",
  isSubscribed: i % 2 == 0,
}));


================================================
FILE: src/components/templates/youtube/delete-video.jsx
================================================
"use client";
import {
  EyeIcon,
  HeartIcon,
  MagnifyingGlassIcon,
  PencilIcon,
  PlusIcon,
  TrashIcon,
  UserIcon,
  XCircleIcon,
  XMarkIcon,
} from "@heroicons/react/24/outline";
import React from "react";
import { navItems, logo, videos } from "./data";
import { classNames } from "@/utils";

const DeleteVideo = () => {
  return (
    <div className="h-screen overflow-y-auto bg-[#121212] text-white">
      <header className="sticky inset-x-0 top-0 z-50 w-full border-b border-white bg-[#121212] px-4">
        <nav className="mx-auto flex max-w-7xl items-center py-2">
          <div className="mr-4 w-12 shrink-0 sm:w-16">{logo}</div>
          <div className="relative mx-auto hidden w-full max-w-md overflow-hidden sm:block">
            <input
              className="w-full border bg-transparent py-1 pl-8 pr-3 placeholder-white outline-none sm:py-2"
              placeholder="Search"
            />
            <span className="absolute left-2.5 top-1/2 inline-block -translate-y-1/2">
              <MagnifyingGlassIcon className=" h-4 w-4" />
            </span>
          </div>
          <button className="ml-auto sm:hidden">
            <MagnifyingGlassIcon className=" h-6 w-6" />
          </button>
          <button className="group peer ml-4 flex w-6 shrink-0 flex-wrap gap-y-1.5 sm:hidden">
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-2/3 bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
          </button>
          <div className="fixed inset-y-0 right-0 flex w-full max-w-xs shrink-0 translate-x-full flex-col border-l border-white bg-[#121212] duration-200 hover:translate-x-0 peer-focus:translate-x-0 sm:static sm:ml-4 sm:w-auto sm:translate-x-0 sm:border-none">
            <div className="relative flex w-full items-center justify-between border-b border-white px-4 py-2 sm:hidden">
              <span className="inline-block w-12">{logo}</span>
              <button className="inline-block w-8">
                <XCircleIcon />
              </button>
            </div>
            <ul className="my-4 flex w-full flex-wrap gap-2 px-4 sm:hidden">
              {navItems
                .filter((item) => !item.mobileView)
                .map((item) => (
                  <li key={item.name} className="w-full">
                    <button className="flex w-full items-center justify-start gap-x-4 border border-white px-4 py-1.5 text-left hover:bg-[#ae7aff] hover:text-black focus:border-[#ae7aff] focus:bg-[#ae7aff] focus:text-black">
                      <span className="inline-block w-full max-w-[20px] group-hover:mr-4 lg:mr-4">
                        {item.icon}
                      </span>
                      <span>{item.name}</span>
                    </button>
                  </li>
                ))}
            </ul>

            <div className="mb-8 mt-auto px-4 sm:mb-0 sm:mt-0 sm:px-0">
              <button className="flex w-full gap-4 text-left sm:items-center">
                <img
                  src="https://images.pexels.com/photos/1115816/pexels-photo-1115816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                  alt="React-Patterns"
                  className="h-16 w-16 shrink-0 rounded-full sm:h-12 sm:w-12"
                />

                <div className="w-full pt-2 sm:hidden">
                  <h6 className="font-semibold">React Patterns</h6>
                  <p className="text-sm text-gray-300">@reactpatterns</p>
                </div>
              </button>
            </div>
          </div>
        </nav>
      </header>
      <div className="relative flex min-h-[calc(100vh-66px)] sm:min-h-[calc(100vh-82px)]">
        <div className="mx-auto flex w-full max-w-7xl flex-col gap-y-6 px-4 py-8">
          <div className="flex flex-wrap justify-between gap-4">
            <div className="block">
              <h1 className="text-2xl font-bold">
                Welcome Back, React Patterns
              </h1>
              <p className="text-sm text-gray-300">
                Seamless Video Management, Elevated Results.
              </p>
            </div>
            <div className="block">
              <button className="inline-flex items-center gap-x-2 bg-[#ae7aff] px-3 py-2 font-semibold text-black">
                <PlusIcon className="h-5 w-5" strokeWidth={2} /> Upload video
              </button>
            </div>
          </div>
          <div className="grid grid-cols-[repeat(auto-fit,_minmax(300px,_1fr))] gap-4">
            {[
              { Icon: EyeIcon, title: "Total views", count: "221,234" },
              { Icon: UserIcon, title: "Total subscribers", count: "4,053" },
              { Icon: HeartIcon, title: "Total likes", count: "63,021" },
            ].map(({ title, Icon, count }) => (
              <div key={title} className="border p-4">
                <div className="mb-4 block">
                  <span className="inline-block h-7 w-7 rounded-full bg-[#E4D3FF] p-1 text-[#ae7aff]">
                    <Icon />
                  </span>
                </div>
                <h6 className="text-gray-300">{title}</h6>
                <p className="text-3xl font-semibold">{count}</p>
              </div>
            ))}
          </div>
          <div className="w-full overflow-auto">
            <table className="w-full min-w-[1200px] border-collapse border text-white">
              <thead>
                <tr>
                  <th className="border-collapse border-b p-4">Status</th>
                  <th className="border-collapse border-b p-4">Status</th>
                  <th className="border-collapse border-b p-4">Uploaded</th>
                  <th className="border-collapse border-b p-4">Rating</th>
                  <th className="border-collapse border-b p-4">
                    Date uploaded
                  </th>
                  <th className="border-collapse border-b p-4"></th>
                </tr>
              </thead>
              <tbody>
                {videos.map((video) => (
                  <tr key={video.id} className="group border">
                    <td className="border-collapse border-b border-gray-600 px-4 py-3 group-last:border-none">
                      <div className="flex justify-center">
                        <label
                          htmlFor={"vid-pub-" + video.id}
                          className="relative inline-block w-12 cursor-pointer overflow-hidden"
                        >
                          <input
                            type="checkbox"
                            id={"vid-pub-" + video.id}
                            className="peer sr-only"
                            defaultChecked={video.isPublished}
                          />
                          <span className="inline-block h-6 w-full rounded-2xl bg-gray-200 duration-200 after:absolute after:bottom-1 after:left-1 after:top-1 after:h-4 after:w-4 after:rounded-full after:bg-black after:duration-200 peer-checked:bg-[#ae7aff] peer-checked:after:left-7"></span>
                        </label>
                      </div>
                    </td>
                    <td className="border-collapse border-b border-gray-600 px-4 py-3 group-last:border-none">
                      <div className="flex justify-center">
                        <span
                          className={classNames(
                            "inline-block rounded-2xl border px-1.5 py-0.5",
                            video.isPublished
                              ? "border-green-600 text-green-600"
                              : "border-orange-600 text-orange-600",
                          )}
                        >
                          {video.isPublished ? "Published" : "Unpublished"}
                        </span>
                      </div>
                    </td>
                    <td className="border-collapse border-b border-gray-600 px-4 py-3 group-last:border-none">
                      <div className="flex items-center gap-4">
                        <img
                          className="h-10 w-10 rounded-full"
                          src={video.owner.avatar}
                          alt={video.owner.fullName}
                        />
                        <h3 className="font-semibold">{video.title}</h3>
                      </div>
                    </td>
                    <td className="border-collapse border-b border-gray-600 px-4 py-3 group-last:border-none">
                      <div className="flex justify-center gap-4">
                        <span className="inline-block rounded-xl bg-green-200 px-1.5 py-0.5 text-green-700">
                          {video.likeCount} likes
                        </span>
                        <span className="inline-block rounded-xl bg-red-200 px-1.5 py-0.5 text-red-700">
                          {video.dislikeCount} dislikes
                        </span>
                      </div>
                    </td>
                    <td className="border-collapse border-b border-gray-600 px-4 py-3 group-last:border-none">
                      {new Date(video.createdAt).toLocaleDateString()}
                    </td>
                    <td className="border-collapse border-b border-gray-600 px-4 py-3 group-last:border-none">
                      <div className="flex gap-4">
                        <button className="h-5 w-5 hover:text-[#ae7aff]">
                          <TrashIcon />
                        </button>
                        <button className="h-5 w-5 hover:text-[#ae7aff]">
                          <PencilIcon />
                        </button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
        {/* Modal Popup */}
        <div className="fixed inset-0 top-[calc(66px)] z-10 flex flex-col bg-black/50 px-4 pb-[86px] pt-4 sm:top-[calc(82px)] sm:px-14 sm:py-8">
          <div className="mx-auto w-full max-w-lg overflow-auto rounded-lg border border-gray-700 bg-[#121212] p-4">
            <div className="mb-6 flex items-start gap-4">
              <span className="inline-block h-8 w-8 shrink-0 rounded-full bg-red-200 p-1 text-red-700">
                <TrashIcon />
              </span>
              <h2 className="text-xl font-semibold">
                Delete Video
                <span className="block text-sm text-gray-300">
                  Are you sure you want to delete this video? Once its deleted,
                  you will not be able to recover it.
                </span>
              </h2>
              <button className="ml-auto h-6 w-6 shrink-0">
                <XMarkIcon />
              </button>
            </div>

            <div className="grid grid-cols-2 gap-4">
              <button className="col-span-2 border px-4 py-3 sm:col-span-1">
                Cancel
              </button>
              <button className="col-span-2 bg-red-700 px-4 py-3 disabled:bg-[#E4D3FF] sm:col-span-1">
                Delete
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default DeleteVideo;


================================================
FILE: src/components/templates/youtube/edit-channel-info.jsx
================================================
"use client";
import { classNames } from "@/utils";
import React from "react";
import {
  ClockIcon,
  ListBulletIcon,
  MagnifyingGlassIcon,
  XCircleIcon,
} from "@heroicons/react/24/outline";
import { bottomTotalItems, navItems, logo } from "./data";

const EditChannelInfo = () => {
  return (
    <div className="h-screen overflow-y-auto bg-[#121212] text-white">
      <header className="sticky inset-x-0 top-0 z-50 w-full border-b border-white bg-[#121212] px-4">
        <nav className="mx-auto flex max-w-7xl items-center py-2">
          <div className="mr-4 w-12 shrink-0 sm:w-16">{logo}</div>
          <div className="relative mx-auto hidden w-full max-w-md overflow-hidden sm:block">
            <input
              className="w-full border bg-transparent py-1 pl-8 pr-3 placeholder-white outline-none sm:py-2"
              placeholder="Search"
            />
            <span className="absolute left-2.5 top-1/2 inline-block -translate-y-1/2">
              <MagnifyingGlassIcon className=" h-4 w-4" />
            </span>
          </div>
          <button className="ml-auto sm:hidden">
            <MagnifyingGlassIcon className=" h-6 w-6" />
          </button>
          <button className="group peer ml-4 flex w-6 shrink-0 flex-wrap gap-y-1.5 sm:hidden">
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-2/3 bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
          </button>
          <div className="fixed inset-y-0 right-0 flex w-full max-w-xs shrink-0 translate-x-full flex-col border-l border-white bg-[#121212] duration-200 hover:translate-x-0 peer-focus:translate-x-0 sm:static sm:ml-4 sm:w-auto sm:translate-x-0 sm:border-none">
            <div className="relative flex w-full items-center justify-between border-b border-white px-4 py-2 sm:hidden">
              <span className="inline-block w-12">{logo}</span>
              <button className="inline-block w-8">
                <XCircleIcon />
              </button>
            </div>
            <ul className="my-4 flex w-full flex-wrap gap-2 px-4 sm:hidden">
              {navItems
                .filter((item) => !item.mobileView)
                .map((item) => (
                  <li key={item.name} className="w-full">
                    <button className="flex w-full items-center justify-start gap-x-4 border border-white px-4 py-1.5 text-left hover:bg-[#ae7aff] hover:text-black focus:border-[#ae7aff] focus:bg-[#ae7aff] focus:text-black">
                      <span className="inline-block w-full max-w-[20px] group-hover:mr-4 lg:mr-4">
                        {item.icon}
                      </span>
                      <span>{item.name}</span>
                    </button>
                  </li>
                ))}
            </ul>

            <div className="mb-8 mt-auto px-4 sm:mb-0 sm:mt-0 sm:px-0">
              <button className="flex w-full gap-4 text-left sm:items-center">
                <img
                  src="https://images.pexels.com/photos/1115816/pexels-photo-1115816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                  alt="React-Patterns"
                  className="h-16 w-16 shrink-0 rounded-full sm:h-12 sm:w-12"
                />

                <div className="w-full pt-2 sm:hidden">
                  <h6 className="font-semibold">React Patterns</h6>
                  <p className="text-sm text-gray-300">@reactpatterns</p>
                </div>
              </button>
            </div>
          </div>
        </nav>
      </header>
      <div className="flex min-h-[calc(100vh-66px)] sm:min-h-[calc(100vh-82px)]">
        <aside className="group fixed inset-x-0 bottom-0 z-40 w-full shrink-0 border-t border-white bg-[#121212] px-2 py-2 sm:absolute sm:inset-y-0 sm:max-w-[70px] sm:border-r sm:border-t-0 sm:py-6 sm:hover:max-w-[250px] lg:sticky lg:max-w-[250px]">
          <ul className="flex justify-around gap-y-2 sm:sticky sm:top-[106px] sm:min-h-[calc(100vh-130px)] sm:flex-col">
            {navItems.map((item, i, arr) => (
              <li
                key={item.name}
                className={classNames(
                  item.mobileView ? "" : "hidden sm:block",
                  arr.length - i === bottomTotalItems ? "mt-auto" : "",
                )}
              >
                <button className="flex flex-col items-center justify-center border-white py-1 focus:text-[#ae7aff] sm:w-full sm:flex-row sm:border sm:p-1.5 sm:hover:bg-[#ae7aff] sm:hover:text-black sm:focus:border-[#ae7aff] sm:focus:bg-[#ae7aff] sm:focus:text-black sm:group-hover:justify-start sm:group-hover:px-4 lg:justify-start lg:px-4">
                  <span className="inline-block w-5 shrink-0 sm:group-hover:mr-4 lg:mr-4">
                    {item.icon}
                  </span>
                  <span className="block sm:hidden sm:group-hover:inline lg:inline">
                    {item.name}
                  </span>
                </button>
              </li>
            ))}
          </ul>
        </aside>
        <section className="w-full pb-[70px] sm:ml-[70px] sm:pb-0 lg:ml-0">
          <div className="relative min-h-[150px] w-full pt-[16.28%]">
            <div className="absolute inset-0 overflow-hidden">
              <img
                src="https://images.pexels.com/photos/1092424/pexels-photo-1092424.jpeg?auto=compress"
                alt="cover-photo"
              />
            </div>
          </div>
          <div className="px-4 pb-4">
            <div className="flex flex-wrap gap-4 pb-4 pt-6">
              <div className="relative -mt-12 inline-block h-28 w-28 shrink-0 overflow-hidden rounded-full border-2">
                <img
                  src="https://images.pexels.com/photos/1115816/pexels-photo-1115816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                  alt="Channel"
                  className="h-full w-full"
                />
              </div>

              <div className="mr-auto inline-block">
                <h1 className="font-bolg text-xl">React Patterns</h1>
                <p className="text-sm text-gray-400">@reactpatterns</p>
              </div>

              <div className="inline-block">
                <button className="group/btn mr-1 flex w-full items-center gap-x-2 bg-[#ae7aff] px-3 py-2 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e] sm:w-auto">
                  View channel
                </button>
              </div>
            </div>

            <ul className="no-scrollbar sticky top-[66px] z-[2] flex flex-row gap-x-2 overflow-auto border-b-2 border-gray-400 bg-[#121212] py-2 sm:top-[82px]">
              <li className="w-full">
                <button className="w-full border-b-2 border-transparent px-3 py-1.5 text-gray-400">
                  Personal Information
                </button>
              </li>
              <li className="w-full">
                <button className="w-full border-b-2 border-[#ae7aff] bg-white px-3 py-1.5 text-[#ae7aff]">
                  Channel Information
                </button>
              </li>
              <li className="w-full">
                <button className="w-full border-b-2 border-transparent px-3 py-1.5 text-gray-400">
                  Change Password
                </button>
              </li>
            </ul>

            <div className="flex flex-wrap justify-center gap-y-4 py-4">
              <div className="w-full sm:w-1/2 lg:w-1/3">
                <h5 className="font-semibold">Channel Info</h5>
                <p className="text-gray-300">
                  Update your Channel details here.
                </p>
              </div>
              <div className="w-full sm:w-1/2 lg:w-2/3">
                <div className="rounded-lg border">
                  <div className="flex flex-wrap gap-y-4 p-4">
                    <div className="w-full">
                      <label className="mb-1 inline-block" htmlFor="username">
                        Username
                      </label>
                      <div className="flex rounded-lg border">
                        <p className="flex shrink-0 items-center border-r border-white px-3 align-middle">
                          vidplay.com/
                        </p>
                        <input
                          type="text"
                          className="w-full bg-transparent px-2 py-1.5"
                          id="username"
                          placeholder="@username"
                          defaultValue="reactpatterns"
                        />
                      </div>
                    </div>
                    <div className="w-full">
                      <label className="mb-1 inline-block" htmlFor="desc">
                        Description
                      </label>
                      <textarea
                        className="w-full rounded-lg border bg-transparent px-2 py-1.5"
                        rows={4}
                        id="desc"
                        placeholder="Channel Description"
                        defaultValue="I'm a Product Designer based in Melbourne, Australia. I specialise in UX/UI design, brand strategy, and Webflow development."
                      ></textarea>
                      <p className="mt-0.5 text-sm text-gray-300">
                        275 characters left
                      </p>
                    </div>
                    <div className="flex w-full items-center gap-3">
                      <div className="w-full max-w-xs rounded-lg border">
                        <select
                          className="w-full border-r-8 border-transparent bg-transparent py-1.5 pl-2"
                          defaultValue="regular"
                        >
                          <option value="light">Light</option>
                          <option value="regular">Regular</option>
                          <option value="semi-bold">Semi bold</option>
                          <option value="bold">Bold</option>
                          <option value="bolder">Bolder</option>
                        </select>
                      </div>
                      <button className="h-6 w-6 hover:text-[#ae7aff] focus:text-[#ae7aff]">
                        <svg
                          width="11"
                          height="14"
                          viewBox="0 0 11 14"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M8.6 6.79C9.57 6.12 10.25 5.02 10.25 4C10.25 1.74 8.5 0 6.25 0H0V14H7.04C9.13 14 10.75 12.3 10.75 10.21C10.75 8.69 9.89 7.39 8.6 6.79ZM3 2.5H6C6.83 2.5 7.5 3.17 7.5 4C7.5 4.83 6.83 5.5 6 5.5H3V2.5ZM6.5 11.5H3V8.5H6.5C7.33 8.5 8 9.17 8 10C8 10.83 7.33 11.5 6.5 11.5Z"
                            fill="currentColor"
                          />
                        </svg>
                      </button>
                      <button className="h-6 w-6 hover:text-[#ae7aff] focus:text-[#ae7aff]">
                        <svg
                          width="12"
                          height="14"
                          viewBox="0 0 12 14"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M4 0V3H6.21L2.79 11H0V14H8V11H5.79L9.21 3H12V0H4Z"
                            fill="currentColor"
                          />
                        </svg>
                      </button>
                      <button className="h-6 w-6 hover:text-[#ae7aff] focus:text-[#ae7aff]">
                        <svg
                          width="20"
                          height="10"
                          viewBox="0 0 20 10"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M1.9 5C1.9 3.29 3.29 1.9 5 1.9H9V0H5C2.24 0 0 2.24 0 5C0 7.76 2.24 10 5 10H9V8.1H5C3.29 8.1 1.9 6.71 1.9 5ZM6 6H14V4H6V6ZM15 0H11V1.9H15C16.71 1.9 18.1 3.29 18.1 5C18.1 6.71 16.71 8.1 15 8.1H11V10H15C17.76 10 20 7.76 20 5C20 2.24 17.76 0 15 0Z"
                            fill="currentColor"
                          />
                        </svg>
                      </button>
                      <button className="h-6 w-6 hover:text-[#ae7aff] focus:text-[#ae7aff]">
                        <ListBulletIcon />
                      </button>
                      <button className="h-6 w-6 hover:text-[#ae7aff] focus:text-[#ae7aff]">
                        <svg
                          width="19"
                          height="16"
                          viewBox="0 0 19 16"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M0 13H2V13.5H1V14.5H2V15H0V16H3V12H0V13ZM1 4H2V0H0V1H1V4ZM0 7H1.8L0 9.1V10H3V9H1.2L3 6.9V6H0V7ZM5 1V3H19V1H5ZM5 15H19V13H5V15ZM5 9H19V7H5V9Z"
                            fill="currentColor"
                          />
                        </svg>
                      </button>
                    </div>
                    <div className="w-full">
                      <label className="mb-1 inline-block" htmlFor="timezone">
                        Timezone
                      </label>
                      <div className="relative w-full rounded-lg border">
                        <div className="absolute left-2 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-300">
                          <ClockIcon />
                        </div>
                        <select
                          id="timezone"
                          className="w-full border-r-8 border-transparent bg-transparent py-1.5 pl-8"
                          defaultValue="UTC+05:30"
                        >
                          <option value="UTC-12:00">
                            (UTC-12:00) International Date Line West
                          </option>
                          <option value="UTC-11:00">
                            (UTC-11:00) Coordinated Universal Time-11
                          </option>
                          <option value="UTC-10:00">(UTC-10:00) Hawaii</option>
                          <option value="UTC-09:00">(UTC-09:00) Alaska</option>
                          <option value="UTC-08:00">
                            (UTC-08:00) Pacific Time (US & Canada)
                          </option>
                          <option value="UTC-07:00">
                            (UTC-07:00) Mountain Time (US & Canada)
                          </option>
                          <option value="UTC-06:00">
                            (UTC-06:00) Central Time (US & Canada)
                          </option>
                          <option value="UTC-05:00">
                            (UTC-05:00) Eastern Time (US & Canada)
                          </option>
                          <option value="UTC-04:00">
                            (UTC-04:00) Atlantic Time (Canada)
                          </option>
                          <option value="UTC-03:30">
                            (UTC-03:30) Newfoundland
                          </option>
                          <option value="UTC-03:00">
                            (UTC-03:00) Buenos Aires, Georgetown
                          </option>
                          <option value="UTC-02:00">
                            (UTC-02:00) Coordinated Universal Time-02
                          </option>
                          <option value="UTC-01:00">(UTC-01:00) Azores</option>
                          <option value="UTC+00:00">
                            (UTC+00:00) Coordinated Universal Time
                          </option>
                          <option value="UTC+01:00">
                            (UTC+01:00) Central European Time
                          </option>
                          <option value="UTC+02:00">
                            (UTC+02:00) Eastern European Time
                          </option>
                          <option value="UTC+03:00">
                            (UTC+03:00) Moscow, St. Petersburg
                          </option>
                          <option value="UTC+03:30">(UTC+03:30) Tehran</option>
                          <option value="UTC+04:00">
                            (UTC+04:00) Abu Dhabi, Muscat
                          </option>
                          <option value="UTC+04:30">(UTC+04:30) Kabul</option>
                          <option value="UTC+05:00">
                            (UTC+05:00) Tashkent
                          </option>
                          <option value="UTC+05:30">
                            (UTC+05:30) Chennai, Kolkata, Mumbai, New Delhi
                          </option>
                          <option value="UTC+05:45">
                            (UTC+05:45) Kathmandu
                          </option>
                          <option value="UTC+06:00">
                            (UTC+06:00) Almaty, Novosibirsk
                          </option>
                          <option value="UTC+06:30">
                            (UTC+06:30) Yangon (Rangoon)
                          </option>
                          <option value="UTC+07:00">
                            (UTC+07:00) Bangkok, Hanoi, Jakarta
                          </option>
                          <option value="UTC+08:00">
                            (UTC+08:00) Beijing, Chongqing, Hong Kong
                          </option>
                          <option value="UTC+08:45">(UTC+08:45) Eucla</option>
                          <option value="UTC+09:00">
                            (UTC+09:00) Osaka, Sapporo, Tokyo
                          </option>
                          <option value="UTC+09:30">
                            (UTC+09:30) Adelaide
                          </option>
                          <option value="UTC+09:45">(UTC+09:45) Darwin</option>
                          <option value="UTC+10:00">
                            (UTC+10:00) Brisbane
                          </option>
                          <option value="UTC+10:30">
                            (UTC+10:30) Lord Howe Island
                          </option>
                          <option value="UTC+11:00">
                            (UTC+11:00) Solomon Is., New Caledonia
                          </option>
                          <option value="UTC+11:30">
                            (UTC+11:30) Norfolk Island
                          </option>
                          <option value="UTC+12:00">(UTC+12:00) Fiji</option>
                          <option value="UTC+12:45">
                            (UTC+12:45) Chatham Islands
                          </option>
                          <option value="UTC+13:00">
                            (UTC+13:00) Nuku&apos;alofa
                          </option>
                          <option value="UTC+14:00">
                            (UTC+14:00) Kiritimati
                          </option>
                        </select>
                      </div>
                    </div>
                  </div>
                  <hr className="border border-gray-300" />
                  <div className="flex items-center justify-end gap-4 p-4">
                    <button className="inline-block rounded-lg border px-3 py-1.5 hover:bg-white/10">
                      Cancel
                    </button>
                    <button className="inline-block bg-[#ae7aff] px-3 py-1.5 text-black">
                      Save changes
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  );
};

export default EditChannelInfo;


================================================
FILE: src/components/templates/youtube/edit-personal-info.jsx
================================================
"use client";
import { classNames } from "@/utils";
import React from "react";
import {
  CloudArrowUpIcon,
  EnvelopeIcon,
  MagnifyingGlassIcon,
  XCircleIcon,
} from "@heroicons/react/24/outline";
import { bottomTotalItems, navItems, logo } from "./data";

const EditPersonalInfo = () => {
  return (
    <div className="h-screen overflow-y-auto bg-[#121212] text-white">
      <header className="sticky inset-x-0 top-0 z-50 w-full border-b border-white bg-[#121212] px-4">
        <nav className="mx-auto flex max-w-7xl items-center py-2">
          <div className="mr-4 w-12 shrink-0 sm:w-16">{logo}</div>
          <div className="relative mx-auto hidden w-full max-w-md overflow-hidden sm:block">
            <input
              className="w-full border bg-transparent py-1 pl-8 pr-3 placeholder-white outline-none sm:py-2"
              placeholder="Search"
            />
            <span className="absolute left-2.5 top-1/2 inline-block -translate-y-1/2">
              <MagnifyingGlassIcon className=" h-4 w-4" />
            </span>
          </div>
          <button className="ml-auto sm:hidden">
            <MagnifyingGlassIcon className=" h-6 w-6" />
          </button>
          <button className="group peer ml-4 flex w-6 shrink-0 flex-wrap gap-y-1.5 sm:hidden">
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-2/3 bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
          </button>
          <div className="fixed inset-y-0 right-0 flex w-full max-w-xs shrink-0 translate-x-full flex-col border-l border-white bg-[#121212] duration-200 hover:translate-x-0 peer-focus:translate-x-0 sm:static sm:ml-4 sm:w-auto sm:translate-x-0 sm:border-none">
            <div className="relative flex w-full items-center justify-between border-b border-white px-4 py-2 sm:hidden">
              <span className="inline-block w-12">{logo}</span>
              <button className="inline-block w-8">
                <XCircleIcon />
              </button>
            </div>
            <ul className="my-4 flex w-full flex-wrap gap-2 px-4 sm:hidden">
              {navItems
                .filter((item) => !item.mobileView)
                .map((item) => (
                  <li key={item.name} className="w-full">
                    <button className="flex w-full items-center justify-start gap-x-4 border border-white px-4 py-1.5 text-left hover:bg-[#ae7aff] hover:text-black focus:border-[#ae7aff] focus:bg-[#ae7aff] focus:text-black">
                      <span className="inline-block w-full max-w-[20px] group-hover:mr-4 lg:mr-4">
                        {item.icon}
                      </span>
                      <span>{item.name}</span>
                    </button>
                  </li>
                ))}
            </ul>

            <div className="mb-8 mt-auto px-4 sm:mb-0 sm:mt-0 sm:px-0">
              <button className="flex w-full gap-4 text-left sm:items-center">
                <img
                  src="https://images.pexels.com/photos/1115816/pexels-photo-1115816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                  alt="React-Patterns"
                  className="h-16 w-16 shrink-0 rounded-full sm:h-12 sm:w-12"
                />

                <div className="w-full pt-2 sm:hidden">
                  <h6 className="font-semibold">React Patterns</h6>
                  <p className="text-sm text-gray-300">@reactpatterns</p>
                </div>
              </button>
            </div>
          </div>
        </nav>
      </header>
      <div className="flex min-h-[calc(100vh-66px)] sm:min-h-[calc(100vh-82px)]">
        <aside className="group fixed inset-x-0 bottom-0 z-40 w-full shrink-0 border-t border-white bg-[#121212] px-2 py-2 sm:absolute sm:inset-y-0 sm:max-w-[70px] sm:border-r sm:border-t-0 sm:py-6 sm:hover:max-w-[250px] lg:sticky lg:max-w-[250px]">
          <ul className="flex justify-around gap-y-2 sm:sticky sm:top-[106px] sm:min-h-[calc(100vh-130px)] sm:flex-col">
            {navItems.map((item, i, arr) => (
              <li
                key={item.name}
                className={classNames(
                  item.mobileView ? "" : "hidden sm:block",
                  arr.length - i === bottomTotalItems ? "mt-auto" : "",
                )}
              >
                <button className="flex flex-col items-center justify-center border-white py-1 focus:text-[#ae7aff] sm:w-full sm:flex-row sm:border sm:p-1.5 sm:hover:bg-[#ae7aff] sm:hover:text-black sm:focus:border-[#ae7aff] sm:focus:bg-[#ae7aff] sm:focus:text-black sm:group-hover:justify-start sm:group-hover:px-4 lg:justify-start lg:px-4">
                  <span className="inline-block w-5 shrink-0 sm:group-hover:mr-4 lg:mr-4">
                    {item.icon}
                  </span>
                  <span className="block sm:hidden sm:group-hover:inline lg:inline">
                    {item.name}
                  </span>
                </button>
              </li>
            ))}
          </ul>
        </aside>
        <section className="w-full pb-[70px] sm:ml-[70px] sm:pb-0 lg:ml-0">
          <div className="relative min-h-[150px] w-full pt-[16.28%]">
            <div className="absolute inset-0 overflow-hidden">
              <img
                src="https://images.pexels.com/photos/1092424/pexels-photo-1092424.jpeg?auto=compress"
                alt="cover-photo"
              />
            </div>
            <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
              <input type="file" id="cover-image" className="hidden" />
              <label
                htmlFor="cover-image"
                className="inline-block h-10 w-10 cursor-pointer rounded-lg bg-white/60 p-1 text-[#ae7aff] hover:bg-white"
              >
                <CloudArrowUpIcon />
              </label>
            </div>
          </div>
          <div className="px-4 pb-4">
            <div className="flex flex-wrap gap-4 pb-4 pt-6">
              <div className="relative -mt-12 inline-block h-28 w-28 shrink-0 overflow-hidden rounded-full border-2">
                <img
                  src="https://images.pexels.com/photos/1115816/pexels-photo-1115816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                  alt="Channel"
                  className="h-full w-full"
                />
                <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
                  <input type="file" id="profile-image" className="hidden" />
                  <label
                    htmlFor="profile-image"
                    className="inline-block h-8 w-8 cursor-pointer rounded-lg bg-white/60 p-1 text-[#ae7aff] hover:bg-white"
                  >
                    <CloudArrowUpIcon />
                  </label>
                </div>
              </div>

              <div className="mr-auto inline-block">
                <h1 className="font-bolg text-xl">React Patterns</h1>
                <p className="text-sm text-gray-400">@reactpatterns</p>
              </div>

              <div className="inline-block">
                <button className="group/btn mr-1 flex w-full items-center gap-x-2 bg-[#ae7aff] px-3 py-2 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e] sm:w-auto">
                  View channel
                </button>
              </div>
            </div>

            <ul className="no-scrollbar sticky top-[66px] z-[2] flex flex-row gap-x-2 overflow-auto border-b-2 border-gray-400 bg-[#121212] py-2 sm:top-[82px]">
              <li className="w-full">
                <button className="w-full border-b-2 border-[#ae7aff] bg-white px-3 py-1.5 text-[#ae7aff]">
                  Personal Information
                </button>
              </li>
              <li className="w-full">
                <button className="w-full border-b-2 border-transparent px-3 py-1.5 text-gray-400">
                  Channel Information
                </button>
              </li>
              <li className="w-full">
                <button className="w-full border-b-2 border-transparent px-3 py-1.5 text-gray-400">
                  Change Password
                </button>
              </li>
            </ul>

            <div className="flex flex-wrap justify-center gap-y-4 py-4">
              <div className="w-full sm:w-1/2 lg:w-1/3">
                <h5 className="font-semibold">Personal Info</h5>
                <p className="text-gray-300">
                  Update your photo and personal details.
                </p>
              </div>
              <div className="w-full sm:w-1/2 lg:w-2/3">
                <div className="rounded-lg border">
                  <div className="flex flex-wrap gap-y-4 p-4">
                    <div className="w-full lg:w-1/2 lg:pr-2">
                      <label htmlFor="firstname" className="mb-1 inline-block">
                        First name
                      </label>
                      <input
                        type="text"
                        className="w-full rounded-lg border bg-transparent px-2 py-1.5"
                        id="firstname"
                        placeholder="Enter first name"
                        defaultValue="React"
                      />
                    </div>
                    <div className="w-full lg:w-1/2 lg:pl-2">
                      <label htmlFor="lastname" className="mb-1 inline-block">
                        Last name
                      </label>
                      <input
                        type="text"
                        className="w-full rounded-lg border bg-transparent px-2 py-1.5"
                        id="lastname"
                        placeholder="Enter last name"
                        defaultValue="Patterns"
                      />
                    </div>
                    <div className="w-full">
                      <label htmlFor="lastname" className="mb-1 inline-block">
                        Email address
                      </label>
                      <div className="relative">
                        <div className="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-300">
                          <EnvelopeIcon />
                        </div>
                        <input
                          type="email"
                          className="w-full rounded-lg border bg-transparent py-1.5 pl-10 pr-2"
                          id="lastname"
                          placeholder="Enter email address"
                          defaultValue="patternsreact@gmail.com"
                        />
                      </div>
                    </div>
                  </div>
                  <hr className="border border-gray-300" />
                  <div className="flex items-center justify-end gap-4 p-4">
                    <button className="inline-block rounded-lg border px-3 py-1.5 hover:bg-white/10">
                      Cancel
                    </button>
                    <button className="inline-block bg-[#ae7aff] px-3 py-1.5 text-black">
                      Save changes
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  );
};

export default EditPersonalInfo;


================================================
FILE: src/components/templates/youtube/edit-video.jsx
================================================
"use client";
import {
  EyeIcon,
  HeartIcon,
  MagnifyingGlassIcon,
  PencilIcon,
  PlusIcon,
  TrashIcon,
  UserIcon,
  XCircleIcon,
  XMarkIcon,
} from "@heroicons/react/24/outline";
import React from "react";
import { navItems, logo, videos } from "./data";
import { classNames } from "@/utils";

const EditVideo = () => {
  return (
    <div className="h-screen overflow-y-auto bg-[#121212] text-white">
      <header className="sticky inset-x-0 top-0 z-50 w-full border-b border-white bg-[#121212] px-4">
        <nav className="mx-auto flex max-w-7xl items-center py-2">
          <div className="mr-4 w-12 shrink-0 sm:w-16">{logo}</div>
          <div className="relative mx-auto hidden w-full max-w-md overflow-hidden sm:block">
            <input
              className="w-full border bg-transparent py-1 pl-8 pr-3 placeholder-white outline-none sm:py-2"
              placeholder="Search"
            />
            <span className="absolute left-2.5 top-1/2 inline-block -translate-y-1/2">
              <MagnifyingGlassIcon className=" h-4 w-4" />
            </span>
          </div>
          <button className="ml-auto sm:hidden">
            <MagnifyingGlassIcon className=" h-6 w-6" />
          </button>
          <button className="group peer ml-4 flex w-6 shrink-0 flex-wrap gap-y-1.5 sm:hidden">
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-2/3 bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
          </button>
          <div className="fixed inset-y-0 right-0 flex w-full max-w-xs shrink-0 translate-x-full flex-col border-l border-white bg-[#121212] duration-200 hover:translate-x-0 peer-focus:translate-x-0 sm:static sm:ml-4 sm:w-auto sm:translate-x-0 sm:border-none">
            <div className="relative flex w-full items-center justify-between border-b border-white px-4 py-2 sm:hidden">
              <span className="inline-block w-12">{logo}</span>
              <button className="inline-block w-8">
                <XCircleIcon />
              </button>
            </div>
            <ul className="my-4 flex w-full flex-wrap gap-2 px-4 sm:hidden">
              {navItems
                .filter((item) => !item.mobileView)
                .map((item) => (
                  <li key={item.name} className="w-full">
                    <button className="flex w-full items-center justify-start gap-x-4 border border-white px-4 py-1.5 text-left hover:bg-[#ae7aff] hover:text-black focus:border-[#ae7aff] focus:bg-[#ae7aff] focus:text-black">
                      <span className="inline-block w-full max-w-[20px] group-hover:mr-4 lg:mr-4">
                        {item.icon}
                      </span>
                      <span>{item.name}</span>
                    </button>
                  </li>
                ))}
            </ul>

            <div className="mb-8 mt-auto px-4 sm:mb-0 sm:mt-0 sm:px-0">
              <button className="flex w-full gap-4 text-left sm:items-center">
                <img
                  src="https://images.pexels.com/photos/1115816/pexels-photo-1115816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                  alt="React-Patterns"
                  className="h-16 w-16 shrink-0 rounded-full sm:h-12 sm:w-12"
                />

                <div className="w-full pt-2 sm:hidden">
                  <h6 className="font-semibold">React Patterns</h6>
                  <p className="text-sm text-gray-300">@reactpatterns</p>
                </div>
              </button>
            </div>
          </div>
        </nav>
      </header>
      <div className="relative flex min-h-[calc(100vh-66px)] sm:min-h-[calc(100vh-82px)]">
        <div className="mx-auto flex w-full max-w-7xl flex-col gap-y-6 px-4 py-8">
          <div className="flex flex-wrap justify-between gap-4">
            <div className="block">
              <h1 className="text-2xl font-bold">
                Welcome Back, React Patterns
              </h1>
              <p className="text-sm text-gray-300">
                Seamless Video Management, Elevated Results.
              </p>
            </div>
            <div className="block">
              <button className="inline-flex items-center gap-x-2 bg-[#ae7aff] px-3 py-2 font-semibold text-black">
                <PlusIcon className="h-5 w-5" strokeWidth={2} /> Upload video
              </button>
            </div>
          </div>
          <div className="grid grid-cols-[repeat(auto-fit,_minmax(300px,_1fr))] gap-4">
            {[
              { Icon: EyeIcon, title: "Total views", count: "221,234" },
              { Icon: UserIcon, title: "Total subscribers", count: "4,053" },
              { Icon: HeartIcon, title: "Total likes", count: "63,021" },
            ].map(({ title, Icon, count }) => (
              <div key={title} className="border p-4">
                <div className="mb-4 block">
                  <span className="inline-block h-7 w-7 rounded-full bg-[#E4D3FF] p-1 text-[#ae7aff]">
                    <Icon />
                  </span>
                </div>
                <h6 className="text-gray-300">{title}</h6>
                <p className="text-3xl font-semibold">{count}</p>
              </div>
            ))}
          </div>
          <div className="w-full overflow-auto">
            <table className="w-full min-w-[1200px] border-collapse border text-white">
              <thead>
                <tr>
                  <th className="border-collapse border-b p-4">Status</th>
                  <th className="border-collapse border-b p-4">Status</th>
                  <th className="border-collapse border-b p-4">Uploaded</th>
                  <th className="border-collapse border-b p-4">Rating</th>
                  <th className="border-collapse border-b p-4">
                    Date uploaded
                  </th>
                  <th className="border-collapse border-b p-4"></th>
                </tr>
              </thead>
              <tbody>
                {videos.map((video) => (
                  <tr key={video.id} className="group border">
                    <td className="border-collapse border-b border-gray-600 px-4 py-3 group-last:border-none">
                      <div className="flex justify-center">
                        <label
                          htmlFor={"vid-pub-" + video.id}
                          className="relative inline-block w-12 cursor-pointer overflow-hidden"
                        >
                          <input
                            type="checkbox"
                            id={"vid-pub-" + video.id}
                            className="peer sr-only"
                            defaultChecked={video.isPublished}
                          />
                          <span className="inline-block h-6 w-full rounded-2xl bg-gray-200 duration-200 after:absolute after:bottom-1 after:left-1 after:top-1 after:h-4 after:w-4 after:rounded-full after:bg-black after:duration-200 peer-checked:bg-[#ae7aff] peer-checked:after:left-7"></span>
                        </label>
                      </div>
                    </td>
                    <td className="border-collapse border-b border-gray-600 px-4 py-3 group-last:border-none">
                      <div className="flex justify-center">
                        <span
                          className={classNames(
                            "inline-block rounded-2xl border px-1.5 py-0.5",
                            video.isPublished
                              ? "border-green-600 text-green-600"
                              : "border-orange-600 text-orange-600",
                          )}
                        >
                          {video.isPublished ? "Published" : "Unpublished"}
                        </span>
                      </div>
                    </td>
                    <td className="border-collapse border-b border-gray-600 px-4 py-3 group-last:border-none">
                      <div className="flex items-center gap-4">
                        <img
                          className="h-10 w-10 rounded-full"
                          src={video.owner.avatar}
                          alt={video.owner.fullName}
                        />
                        <h3 className="font-semibold">{video.title}</h3>
                      </div>
                    </td>
                    <td className="border-collapse border-b border-gray-600 px-4 py-3 group-last:border-none">
                      <div className="flex justify-center gap-4">
                        <span className="inline-block rounded-xl bg-green-200 px-1.5 py-0.5 text-green-700">
                          {video.likeCount} likes
                        </span>
                        <span className="inline-block rounded-xl bg-red-200 px-1.5 py-0.5 text-red-700">
                          {video.dislikeCount} dislikes
                        </span>
                      </div>
                    </td>
                    <td className="border-collapse border-b border-gray-600 px-4 py-3 group-last:border-none">
                      {new Date(video.createdAt).toLocaleDateString()}
                    </td>
                    <td className="border-collapse border-b border-gray-600 px-4 py-3 group-last:border-none">
                      <div className="flex gap-4">
                        <button className="h-5 w-5 hover:text-[#ae7aff]">
                          <TrashIcon />
                        </button>
                        <button className="h-5 w-5 hover:text-[#ae7aff]">
                          <PencilIcon />
                        </button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
        {/* Modal Popup */}
        <div className="fixed inset-0 top-[calc(66px)] z-10 flex flex-col bg-black/50 px-4 pb-[86px] pt-4 sm:top-[calc(82px)] sm:px-14 sm:py-8">
          <div className="mx-auto w-full max-w-lg overflow-auto rounded-lg border border-gray-700 bg-[#121212] p-4">
            <div className="mb-4 flex items-start justify-between">
              <h2 className="text-xl font-semibold">
                Edit Video
                <span className="block text-sm text-gray-300">
                  Share where you&apos;ve worked on your profile.
                </span>
              </h2>
              <button className="h-6 w-6">
                <XMarkIcon />
              </button>
            </div>

            <label htmlFor="thumbnail" className="mb-1 inline-block">
              Thumbnail<sup>*</sup>
            </label>
            <label
              className="relative mb-4 block cursor-pointer border border-dashed p-2 after:absolute after:inset-0 after:bg-transparent hover:after:bg-black/10"
              htmlFor="thumbnail"
            >
              <input type="file" className="sr-only" id="thumbnail" />
              <img
                src="https://images.pexels.com/photos/7775641/pexels-photo-7775641.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                alt="State Management with Redux"
              />
            </label>

            <div className="mb-6 flex flex-col gap-y-4">
              <div className="w-full">
                <label htmlFor="title" className="mb-1 inline-block">
                  Title<sup>*</sup>
                </label>
                <input
                  id="title"
                  type="text"
                  className="w-full border bg-transparent px-2 py-1 outline-none"
                  defaultValue="State Management with Redux"
                />
              </div>
              <div className="w-full">
                <label htmlFor="desc" className="mb-1 inline-block">
                  Description<sup>*</sup>
                </label>
                <textarea
                  id="desc"
                  className="h-40 w-full resize-none border bg-transparent px-2 py-1 outline-none"
                  defaultValue="State Management with Redux is a comprehensive guidebook that delves into the principles and practices of managing application state in JavaScript-based web development. It explores the Redux library, a popular tool for handling state in complex applications, providing practical insights and best practices for effectively managing data flow. This book equips developers with the knowledge and skills needed to architect robust and maintainable front-end applications, making it an essential resource for anyone seeking to master state management in modern web development."
                ></textarea>
              </div>
            </div>
            <div className="grid grid-cols-2 gap-4">
              <button className="border px-4 py-3">Cancel</button>
              <button className="bg-[#ae7aff] px-4 py-3 text-black disabled:bg-[#E4D3FF]">
                Update
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default EditVideo;


================================================
FILE: src/components/templates/youtube/empty-videos.jsx
================================================
"use client";
import { classNames } from "@/utils";
import {
  MagnifyingGlassIcon,
  PlayIcon,
  XCircleIcon,
} from "@heroicons/react/24/outline";
import React from "react";
import { bottomTotalItems, navItems, logo } from "./data";

const EmptyVideos = () => {
  return (
    <div className="h-screen overflow-y-auto bg-[#121212] text-white">
      <header className="sticky inset-x-0 top-0 z-50 w-full border-b border-white bg-[#121212] px-4">
        <nav className="mx-auto flex max-w-7xl items-center py-2">
          <div className="mr-4 w-12 shrink-0 sm:w-16">{logo}</div>
          <div className="relative mx-auto hidden w-full max-w-md overflow-hidden sm:block">
            <input
              className="w-full border bg-transparent py-1 pl-8 pr-3 placeholder-white outline-none sm:py-2"
              placeholder="Search"
            />
            <span className="absolute left-2.5 top-1/2 inline-block -translate-y-1/2">
              <MagnifyingGlassIcon className=" h-4 w-4" />
            </span>
          </div>
          <button className="ml-auto sm:hidden">
            <MagnifyingGlassIcon className=" h-6 w-6" />
          </button>
          <button className="group peer ml-4 flex w-6 shrink-0 flex-wrap gap-y-1.5 sm:hidden">
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-2/3 bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
          </button>
          <div className="fixed inset-y-0 right-0 flex w-full max-w-xs shrink-0 translate-x-full flex-col border-l border-white bg-[#121212] duration-200 hover:translate-x-0 peer-focus:translate-x-0 sm:static sm:ml-4 sm:w-auto sm:translate-x-0 sm:border-none">
            <div className="relative flex w-full items-center justify-between border-b border-white px-4 py-2 sm:hidden">
              <span className="inline-block w-12">{logo}</span>
              <button className="inline-block w-8">
                <XCircleIcon />
              </button>
            </div>
            <ul className="my-4 flex w-full flex-wrap gap-2 px-4 sm:hidden">
              {navItems
                .filter((item) => !item.mobileView)
                .map((item) => (
                  <li key={item.name} className="w-full">
                    <button className="flex w-full items-center justify-start gap-x-4 border border-white px-4 py-1.5 text-left hover:bg-[#ae7aff] hover:text-black focus:border-[#ae7aff] focus:bg-[#ae7aff] focus:text-black">
                      <span className="inline-block w-full max-w-[20px] group-hover:mr-4 lg:mr-4">
                        {item.icon}
                      </span>
                      <span>{item.name}</span>
                    </button>
                  </li>
                ))}
            </ul>

            <div className="mb-8 mt-auto flex w-full flex-wrap gap-4 px-4 sm:mb-0 sm:mt-0 sm:items-center sm:px-0">
              <button className="w-full bg-[#383737] px-3 py-2 hover:bg-[#4f4e4e] sm:w-auto sm:bg-transparent">
                Log in
              </button>
              <button className="mr-1 w-full bg-[#ae7aff] px-3 py-2 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e] sm:w-auto">
                Sign up
              </button>
            </div>
          </div>
        </nav>
      </header>
      <div className="flex min-h-[calc(100vh-66px)] sm:min-h-[calc(100vh-82px)]">
        <aside className="group fixed inset-x-0 bottom-0 z-40 w-full shrink-0 border-t border-white bg-[#121212] px-2 py-2 sm:absolute sm:inset-y-0 sm:max-w-[70px] sm:border-r sm:border-t-0 sm:py-6 sm:hover:max-w-[250px] lg:sticky lg:max-w-[250px]">
          <ul className="flex justify-around gap-y-2 sm:sticky sm:top-[106px] sm:min-h-[calc(100vh-130px)] sm:flex-col">
            {navItems.map((item, i, arr) => (
              <li
                key={item.name}
                className={classNames(
                  item.mobileView ? "" : "hidden sm:block",
                  arr.length - i === bottomTotalItems ? "mt-auto" : "",
                )}
              >
                <button className="flex flex-col items-center justify-center border-white py-1 focus:text-[#ae7aff] sm:w-full sm:flex-row sm:border sm:p-1.5 sm:hover:bg-[#ae7aff] sm:hover:text-black sm:focus:border-[#ae7aff] sm:focus:bg-[#ae7aff] sm:focus:text-black sm:group-hover:justify-start sm:group-hover:px-4 lg:justify-start lg:px-4">
                  <span className="inline-block w-5 shrink-0 sm:group-hover:mr-4 lg:mr-4">
                    {item.icon}
                  </span>
                  <span className="block sm:hidden sm:group-hover:inline lg:inline">
                    {item.name}
                  </span>
                </button>
              </li>
            ))}
          </ul>
        </aside>
        <section className="w-full pb-[70px] sm:ml-[70px] sm:pb-0 lg:ml-0">
          <div className="flex h-full items-center justify-center">
            <div className="w-full max-w-sm text-center">
              <p className="mb-3 w-full">
                <span className="inline-flex rounded-full bg-[#E4D3FF] p-2 text-[#AE7AFF]">
                  <PlayIcon className="w-6" />
                </span>
              </p>
              <h5 className="mb-2 font-semibold">No videos available</h5>
              <p>
                There are no videos here available. Please try to search some
                thing else.
              </p>
            </div>
          </div>
        </section>
      </div>
    </div>
  );
};

export default EmptyVideos;


================================================
FILE: src/components/templates/youtube/index.ts
================================================
import EmptyVideos from "./empty-videos";
import VideoCards from "./video-cards";
import VideoList from "./video-list";
import VideoDetail from "./video-detail";
import ChannelEmptyVideo from "./channel-empty-video";
import ChannelVideoList from "./channel-video-list";
import ChannelEmptyPlaylist from "./channel-empty-playlist";
import ChannelPlaylist from "./channel-playlist";
import ChannelPlaylistVideos from "./channel-playlist-videos";
import ChannelEmptyTweet from "./channel-empty-tweet";
import ChannelTweets from "./channel-tweets";
import ChannelEmptySubscribed from "./channel-empty-subscribed";
import ChannelSubscribed from "./channel-subscribed";
import MyChannelEmptyVideo from "./mychannel-empty-video";
import MyChannelEmptyTweet from "./mychannel-empty-tweet";
import MyChannelTweets from "./mychannel-tweets";
import EditPersonalInfo from "./edit-personal-info";
import EditChannelInfo from "./edit-channel-info";
import ChangePassword from "./change-password";
import Dashboard from "./dashboard";
import Register from "./register";
import Login from "./login";
import UploadVideo from "./upload-video";
import PrivacyPolicy from "./privacy-policy";
import TermsAndConditions from "./terms-and-conditions";
import UploadingVideo from "./uploading-video";
import UploadedVideo from "./uploaded-video";
import EditVideo from "./edit-video";
import DeleteVideo from "./delete-video";

const Youtube = {
  EmptyVideos,
  VideoCards,
  VideoList,
  VideoDetail,
  ChannelEmptyPlaylist,
  ChannelEmptySubscribed,
  ChannelEmptyTweet,
  ChannelEmptyVideo,
  ChannelPlaylistVideos,
  ChannelSubscribed,
  ChannelTweets,
  ChannelVideoList,
  ChannelPlaylist,
  MyChannelEmptyTweet,
  MyChannelEmptyVideo,
  MyChannelTweets,
  EditPersonalInfo,
  EditChannelInfo,
  ChangePassword,
  Dashboard,
  Register,
  Login,
  UploadVideo,
  PrivacyPolicy,
  TermsAndConditions,
  UploadingVideo,
  UploadedVideo,
  EditVideo,
  DeleteVideo,
};

export default Youtube;


================================================
FILE: src/components/templates/youtube/login.jsx
================================================
import React from "react";
import { logo } from "./data";

const Login = () => {
  return (
    <div className="h-screen overflow-y-auto bg-[#121212] text-white">
      <div className="mx-auto my-8 flex w-full max-w-sm flex-col px-4">
        <div className="mx-auto inline-block w-16">{logo}</div>
        <div className="mb-6 w-full text-center text-2xl font-semibold uppercase">
          Play
        </div>

        <label htmlFor="email" className="mb-1 inline-block text-gray-300">
          Email*
        </label>
        <input
          id="email"
          type="email"
          placeholder="Enter your email"
          className="mb-4 rounded-lg border bg-transparent px-3 py-2"
        />
        <button className="bg-[#ae7aff] px-4 py-3 text-black">
          Sign in with Email
        </button>
      </div>
    </div>
  );
};

export default Login;


================================================
FILE: src/components/templates/youtube/mychannel-empty-tweet.jsx
================================================
"use client";
import { classNames } from "@/utils";
import React from "react";
import {
  EllipsisHorizontalIcon,
  FaceSmileIcon,
  MagnifyingGlassIcon,
  PencilIcon,
  UsersIcon,
  XCircleIcon,
} from "@heroicons/react/24/outline";
import { bottomTotalItems, navItems, logo } from "./data";

const MyChannelEmptyTweet = () => {
  return (
    <div className="h-screen overflow-y-auto bg-[#121212] text-white">
      <header className="sticky inset-x-0 top-0 z-50 w-full border-b border-white bg-[#121212] px-4">
        <nav className="mx-auto flex max-w-7xl items-center py-2">
          <div className="mr-4 w-12 shrink-0 sm:w-16">{logo}</div>
          <div className="relative mx-auto hidden w-full max-w-md overflow-hidden sm:block">
            <input
              className="w-full border bg-transparent py-1 pl-8 pr-3 placeholder-white outline-none sm:py-2"
              placeholder="Search"
            />
            <span className="absolute left-2.5 top-1/2 inline-block -translate-y-1/2">
              <MagnifyingGlassIcon className=" h-4 w-4" />
            </span>
          </div>
          <button className="ml-auto sm:hidden">
            <MagnifyingGlassIcon className=" h-6 w-6" />
          </button>
          <button className="group peer ml-4 flex w-6 shrink-0 flex-wrap gap-y-1.5 sm:hidden">
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-2/3 bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
          </button>
          <div className="fixed inset-y-0 right-0 flex w-full max-w-xs shrink-0 translate-x-full flex-col border-l border-white bg-[#121212] duration-200 hover:translate-x-0 peer-focus:translate-x-0 sm:static sm:ml-4 sm:w-auto sm:translate-x-0 sm:border-none">
            <div className="relative flex w-full items-center justify-between border-b border-white px-4 py-2 sm:hidden">
              <span className="inline-block w-12">{logo}</span>
              <button className="inline-block w-8">
                <XCircleIcon />
              </button>
            </div>
            <ul className="my-4 flex w-full flex-wrap gap-2 px-4 sm:hidden">
              {navItems
                .filter((item) => !item.mobileView)
                .map((item) => (
                  <li key={item.name} className="w-full">
                    <button className="flex w-full items-center justify-start gap-x-4 border border-white px-4 py-1.5 text-left hover:bg-[#ae7aff] hover:text-black focus:border-[#ae7aff] focus:bg-[#ae7aff] focus:text-black">
                      <span className="inline-block w-full max-w-[20px] group-hover:mr-4 lg:mr-4">
                        {item.icon}
                      </span>
                      <span>{item.name}</span>
                    </button>
                  </li>
                ))}
            </ul>

            <div className="mb-8 mt-auto px-4 sm:mb-0 sm:mt-0 sm:px-0">
              <button className="flex w-full gap-4 text-left sm:items-center">
                <img
                  src="https://images.pexels.com/photos/1115816/pexels-photo-1115816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                  alt="React-Patterns"
                  className="h-16 w-16 shrink-0 rounded-full sm:h-12 sm:w-12"
                />

                <div className="w-full pt-2 sm:hidden">
                  <h6 className="font-semibold">React Patterns</h6>
                  <p className="text-sm text-gray-300">@reactpatterns</p>
                </div>
              </button>
            </div>
          </div>
        </nav>
      </header>
      <div className="flex min-h-[calc(100vh-66px)] sm:min-h-[calc(100vh-82px)]">
        <aside className="group fixed inset-x-0 bottom-0 z-40 w-full shrink-0 border-t border-white bg-[#121212] px-2 py-2 sm:absolute sm:inset-y-0 sm:max-w-[70px] sm:border-r sm:border-t-0 sm:py-6 sm:hover:max-w-[250px] lg:sticky lg:max-w-[250px]">
          <ul className="flex justify-around gap-y-2 sm:sticky sm:top-[106px] sm:min-h-[calc(100vh-130px)] sm:flex-col">
            {navItems.map((item, i, arr) => (
              <li
                key={item.name}
                className={classNames(
                  item.mobileView ? "" : "hidden sm:block",
                  arr.length - i === bottomTotalItems ? "mt-auto" : "",
                )}
              >
                <button className="flex flex-col items-center justify-center border-white py-1 focus:text-[#ae7aff] sm:w-full sm:flex-row sm:border sm:p-1.5 sm:hover:bg-[#ae7aff] sm:hover:text-black sm:focus:border-[#ae7aff] sm:focus:bg-[#ae7aff] sm:focus:text-black sm:group-hover:justify-start sm:group-hover:px-4 lg:justify-start lg:px-4">
                  <span className="inline-block w-5 shrink-0 sm:group-hover:mr-4 lg:mr-4">
                    {item.icon}
                  </span>
                  <span className="block sm:hidden sm:group-hover:inline lg:inline">
                    {item.name}
                  </span>
                </button>
              </li>
            ))}
          </ul>
        </aside>
        <section className="w-full pb-[70px] sm:ml-[70px] sm:pb-0 lg:ml-0">
          <div className="relative min-h-[150px] w-full pt-[16.28%]">
            <div className="absolute inset-0 overflow-hidden">
              <img
                src="https://images.pexels.com/photos/1092424/pexels-photo-1092424.jpeg?auto=compress"
                alt="cover-photo"
              />
            </div>
          </div>
          <div className="px-4 pb-4">
            <div className="flex flex-wrap gap-4 pb-4 pt-6">
              <span className="relative -mt-12 inline-block h-28 w-28 shrink-0 overflow-hidden rounded-full border-2">
                <img
                  src="https://images.pexels.com/photos/1115816/pexels-photo-1115816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                  alt="Channel"
                  className="h-full w-full"
                />
              </span>

              <div className="mr-auto inline-block">
                <h1 className="font-bolg text-xl">React Patterns</h1>
                <p className="text-sm text-gray-400">@reactpatterns</p>
                <p className="text-sm text-gray-400">
                  600k Subscribers&nbsp;&middot;&nbsp;220 Subscribed
                </p>
              </div>

              <div className="inline-block">
                <button className="group/btn mr-1 flex w-full items-center gap-x-2 bg-[#ae7aff] px-3 py-2 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e] sm:w-auto">
                  <span className="inline-block w-5">
                    <PencilIcon strokeWidth={2} />
                  </span>
                  Edit
                </button>
              </div>
            </div>

            <ul className="no-scrollbar sticky top-[66px] z-[2] flex flex-row gap-x-2 overflow-auto border-b-2 border-gray-400 bg-[#121212] py-2 sm:top-[82px]">
              <li className="w-full">
                <button className="w-full border-b-2 border-transparent px-3 py-1.5 text-gray-400">
                  Videos
                </button>
              </li>
              <li className="w-full">
                <button className="w-full border-b-2 border-transparent px-3 py-1.5 text-gray-400">
                  Playlist
                </button>
              </li>
              <li className="w-full">
                <button className="w-full border-b-2 border-[#ae7aff] bg-white px-3 py-1.5 text-[#ae7aff]">
                  Tweets
                </button>
              </li>
              <li className="w-full">
                <button className="w-full border-b-2 border-transparent px-3 py-1.5 text-gray-400">
                  Subscribed
                </button>
              </li>
            </ul>
            <div className="mt-2 border pb-2">
              <textarea
                className="mb-2 h-10 w-full resize-none border-none bg-transparent px-3 pt-2 outline-none"
                placeholder="Write a tweet"
              ></textarea>
              <div className="flex items-center justify-end gap-x-3 px-3">
                <button className="inline-block h-5 w-5 hover:text-[#ae7aff]">
                  <FaceSmileIcon strokeWidth={2} />
                </button>
                <button className="inline-block h-5 w-5 hover:text-[#ae7aff]">
                  <EllipsisHorizontalIcon strokeWidth={2} />
                </button>
                <button className="bg-[#ae7aff] px-3 py-2 font-semibold text-black">
                  Send
                </button>
              </div>
            </div>
            <div className="flex justify-center p-4">
              <div className="w-full max-w-sm text-center">
                <p className="mb-3 w-full">
                  <span className="inline-flex rounded-full bg-[#E4D3FF] p-2 text-[#AE7AFF]">
                    <span className="inline-block w-6">
                      <UsersIcon className="w-6" />
                    </span>
                  </span>
                </p>
                <h5 className="mb-2 font-semibold">No Tweets</h5>
                <p>
                  This channel has yet to make a <strong>Tweet</strong>.
                </p>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  );
};

export default MyChannelEmptyTweet;


================================================
FILE: src/components/templates/youtube/mychannel-empty-video.jsx
================================================
"use client";
import { classNames } from "@/utils";
import React from "react";
import {
  MagnifyingGlassIcon,
  PencilIcon,
  PlayIcon,
  PlusIcon,
  XCircleIcon,
} from "@heroicons/react/24/outline";
import { bottomTotalItems, navItems, logo } from "./data";

const MyChannelEmptyVideo = () => {
  return (
    <div className="h-screen overflow-y-auto bg-[#121212] text-white">
      <header className="sticky inset-x-0 top-0 z-50 w-full border-b border-white bg-[#121212] px-4">
        <nav className="mx-auto flex max-w-7xl items-center py-2">
          <div className="mr-4 w-12 shrink-0 sm:w-16">{logo}</div>
          <div className="relative mx-auto hidden w-full max-w-md overflow-hidden sm:block">
            <input
              className="w-full border bg-transparent py-1 pl-8 pr-3 placeholder-white outline-none sm:py-2"
              placeholder="Search"
            />
            <span className="absolute left-2.5 top-1/2 inline-block -translate-y-1/2">
              <MagnifyingGlassIcon className=" h-4 w-4" />
            </span>
          </div>
          <button className="ml-auto sm:hidden">
            <MagnifyingGlassIcon className=" h-6 w-6" />
          </button>
          <button className="group peer ml-4 flex w-6 shrink-0 flex-wrap gap-y-1.5 sm:hidden">
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-2/3 bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
          </button>
          <div className="fixed inset-y-0 right-0 flex w-full max-w-xs shrink-0 translate-x-full flex-col border-l border-white bg-[#121212] duration-200 hover:translate-x-0 peer-focus:translate-x-0 sm:static sm:ml-4 sm:w-auto sm:translate-x-0 sm:border-none">
            <div className="relative flex w-full items-center justify-between border-b border-white px-4 py-2 sm:hidden">
              <span className="inline-block w-12">{logo}</span>
              <button className="inline-block w-8">
                <XCircleIcon />
              </button>
            </div>
            <ul className="my-4 flex w-full flex-wrap gap-2 px-4 sm:hidden">
              {navItems
                .filter((item) => !item.mobileView)
                .map((item) => (
                  <li key={item.name} className="w-full">
                    <button className="flex w-full items-center justify-start gap-x-4 border border-white px-4 py-1.5 text-left hover:bg-[#ae7aff] hover:text-black focus:border-[#ae7aff] focus:bg-[#ae7aff] focus:text-black">
                      <span className="inline-block w-full max-w-[20px] group-hover:mr-4 lg:mr-4">
                        {item.icon}
                      </span>
                      <span>{item.name}</span>
                    </button>
                  </li>
                ))}
            </ul>

            <div className="mb-8 mt-auto px-4 sm:mb-0 sm:mt-0 sm:px-0">
              <button className="flex w-full gap-4 text-left sm:items-center">
                <img
                  src="https://images.pexels.com/photos/1115816/pexels-photo-1115816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                  alt="React-Patterns"
                  className="h-16 w-16 shrink-0 rounded-full sm:h-12 sm:w-12"
                />

                <div className="w-full pt-2 sm:hidden">
                  <h6 className="font-semibold">React Patterns</h6>
                  <p className="text-sm text-gray-300">@reactpatterns</p>
                </div>
              </button>
            </div>
          </div>
        </nav>
      </header>
      <div className="flex min-h-[calc(100vh-66px)] sm:min-h-[calc(100vh-82px)]">
        <aside className="group fixed inset-x-0 bottom-0 z-40 w-full shrink-0 border-t border-white bg-[#121212] px-2 py-2 sm:absolute sm:inset-y-0 sm:max-w-[70px] sm:border-r sm:border-t-0 sm:py-6 sm:hover:max-w-[250px] lg:sticky lg:max-w-[250px]">
          <ul className="flex justify-around gap-y-2 sm:sticky sm:top-[106px] sm:min-h-[calc(100vh-130px)] sm:flex-col">
            {navItems.map((item, i, arr) => (
              <li
                key={item.name}
                className={classNames(
                  item.mobileView ? "" : "hidden sm:block",
                  arr.length - i === bottomTotalItems ? "mt-auto" : "",
                )}
              >
                <button className="flex flex-col items-center justify-center border-white py-1 focus:text-[#ae7aff] sm:w-full sm:flex-row sm:border sm:p-1.5 sm:hover:bg-[#ae7aff] sm:hover:text-black sm:focus:border-[#ae7aff] sm:focus:bg-[#ae7aff] sm:focus:text-black sm:group-hover:justify-start sm:group-hover:px-4 lg:justify-start lg:px-4">
                  <span className="inline-block w-5 shrink-0 sm:group-hover:mr-4 lg:mr-4">
                    {item.icon}
                  </span>
                  <span className="block sm:hidden sm:group-hover:inline lg:inline">
                    {item.name}
                  </span>
                </button>
              </li>
            ))}
          </ul>
        </aside>
        <section className="w-full pb-[70px] sm:ml-[70px] sm:pb-0 lg:ml-0">
          <div className="relative min-h-[150px] w-full pt-[16.28%]">
            <div className="absolute inset-0 overflow-hidden">
              <img
                src="https://images.pexels.com/photos/1092424/pexels-photo-1092424.jpeg?auto=compress"
                alt="cover-photo"
              />
            </div>
          </div>
          <div className="px-4 pb-4">
            <div className="flex flex-wrap gap-4 pb-4 pt-6">
              <span className="relative -mt-12 inline-block h-28 w-28 shrink-0 overflow-hidden rounded-full border-2">
                <img
                  src="https://images.pexels.com/photos/1115816/pexels-photo-1115816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                  alt="Channel"
                  className="h-full w-full"
                />
              </span>

              <div className="mr-auto inline-block">
                <h1 className="font-bolg text-xl">React Patterns</h1>
                <p className="text-sm text-gray-400">@reactpatterns</p>
                <p className="text-sm text-gray-400">
                  600k Subscribers&nbsp;&middot;&nbsp;220 Subscribed
                </p>
              </div>

              <div className="inline-block">
                <button className="group/btn mr-1 flex w-full items-center gap-x-2 bg-[#ae7aff] px-3 py-2 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e] sm:w-auto">
                  <span className="inline-block w-5">
                    <PencilIcon strokeWidth={2} />
                  </span>
                  Edit
                </button>
              </div>
            </div>

            <ul className="no-scrollbar sticky top-[66px] z-[2] flex flex-row gap-x-2 overflow-auto border-b-2 border-gray-400 bg-[#121212] py-2 sm:top-[82px]">
              <li className="w-full">
                <button className="w-full border-b-2 border-[#ae7aff] bg-white px-3 py-1.5 text-[#ae7aff]">
                  Videos
                </button>
              </li>
              <li className="w-full">
                <button className="w-full border-b-2 border-transparent px-3 py-1.5 text-gray-400">
                  Playlist
                </button>
              </li>
              <li className="w-full">
                <button className="w-full border-b-2 border-transparent px-3 py-1.5 text-gray-400">
                  Tweets
                </button>
              </li>
              <li className="w-full">
                <button className="w-full border-b-2 border-transparent px-3 py-1.5 text-gray-400">
                  Subscribed
                </button>
              </li>
            </ul>
            <div className="flex justify-center p-4">
              <div className="w-full max-w-sm text-center">
                <p className="mb-3 w-full">
                  <span className="inline-flex rounded-full bg-[#E4D3FF] p-2 text-[#AE7AFF]">
                    <PlayIcon className="w-6" />
                  </span>
                </p>
                <h5 className="mb-2 font-semibold">No videos uploaded</h5>
                <p>
                  This page has yet to upload a video. Search another page in
                  order to find more videos.
                </p>
                <button className="mt-4 inline-flex items-center gap-x-2 bg-[#ae7aff] px-3 py-2 font-semibold text-black">
                  <PlusIcon className="h-5 w-5" strokeWidth={2} /> New video
                </button>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  );
};

export default MyChannelEmptyVideo;


================================================
FILE: src/components/templates/youtube/mychannel-tweets.jsx
================================================
"use client";
import { classNames } from "@/utils";
import React from "react";
import {
  EllipsisHorizontalIcon,
  FaceSmileIcon,
  HandThumbDownIcon,
  HandThumbUpIcon,
  MagnifyingGlassIcon,
  PencilIcon,
  XCircleIcon,
} from "@heroicons/react/24/outline";
import { bottomTotalItems, navItems, logo, tweets } from "./data";

const MyChannelTweets = () => {
  return (
    <div className="h-screen overflow-y-auto bg-[#121212] text-white">
      <header className="sticky inset-x-0 top-0 z-50 w-full border-b border-white bg-[#121212] px-4">
        <nav className="mx-auto flex max-w-7xl items-center py-2">
          <div className="mr-4 w-12 shrink-0 sm:w-16">{logo}</div>
          <div className="relative mx-auto hidden w-full max-w-md overflow-hidden sm:block">
            <input
              className="w-full border bg-transparent py-1 pl-8 pr-3 placeholder-white outline-none sm:py-2"
              placeholder="Search"
            />
            <span className="absolute left-2.5 top-1/2 inline-block -translate-y-1/2">
              <MagnifyingGlassIcon className=" h-4 w-4" />
            </span>
          </div>
          <button className="ml-auto sm:hidden">
            <MagnifyingGlassIcon className=" h-6 w-6" />
          </button>
          <button className="group peer ml-4 flex w-6 shrink-0 flex-wrap gap-y-1.5 sm:hidden">
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-2/3 bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
          </button>
          <div className="fixed inset-y-0 right-0 flex w-full max-w-xs shrink-0 translate-x-full flex-col border-l border-white bg-[#121212] duration-200 hover:translate-x-0 peer-focus:translate-x-0 sm:static sm:ml-4 sm:w-auto sm:translate-x-0 sm:border-none">
            <div className="relative flex w-full items-center justify-between border-b border-white px-4 py-2 sm:hidden">
              <span className="inline-block w-12">{logo}</span>
              <button className="inline-block w-8">
                <XCircleIcon />
              </button>
            </div>
            <ul className="my-4 flex w-full flex-wrap gap-2 px-4 sm:hidden">
              {navItems
                .filter((item) => !item.mobileView)
                .map((item) => (
                  <li key={item.name} className="w-full">
                    <button className="flex w-full items-center justify-start gap-x-4 border border-white px-4 py-1.5 text-left hover:bg-[#ae7aff] hover:text-black focus:border-[#ae7aff] focus:bg-[#ae7aff] focus:text-black">
                      <span className="inline-block w-full max-w-[20px] group-hover:mr-4 lg:mr-4">
                        {item.icon}
                      </span>
                      <span>{item.name}</span>
                    </button>
                  </li>
                ))}
            </ul>

            <div className="mb-8 mt-auto px-4 sm:mb-0 sm:mt-0 sm:px-0">
              <button className="flex w-full gap-4 text-left sm:items-center">
                <img
                  src="https://images.pexels.com/photos/1115816/pexels-photo-1115816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                  alt="React-Patterns"
                  className="h-16 w-16 shrink-0 rounded-full sm:h-12 sm:w-12"
                />

                <div className="w-full pt-2 sm:hidden">
                  <h6 className="font-semibold">React Patterns</h6>
                  <p className="text-sm text-gray-300">@reactpatterns</p>
                </div>
              </button>
            </div>
          </div>
        </nav>
      </header>
      <div className="flex min-h-[calc(100vh-66px)] sm:min-h-[calc(100vh-82px)]">
        <aside className="group fixed inset-x-0 bottom-0 z-40 w-full shrink-0 border-t border-white bg-[#121212] px-2 py-2 sm:absolute sm:inset-y-0 sm:max-w-[70px] sm:border-r sm:border-t-0 sm:py-6 sm:hover:max-w-[250px] lg:sticky lg:max-w-[250px]">
          <ul className="flex justify-around gap-y-2 sm:sticky sm:top-[106px] sm:min-h-[calc(100vh-130px)] sm:flex-col">
            {navItems.map((item, i, arr) => (
              <li
                key={item.name}
                className={classNames(
                  item.mobileView ? "" : "hidden sm:block",
                  arr.length - i === bottomTotalItems ? "mt-auto" : "",
                )}
              >
                <button className="flex flex-col items-center justify-center border-white py-1 focus:text-[#ae7aff] sm:w-full sm:flex-row sm:border sm:p-1.5 sm:hover:bg-[#ae7aff] sm:hover:text-black sm:focus:border-[#ae7aff] sm:focus:bg-[#ae7aff] sm:focus:text-black sm:group-hover:justify-start sm:group-hover:px-4 lg:justify-start lg:px-4">
                  <span className="inline-block w-5 shrink-0 sm:group-hover:mr-4 lg:mr-4">
                    {item.icon}
                  </span>
                  <span className="block sm:hidden sm:group-hover:inline lg:inline">
                    {item.name}
                  </span>
                </button>
              </li>
            ))}
          </ul>
        </aside>
        <section className="w-full pb-[70px] sm:ml-[70px] sm:pb-0 lg:ml-0">
          <div className="relative min-h-[150px] w-full pt-[16.28%]">
            <div className="absolute inset-0 overflow-hidden">
              <img
                src="https://images.pexels.com/photos/1092424/pexels-photo-1092424.jpeg?auto=compress"
                alt="cover-photo"
              />
            </div>
          </div>
          <div className="px-4 pb-4">
            <div className="flex flex-wrap gap-4 pb-4 pt-6">
              <span className="relative -mt-12 inline-block h-28 w-28 shrink-0 overflow-hidden rounded-full border-2">
                <img
                  src="https://images.pexels.com/photos/1115816/pexels-photo-1115816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                  alt="Channel"
                  className="h-full w-full"
                />
              </span>

              <div className="mr-auto inline-block">
                <h1 className="font-bolg text-xl">React Patterns</h1>
                <p className="text-sm text-gray-400">@reactpatterns</p>
                <p className="text-sm text-gray-400">
                  600k Subscribers&nbsp;&middot;&nbsp;220 Subscribed
                </p>
              </div>

              <div className="inline-block">
                <button className="group/btn mr-1 flex w-full items-center gap-x-2 bg-[#ae7aff] px-3 py-2 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e] sm:w-auto">
                  <span className="inline-block w-5">
                    <PencilIcon strokeWidth={2} />
                  </span>
                  Edit
                </button>
              </div>
            </div>

            <ul className="no-scrollbar sticky top-[66px] z-[2] flex flex-row gap-x-2 overflow-auto border-b-2 border-gray-400 bg-[#121212] py-2 sm:top-[82px]">
              <li className="w-full">
                <button className="w-full border-b-2 border-transparent px-3 py-1.5 text-gray-400">
                  Videos
                </button>
              </li>
              <li className="w-full">
                <button className="w-full border-b-2 border-transparent px-3 py-1.5 text-gray-400">
                  Playlist
                </button>
              </li>
              <li className="w-full">
                <button className="w-full border-b-2 border-[#ae7aff] bg-white px-3 py-1.5 text-[#ae7aff]">
                  Tweets
                </button>
              </li>
              <li className="w-full">
                <button className="w-full border-b-2 border-transparent px-3 py-1.5 text-gray-400">
                  Subscribed
                </button>
              </li>
            </ul>
            <div className="mt-2 border pb-2">
              <textarea
                className="mb-2 h-10 w-full resize-none border-none bg-transparent px-3 pt-2 outline-none"
                placeholder="Write a tweet"
              ></textarea>
              <div className="flex items-center justify-end gap-x-3 px-3">
                <button className="inline-block h-5 w-5 hover:text-[#ae7aff]">
                  <FaceSmileIcon strokeWidth={2} />
                </button>
                <button className="inline-block h-5 w-5 hover:text-[#ae7aff]">
                  <EllipsisHorizontalIcon strokeWidth={2} />
                </button>
                <button className="bg-[#ae7aff] px-3 py-2 font-semibold text-black">
                  Send
                </button>
              </div>
            </div>
            <div className="py-4">
              {tweets.map((tweet) => (
                <div
                  key={tweet.id}
                  className="flex gap-3 border-b border-gray-700 py-4 last:border-b-transparent"
                >
                  <div className="h-14 w-14 shrink-0">
                    <img
                      src={tweet.owner.avatar}
                      alt={tweet.owner.fullName}
                      className="h-full w-full rounded-full"
                    />
                  </div>
                  <div className="w-full">
                    <h4 className="mb-1 flex items-center gap-x-2">
                      <span className="font-semibold">
                        {tweet.owner.fullName}
                      </span>
                      &nbsp;
                      <span className="inline-block text-sm text-gray-400">
                        {tweet.createdAt}
                      </span>
                    </h4>
                    <p className="mb-2">{tweet.content}</p>
                    <div className="flex gap-4">
                      <button
                        className={`group inline-flex items-center gap-x-1 outline-none after:content-[attr(data-like-count)] focus:after:content-[attr(data-like-count-alt)]`}
                        data-like-count={tweet.likeCount}
                        data-like-count-alt={
                          tweet.liked
                            ? tweet.likeCount - 1
                            : tweet.likeCount + 1
                        }
                      >
                        <HandThumbUpIcon
                          className={`h-5 w-5 ${
                            tweet.liked
                              ? "text-[#ae7aff] group-focus:text-inherit"
                              : "text-inherit group-focus:text-[#ae7aff]"
                          }`}
                        />
                      </button>
                      <button
                        className={`group inline-flex items-center gap-x-1 outline-none after:content-[attr(data-dislike-count)] focus:after:content-[attr(data-dislike-count-alt)]`}
                        data-dislike-count={tweet.dislikeCount}
                        data-dislike-count-alt={
                          tweet.disliked
                            ? tweet.dislikeCount - 1
                            : tweet.dislikeCount + 1
                        }
                      >
                        <HandThumbDownIcon
                          className={`h-5 w-5 ${
                            tweet.disliked
                              ? "text-[#ae7aff] group-focus:text-inherit"
                              : "text-inherit group-focus:text-[#ae7aff]"
                          }`}
                        />
                      </button>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>
      </div>
    </div>
  );
};

export default MyChannelTweets;


================================================
FILE: src/components/templates/youtube/privacy-policy.jsx
================================================
import React from "react";
import { XCircleIcon } from "@heroicons/react/24/outline";
import { siteNavItems, logo } from "./data";

const PrivacyPolicy = () => {
  return (
    <div className="h-screen overflow-y-auto bg-[#121212] text-white">
      <header className="sticky inset-x-0 top-0 z-50 w-full border-b border-white bg-[#121212] px-4">
        <nav className="mx-auto flex max-w-7xl items-center py-2">
          <div className="mr-4 w-12 shrink-0 sm:w-16">{logo}</div>

          <button className="group peer ml-auto flex w-6 shrink-0 flex-wrap gap-y-1.5 md:hidden">
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-2/3 bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
          </button>
          <div className="fixed inset-y-0 right-0 flex w-full max-w-xs shrink-0 translate-x-full flex-col justify-between border-l border-white bg-[#121212] duration-200 hover:translate-x-0 peer-focus:translate-x-0 md:static md:ml-4 md:max-w-full md:shrink md:translate-x-0 md:flex-row md:border-none">
            <div className="relative flex w-full items-center justify-between border-b border-white px-4 py-2 md:hidden">
              <span className="inline-block w-12">{logo}</span>
              <button className="inline-block w-8">
                <XCircleIcon />
              </button>
            </div>
            <ul className="my-4 flex w-full flex-wrap gap-2 px-4 md:my-0 md:w-auto md:px-0">
              {siteNavItems.map((item) => (
                <li key={item} className="w-full md:w-auto">
                  <button className="flex w-full items-center justify-start gap-x-4 border border-white px-4 py-1.5 text-left hover:bg-[#ae7aff] hover:text-black focus:border-[#ae7aff] focus:bg-[#ae7aff] focus:text-black md:border-none">
                    <span>{item}</span>
                  </button>
                </li>
              ))}
            </ul>

            <div className="mb-8 mt-auto flex flex-wrap gap-4 px-4 md:mb-0 md:mt-0 md:items-center md:px-0">
              <button className="w-full bg-[#383737] px-3 py-2 hover:bg-[#4f4e4e] md:w-auto md:bg-transparent">
                Log in
              </button>
              <button className="mr-1 w-full bg-[#ae7aff] px-3 py-2 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e] md:w-auto">
                Sign up
              </button>
            </div>
          </div>
        </nav>
      </header>
      <section className="relative mx-auto max-w-3xl px-4 py-20">
        <div className="mb-16 text-center">
          <h1 className="mb-3 text-sm text-[#ae7aff]">Privacy Policy</h1>
          <h2 className="mb-4 text-4xl font-bold">
            We care about your privacy
          </h2>
          <h3 className="text-gray-300">
            Your privacy is important to us at videoTube. We repect your privacy
            regarding any information we may collect from you across out
            website.
          </h3>
        </div>
        <div className="mb-8">
          <p className="mb-4 text-gray-300">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptate
            facilis officia magni quidem labore obcaecati sequi repellat sit
            iusto modi doloribus excepturi consectetur, numquam quis. Lorem
            ipsum dolor sit amet, consectetur adipisicing elit. Nemo voluptatum
            provident eveniet neque impedit ipsa molestias, animi reiciendis
            dolorum vitae cumque, itaque quae. Repudiandae obcaecati eaque
            perferendis fuga amet at?
          </p>
          <p className="mb-4 text-gray-300">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad
            excepturi optio consequuntur quas deleniti sequi laboriosam rem,
            necessitatibus voluptates modi commodi exercitationem eos expedita
            repellendus? Quisquam reiciendis illo deleniti, eligendi architecto
            velit veniam. Odit repudiandae rem, recusandae placeat suscipit non
            incidunt similique optio facilis quae architecto minus iusto modi
            natus quod quidem laboriosam unde error explicabo ullam! Enim unde
            iste, beatae, corrupti, velit animi perferendis nisi maxime dolore
            qui aliquam.
          </p>
        </div>
        <div className="mb-8">
          <h3 className="mb-4 text-xl font-bold sm:text-2xl md:text-3xl">
            What information do we collect?
          </h3>
          <p className="mb-4 text-gray-300">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit
            tenetur aperiam excepturi deleniti, tempora quidem magni obcaecati
            quas. Quo perspiciatis, deserunt velit porro ipsum, quod sit ratione
            cupiditate cumque aperiam dolorem adipisci architecto dolor id
            quisquam aliquid aspernatur. Repellat, consectetur? At harum
            necessitatibus nisi rem ullam sapiente laborum eaque? Harum?
          </p>
          <p className="mb-4 text-gray-300">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro at
            iusto laboriosam possimus in! Repellendus ea accusantium omnis
            impedit incidunt facere fuga consectetur quidem sint dolorem
            necessitatibus corporis itaque sed qui voluptates amet, sunt fugit?
            Deleniti explicabo et veniam alias eligendi similique, molestiae
            ipsa vitae rerum non repudiandae accusamus error temporibus
            pariatur. Sit totam, odit facilis adipisci ut vitae neque deserunt
            obcaecati. Laborum labore possimus ipsa quo placeat, tempora
            voluptatibus commodi itaque quia cupiditate nihil at, porro deleniti
            totam quaerat!
          </p>
          <p className="mb-4 text-gray-300">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum
            fuga asperiores voluptatibus quidem dolores, quos officiis nostrum
            veritatis. A praesentium dicta temporibus vitae, excepturi sequi
            itaque? Pariatur veniam praesentium error qui necessitatibus. Et
            autem dolorum consectetur officia, provident quasi soluta?
          </p>
        </div>
        <div className="mb-8">
          <h3 className="mb-4 text-xl font-bold sm:text-2xl md:text-3xl">
            How do we use your information
          </h3>
          <p className="mb-4 text-gray-300">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit
            tenetur aperiam excepturi deleniti, tempora quidem magni obcaecati
            quas. Quo perspiciatis, deserunt velit porro ipsum, quod sit ratione
            cupiditate cumque aperiam dolorem adipisci architecto dolor id
            quisquam aliquid aspernatur. Repellat, consectetur? At harum
            necessitatibus nisi rem ullam sapiente laborum eaque? Harum?
          </p>
          <p className="mb-4 text-gray-300">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro at
            iusto laboriosam possimus in! Repellendus ea accusantium omnis
            impedit incidunt facere fuga consectetur quidem sint dolorem
            necessitatibus corporis itaque sed qui voluptates amet, sunt fugit?
            Deleniti explicabo et veniam alias eligendi similique, molestiae
            ipsa vitae rerum non repudiandae accusamus error temporibus
            pariatur. Sit totam, odit facilis adipisci ut vitae neque deserunt
            obcaecati. Laborum labore possimus ipsa quo placeat, tempora
            voluptatibus commodi itaque quia cupiditate nihil at, porro deleniti
            totam quaerat!
          </p>
          <p className="mb-4 text-gray-300">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum
            fuga asperiores voluptatibus quidem dolores, quos officiis nostrum
            veritatis. A praesentium dicta temporibus vitae, excepturi sequi
            itaque? Pariatur veniam praesentium error qui necessitatibus. Et
            autem dolorum consectetur officia, provident quasi soluta?
          </p>
        </div>
        <div className="mb-8">
          <h3 className="mb-4 text-xl font-bold sm:text-2xl md:text-3xl">
            Do we use cookies and other tracking technologies?
          </h3>
          <p className="mb-4 text-gray-300">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum
            fuga asperiores voluptatibus quidem dolores, quos officiis nostrum
            veritatis. A praesentium dicta temporibus vitae, excepturi sequi
            itaque? Pariatur veniam praesentium error qui necessitatibus. Et
            autem dolorum consectetur officia, provident quasi soluta?
          </p>
        </div>
        <div className="mb-8">
          <h3 className="mb-4 text-xl font-bold sm:text-2xl md:text-3xl">
            How long do we keep tour information?
          </h3>
          <p className="mb-4 text-gray-300">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum
            fuga asperiores voluptatibus quidem dolores, quos officiis nostrum
            veritatis. A praesentium dicta temporibus vitae, excepturi sequi
            itaque? Pariatur veniam praesentium error qui necessitatibus. Et
            autem dolorum consectetur officia, provident quasi soluta?
          </p>
        </div>
        <div className="mb-8">
          <h3 className="mb-4 text-xl font-bold sm:text-2xl md:text-3xl">
            How do we keep your information safe?
          </h3>
          <p className="mb-4 text-gray-300">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum
            fuga asperiores voluptatibus quidem dolores, quos officiis nostrum
            veritatis. A praesentium dicta temporibus vitae, excepturi sequi
            itaque? Pariatur veniam praesentium error qui necessitatibus. Et
            autem dolorum consectetur officia, provident quasi soluta?
          </p>
        </div>
        <div className="mb-8">
          <h3 className="mb-4 text-xl font-bold sm:text-2xl md:text-3xl">
            What are your privacy rights
          </h3>
          <p className="mb-4 text-gray-300">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum
            fuga asperiores voluptatibus quidem dolores, quos officiis nostrum
            veritatis. A praesentium dicta temporibus vitae, excepturi sequi
            itaque? Pariatur veniam praesentium error qui necessitatibus. Et
            autem dolorum consectetur officia, provident quasi soluta?
          </p>
        </div>
        <div className="mb-8">
          <h3 className="mb-4 text-xl font-bold sm:text-2xl md:text-3xl">
            How can you contact us about this policy?
          </h3>
          <p className="mb-4 text-gray-300">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum
            fuga asperiores voluptatibus quidem dolores, quos officiis nostrum
            veritatis. A praesentium dicta temporibus vitae, excepturi sequi
            itaque? Pariatur veniam praesentium error qui necessitatibus. Et
            autem dolorum consectetur officia, provident quasi soluta?
          </p>
          <ol className="list-decimal pl-4 text-gray-300">
            <li>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error,
              voluptas.
            </li>
            <li>Lorem ipsum dolor sit amet consectetur adipisicing.</li>
            <li>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus
              voluptatem optio autem eveniet ab natus!
            </li>
          </ol>
        </div>
      </section>
      <footer className="px-4">
        <div className="mx-auto flex max-w-7xl items-center justify-between py-2">
          <div className="mr-4 w-12 shrink-0 sm:w-16">{logo}</div>
          <p className="text-sm">
            &copy;{new Date().getFullYear()} VideoTube. All rights reserved.
          </p>
        </div>
      </footer>
    </div>
  );
};

export default PrivacyPolicy;


================================================
FILE: src/components/templates/youtube/register.jsx
================================================
import React from "react";
import { logo } from "./data";

const Register = () => {
  return (
    <div className="h-screen overflow-y-auto bg-[#121212] text-white">
      <div className="mx-auto my-8 flex w-full max-w-sm flex-col px-4">
        <div className="mx-auto inline-block w-16">{logo}</div>
        <div className="mb-6 w-full text-center text-2xl font-semibold uppercase">
          Play
        </div>

        <label htmlFor="email" className="mb-1 inline-block text-gray-300">
          Email*
        </label>
        <input
          id="email"
          type="email"
          placeholder="Enter your email"
          className="mb-4 rounded-lg border bg-transparent px-3 py-2"
        />
        <button className="bg-[#ae7aff] px-4 py-3 text-black">
          Sign up with Email
        </button>
      </div>
    </div>
  );
};

export default Register;


================================================
FILE: src/components/templates/youtube/terms-and-conditions.jsx
================================================
import React from "react";
import { XCircleIcon } from "@heroicons/react/24/outline";
import { siteNavItems, logo } from "./data";

const TermsAndConditions = () => {
  return (
    <div className="h-screen overflow-y-auto bg-[#121212] text-white">
      <header className="sticky inset-x-0 top-0 z-50 w-full border-b border-white bg-[#121212] px-4">
        <nav className="mx-auto flex max-w-7xl items-center py-2">
          <div className="mr-4 w-12 shrink-0 sm:w-16">{logo}</div>

          <button className="group peer ml-auto flex w-6 shrink-0 flex-wrap gap-y-1.5 md:hidden">
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-2/3 bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
          </button>
          <div className="fixed inset-y-0 right-0 flex w-full max-w-xs shrink-0 translate-x-full flex-col justify-between border-l border-white bg-[#121212] duration-200 hover:translate-x-0 peer-focus:translate-x-0 md:static md:ml-4 md:max-w-full md:shrink md:translate-x-0 md:flex-row md:border-none">
            <div className="relative flex w-full items-center justify-between border-b border-white px-4 py-2 md:hidden">
              <span className="inline-block w-12">{logo}</span>
              <button className="inline-block w-8">
                <XCircleIcon />
              </button>
            </div>
            <ul className="my-4 flex w-full flex-wrap gap-2 px-4 md:my-0 md:w-auto md:px-0">
              {siteNavItems.map((item) => (
                <li key={item} className="w-full md:w-auto">
                  <button className="flex w-full items-center justify-start gap-x-4 border border-white px-4 py-1.5 text-left hover:bg-[#ae7aff] hover:text-black focus:border-[#ae7aff] focus:bg-[#ae7aff] focus:text-black md:border-none">
                    <span>{item}</span>
                  </button>
                </li>
              ))}
            </ul>

            <div className="mb-8 mt-auto flex flex-wrap gap-4 px-4 md:mb-0 md:mt-0 md:items-center md:px-0">
              <button className="w-full bg-[#383737] px-3 py-2 hover:bg-[#4f4e4e] md:w-auto md:bg-transparent">
                Log in
              </button>
              <button className="mr-1 w-full bg-[#ae7aff] px-3 py-2 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e] md:w-auto">
                Sign up
              </button>
            </div>
          </div>
        </nav>
      </header>
      <section className="relative mx-auto max-w-3xl px-4 py-20">
        <div className="mb-16 border-b pb-16 text-center">
          <h1 className="mb-3 text-sm text-[#ae7aff]">
            Current as of 20 Jan 2022
          </h1>
          <h2 className="mb-4 text-4xl font-bold">Terms and conditions</h2>
          <h3 className="text-gray-300">
            By accessing our website, you are agreeing to be bound by these
            terms of service, and agree that you are responsible for compliance
            with any applicable local laws.
          </h3>
        </div>
        <div className="mb-8">
          <p className="mb-4 text-gray-300">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptate
            facilis officia magni quidem labore obcaecati sequi repellat sit
            iusto modi doloribus excepturi consectetur, numquam quis. Lorem
            ipsum dolor sit amet, consectetur adipisicing elit. Nemo voluptatum
            provident eveniet neque impedit ipsa molestias, animi reiciendis
            dolorum vitae cumque, itaque quae. Repudiandae obcaecati eaque
            perferendis fuga amet at?
          </p>
          <p className="mb-4 text-gray-300">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad
            excepturi optio consequuntur quas deleniti sequi laboriosam rem,
            necessitatibus voluptates modi commodi exercitationem eos expedita
            repellendus? Quisquam reiciendis illo deleniti, eligendi architecto
            velit veniam. Odit repudiandae rem, recusandae placeat suscipit non
            incidunt similique optio facilis quae architecto minus iusto modi
            natus quod quidem laboriosam unde error explicabo ullam! Enim unde
            iste, beatae, corrupti, velit animi perferendis nisi maxime dolore
            qui aliquam.
          </p>
        </div>
        <div className="mb-8">
          <h3 className="mb-4 text-xl font-bold sm:text-2xl md:text-3xl">
            What information do we collect?
          </h3>
          <p className="mb-4 text-gray-300">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit
            tenetur aperiam excepturi deleniti, tempora quidem magni obcaecati
            quas. Quo perspiciatis, deserunt velit porro ipsum, quod sit ratione
            cupiditate cumque aperiam dolorem adipisci architecto dolor id
            quisquam aliquid aspernatur. Repellat, consectetur? At harum
            necessitatibus nisi rem ullam sapiente laborum eaque? Harum?
          </p>
          <p className="mb-4 text-gray-300">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro at
            iusto laboriosam possimus in! Repellendus ea accusantium omnis
            impedit incidunt facere fuga consectetur quidem sint dolorem
            necessitatibus corporis itaque sed qui voluptates amet, sunt fugit?
            Deleniti explicabo et veniam alias eligendi similique, molestiae
            ipsa vitae rerum non repudiandae accusamus error temporibus
            pariatur. Sit totam, odit facilis adipisci ut vitae neque deserunt
            obcaecati. Laborum labore possimus ipsa quo placeat, tempora
            voluptatibus commodi itaque quia cupiditate nihil at, porro deleniti
            totam quaerat!
          </p>
          <p className="mb-4 text-gray-300">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum
            fuga asperiores voluptatibus quidem dolores, quos officiis nostrum
            veritatis. A praesentium dicta temporibus vitae, excepturi sequi
            itaque? Pariatur veniam praesentium error qui necessitatibus. Et
            autem dolorum consectetur officia, provident quasi soluta?
          </p>
        </div>
        <div className="mb-8">
          <h3 className="mb-4 text-xl font-bold sm:text-2xl md:text-3xl">
            How do we use your information
          </h3>
          <p className="mb-4 text-gray-300">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit
            tenetur aperiam excepturi deleniti, tempora quidem magni obcaecati
            quas. Quo perspiciatis, deserunt velit porro ipsum, quod sit ratione
            cupiditate cumque aperiam dolorem adipisci architecto dolor id
            quisquam aliquid aspernatur. Repellat, consectetur? At harum
            necessitatibus nisi rem ullam sapiente laborum eaque? Harum?
          </p>
          <p className="mb-4 text-gray-300">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro at
            iusto laboriosam possimus in! Repellendus ea accusantium omnis
            impedit incidunt facere fuga consectetur quidem sint dolorem
            necessitatibus corporis itaque sed qui voluptates amet, sunt fugit?
            Deleniti explicabo et veniam alias eligendi similique, molestiae
            ipsa vitae rerum non repudiandae accusamus error temporibus
            pariatur. Sit totam, odit facilis adipisci ut vitae neque deserunt
            obcaecati. Laborum labore possimus ipsa quo placeat, tempora
            voluptatibus commodi itaque quia cupiditate nihil at, porro deleniti
            totam quaerat!
          </p>
          <p className="mb-4 text-gray-300">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum
            fuga asperiores voluptatibus quidem dolores, quos officiis nostrum
            veritatis. A praesentium dicta temporibus vitae, excepturi sequi
            itaque? Pariatur veniam praesentium error qui necessitatibus. Et
            autem dolorum consectetur officia, provident quasi soluta?
          </p>
        </div>
        <div className="mb-8">
          <h3 className="mb-4 text-xl font-bold sm:text-2xl md:text-3xl">
            Do we use cookies and other tracking technologies?
          </h3>
          <p className="mb-4 text-gray-300">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum
            fuga asperiores voluptatibus quidem dolores, quos officiis nostrum
            veritatis. A praesentium dicta temporibus vitae, excepturi sequi
            itaque? Pariatur veniam praesentium error qui necessitatibus. Et
            autem dolorum consectetur officia, provident quasi soluta?
          </p>
        </div>
        <div className="mb-8">
          <h3 className="mb-4 text-xl font-bold sm:text-2xl md:text-3xl">
            How long do we keep tour information?
          </h3>
          <p className="mb-4 text-gray-300">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum
            fuga asperiores voluptatibus quidem dolores, quos officiis nostrum
            veritatis. A praesentium dicta temporibus vitae, excepturi sequi
            itaque? Pariatur veniam praesentium error qui necessitatibus. Et
            autem dolorum consectetur officia, provident quasi soluta?
          </p>
        </div>
        <div className="mb-8">
          <h3 className="mb-4 text-xl font-bold sm:text-2xl md:text-3xl">
            How do we keep your information safe?
          </h3>
          <p className="mb-4 text-gray-300">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum
            fuga asperiores voluptatibus quidem dolores, quos officiis nostrum
            veritatis. A praesentium dicta temporibus vitae, excepturi sequi
            itaque? Pariatur veniam praesentium error qui necessitatibus. Et
            autem dolorum consectetur officia, provident quasi soluta?
          </p>
        </div>
        <div className="mb-8">
          <h3 className="mb-4 text-xl font-bold sm:text-2xl md:text-3xl">
            What are your privacy rights
          </h3>
          <p className="mb-4 text-gray-300">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum
            fuga asperiores voluptatibus quidem dolores, quos officiis nostrum
            veritatis. A praesentium dicta temporibus vitae, excepturi sequi
            itaque? Pariatur veniam praesentium error qui necessitatibus. Et
            autem dolorum consectetur officia, provident quasi soluta?
          </p>
        </div>
        <div className="mb-8">
          <h3 className="mb-4 text-xl font-bold sm:text-2xl md:text-3xl">
            How can you contact us about this policy?
          </h3>
          <p className="mb-4 text-gray-300">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum
            fuga asperiores voluptatibus quidem dolores, quos officiis nostrum
            veritatis. A praesentium dicta temporibus vitae, excepturi sequi
            itaque? Pariatur veniam praesentium error qui necessitatibus. Et
            autem dolorum consectetur officia, provident quasi soluta?
          </p>
          <ol className="list-decimal pl-4 text-gray-300">
            <li>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error,
              voluptas.
            </li>
            <li>Lorem ipsum dolor sit amet consectetur adipisicing.</li>
            <li>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus
              voluptatem optio autem eveniet ab natus!
            </li>
          </ol>
        </div>
      </section>
      <footer className="px-4">
        <div className="mx-auto flex max-w-7xl items-center justify-between border-t py-2">
          <div className="mr-4 w-12 shrink-0 sm:w-16">{logo}</div>
          <p className="text-sm">
            &copy;{new Date().getFullYear()} VideoTube. All rights reserved.
          </p>
        </div>
      </footer>
    </div>
  );
};

export default TermsAndConditions;


================================================
FILE: src/components/templates/youtube/upload-video.jsx
================================================
"use client";
import { classNames } from "@/utils";
import React from "react";
import {
  ArrowUpTrayIcon,
  MagnifyingGlassIcon,
  PencilIcon,
  PlayIcon,
  PlusIcon,
  XCircleIcon,
} from "@heroicons/react/24/outline";
import { bottomTotalItems, navItems, logo } from "./data";

const UploadVideo = () => {
  return (
    <div className="h-screen overflow-y-auto bg-[#121212] text-white">
      <header className="sticky inset-x-0 top-0 z-50 w-full border-b border-white bg-[#121212] px-4">
        <nav className="mx-auto flex max-w-7xl items-center py-2">
          <div className="mr-4 w-12 shrink-0 sm:w-16">{logo}</div>
          <div className="relative mx-auto hidden w-full max-w-md overflow-hidden sm:block">
            <input
              className="w-full border bg-transparent py-1 pl-8 pr-3 placeholder-white outline-none sm:py-2"
              placeholder="Search"
            />
            <span className="absolute left-2.5 top-1/2 inline-block -translate-y-1/2">
              <MagnifyingGlassIcon className=" h-4 w-4" />
            </span>
          </div>
          <button className="ml-auto sm:hidden">
            <MagnifyingGlassIcon className=" h-6 w-6" />
          </button>
          <button className="group peer ml-4 flex w-6 shrink-0 flex-wrap gap-y-1.5 sm:hidden">
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-2/3 bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
          </button>
          <div className="fixed inset-y-0 right-0 flex w-full max-w-xs shrink-0 translate-x-full flex-col border-l border-white bg-[#121212] duration-200 hover:translate-x-0 peer-focus:translate-x-0 sm:static sm:ml-4 sm:w-auto sm:translate-x-0 sm:border-none">
            <div className="relative flex w-full items-center justify-between border-b border-white px-4 py-2 sm:hidden">
              <span className="inline-block w-12">{logo}</span>
              <button className="inline-block w-8">
                <XCircleIcon />
              </button>
            </div>
            <ul className="my-4 flex w-full flex-wrap gap-2 px-4 sm:hidden">
              {navItems
                .filter((item) => !item.mobileView)
                .map((item) => (
                  <li key={item.name} className="w-full">
                    <button className="flex w-full items-center justify-start gap-x-4 border border-white px-4 py-1.5 text-left hover:bg-[#ae7aff] hover:text-black focus:border-[#ae7aff] focus:bg-[#ae7aff] focus:text-black">
                      <span className="inline-block w-full max-w-[20px] group-hover:mr-4 lg:mr-4">
                        {item.icon}
                      </span>
                      <span>{item.name}</span>
                    </button>
                  </li>
                ))}
            </ul>

            <div className="mb-8 mt-auto px-4 sm:mb-0 sm:mt-0 sm:px-0">
              <button className="flex w-full gap-4 text-left sm:items-center">
                <img
                  src="https://images.pexels.com/photos/1115816/pexels-photo-1115816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                  alt="React-Patterns"
                  className="h-16 w-16 shrink-0 rounded-full sm:h-12 sm:w-12"
                />

                <div className="w-full pt-2 sm:hidden">
                  <h6 className="font-semibold">React Patterns</h6>
                  <p className="text-sm text-gray-300">@reactpatterns</p>
                </div>
              </button>
            </div>
          </div>
        </nav>
      </header>
      <div className="flex min-h-[calc(100vh-66px)] sm:min-h-[calc(100vh-82px)]">
        <aside className="group fixed inset-x-0 bottom-0 z-40 w-full shrink-0 border-t border-white bg-[#121212] px-2 py-2 sm:absolute sm:inset-y-0 sm:max-w-[70px] sm:border-r sm:border-t-0 sm:py-6 sm:hover:max-w-[250px] lg:sticky lg:max-w-[250px]">
          <ul className="flex justify-around gap-y-2 sm:sticky sm:top-[106px] sm:min-h-[calc(100vh-130px)] sm:flex-col">
            {navItems.map((item, i, arr) => (
              <li
                key={item.name}
                className={classNames(
                  item.mobileView ? "" : "hidden sm:block",
                  arr.length - i === bottomTotalItems ? "mt-auto" : "",
                )}
              >
                <button className="flex flex-col items-center justify-center border-white py-1 focus:text-[#ae7aff] sm:w-full sm:flex-row sm:border sm:p-1.5 sm:hover:bg-[#ae7aff] sm:hover:text-black sm:focus:border-[#ae7aff] sm:focus:bg-[#ae7aff] sm:focus:text-black sm:group-hover:justify-start sm:group-hover:px-4 lg:justify-start lg:px-4">
                  <span className="inline-block w-5 shrink-0 sm:group-hover:mr-4 lg:mr-4">
                    {item.icon}
                  </span>
                  <span className="block sm:hidden sm:group-hover:inline lg:inline">
                    {item.name}
                  </span>
                </button>
              </li>
            ))}
          </ul>
        </aside>
        <section className="relative w-full pb-[70px] sm:ml-[70px] sm:pb-0 lg:ml-0">
          <div className="relative min-h-[150px] w-full pt-[16.28%]">
            <div className="absolute inset-0 overflow-hidden">
              <img
                src="https://images.pexels.com/photos/1092424/pexels-photo-1092424.jpeg?auto=compress"
                alt="cover-photo"
              />
            </div>
          </div>
          <div className="px-4 pb-4">
            <div className="flex flex-wrap gap-4 pb-4 pt-6">
              <span className="relative -mt-12 inline-block h-28 w-28 shrink-0 overflow-hidden rounded-full border-2">
                <img
                  src="https://images.pexels.com/photos/1115816/pexels-photo-1115816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                  alt="Channel"
                  className="h-full w-full"
                />
              </span>

              <div className="mr-auto inline-block">
                <h1 className="font-bolg text-xl">React Patterns</h1>
                <p className="text-sm text-gray-400">@reactpatterns</p>
                <p className="text-sm text-gray-400">
                  600k Subscribers&nbsp;&middot;&nbsp;220 Subscribed
                </p>
              </div>

              <div className="inline-block">
                <button className="group/btn mr-1 flex w-full items-center gap-x-2 bg-[#ae7aff] px-3 py-2 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e] sm:w-auto">
                  <span className="inline-block w-5">
                    <PencilIcon strokeWidth={2} />
                  </span>
                  Edit
                </button>
              </div>
            </div>

            <ul className="no-scrollbar sticky top-[66px] z-[2] flex flex-row gap-x-2 overflow-auto border-b-2 border-gray-400 bg-[#121212] py-2 sm:top-[82px]">
              <li className="w-full">
                <button className="w-full border-b-2 border-[#ae7aff] bg-white px-3 py-1.5 text-[#ae7aff]">
                  Videos
                </button>
              </li>
              <li className="w-full">
                <button className="w-full border-b-2 border-transparent px-3 py-1.5 text-gray-400">
                  Playlist
                </button>
              </li>
              <li className="w-full">
                <button className="w-full border-b-2 border-transparent px-3 py-1.5 text-gray-400">
                  Tweets
                </button>
              </li>
              <li className="w-full">
                <button className="w-full border-b-2 border-transparent px-3 py-1.5 text-gray-400">
                  Subscribed
                </button>
              </li>
            </ul>
            <div className="flex justify-center p-4">
              <div className="w-full max-w-sm text-center">
                <p className="mb-3 w-full">
                  <span className="inline-flex rounded-full bg-[#E4D3FF] p-2 text-[#AE7AFF]">
                    <PlayIcon className="w-6" />
                  </span>
                </p>
                <h5 className="mb-2 font-semibold">No videos uploaded</h5>
                <p>
                  This page has yet to upload a video. Search another page in
                  order to find more videos.
                </p>
                <button className="mt-4 inline-flex items-center gap-x-2 bg-[#ae7aff] px-3 py-2 font-semibold text-black">
                  <PlusIcon className="h-5 w-5" strokeWidth={2} /> New video
                </button>
              </div>
            </div>
          </div>
          {/* Modal Popup */}
          <div className="absolute inset-0 z-10 bg-black/50 px-4 pb-[86px] pt-4 sm:px-14 sm:py-8">
            <div className="h-full overflow-auto border bg-[#121212]">
              <div className="flex items-center justify-between border-b p-4">
                <h2 className="text-xl font-semibold">Upload Videos</h2>
                <button className="group/btn mr-1 flex w-auto items-center gap-x-2 bg-[#ae7aff] px-3 py-2 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e]">
                  Save
                </button>
              </div>
              <div className="mx-auto flex w-full max-w-3xl flex-col gap-y-4 p-4">
                <div className="w-full border-2 border-dashed px-4 py-12 text-center">
                  <span className="mb-4 inline-block w-24 rounded-full bg-[#E4D3FF] p-4 text-[#AE7AFF]">
                    <ArrowUpTrayIcon />
                  </span>
                  <h6 className="mb-2 font-semibold">
                    Drag and drop video files to upload
                  </h6>
                  <p className="text-gray-400">
                    Your videos will be private untill you publish them.
                  </p>
                  <label
                    htmlFor="upload-video"
                    className="group/btn mt-4 inline-flex w-auto cursor-pointer items-center gap-x-2 bg-[#ae7aff] px-3 py-2 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e]"
                  >
                    <input type="file" id="upload-video" className="sr-only" />
                    Select Files
                  </label>
                </div>
                <div className="w-full">
                  <label htmlFor="thumbnail" className="mb-1 inline-block">
                    Thumbnail<sup>*</sup>
                  </label>
                  <input
                    id="thumbnail"
                    type="file"
                    className="w-full border p-1 file:mr-4 file:border-none file:bg-[#ae7aff] file:px-3 file:py-1.5"
                  />
                </div>
                <div className="w-full">
                  <label htmlFor="title" className="mb-1 inline-block">
                    Title<sup>*</sup>
                  </label>
                  <input
                    id="title"
                    type="text"
                    className="w-full border bg-transparent px-2 py-1 outline-none"
                  />
                </div>
                <div className="w-full">
                  <label htmlFor="desc" className="mb-1 inline-block">
                    Description<sup>*</sup>
                  </label>
                  <textarea
                    id="desc"
                    className="h-40 w-full resize-none border bg-transparent px-2 py-1 outline-none"
                  ></textarea>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  );
};

export default UploadVideo;


================================================
FILE: src/components/templates/youtube/uploaded-video.jsx
================================================
"use client";
import { classNames } from "@/utils";
import React from "react";
import {
  FilmIcon,
  MagnifyingGlassIcon,
  PencilIcon,
  PlayIcon,
  PlusIcon,
  XCircleIcon,
  XMarkIcon,
} from "@heroicons/react/24/outline";
import { bottomTotalItems, navItems, logo } from "./data";
import { CheckCircleIcon } from "@heroicons/react/20/solid";

const UploadedVideo = () => {
  return (
    <div className="h-screen overflow-y-auto bg-[#121212] text-white">
      <header className="sticky inset-x-0 top-0 z-50 w-full border-b border-white bg-[#121212] px-4">
        <nav className="mx-auto flex max-w-7xl items-center py-2">
          <div className="mr-4 w-12 shrink-0 sm:w-16">{logo}</div>
          <div className="relative mx-auto hidden w-full max-w-md overflow-hidden sm:block">
            <input
              className="w-full border bg-transparent py-1 pl-8 pr-3 placeholder-white outline-none sm:py-2"
              placeholder="Search"
            />
            <span className="absolute left-2.5 top-1/2 inline-block -translate-y-1/2">
              <MagnifyingGlassIcon className=" h-4 w-4" />
            </span>
          </div>
          <button className="ml-auto sm:hidden">
            <MagnifyingGlassIcon className=" h-6 w-6" />
          </button>
          <button className="group peer ml-4 flex w-6 shrink-0 flex-wrap gap-y-1.5 sm:hidden">
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-2/3 bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
          </button>
          <div className="fixed inset-y-0 right-0 flex w-full max-w-xs shrink-0 translate-x-full flex-col border-l border-white bg-[#121212] duration-200 hover:translate-x-0 peer-focus:translate-x-0 sm:static sm:ml-4 sm:w-auto sm:translate-x-0 sm:border-none">
            <div className="relative flex w-full items-center justify-between border-b border-white px-4 py-2 sm:hidden">
              <span className="inline-block w-12">{logo}</span>
              <button className="inline-block w-8">
                <XCircleIcon />
              </button>
            </div>
            <ul className="my-4 flex w-full flex-wrap gap-2 px-4 sm:hidden">
              {navItems
                .filter((item) => !item.mobileView)
                .map((item) => (
                  <li key={item.name} className="w-full">
                    <button className="flex w-full items-center justify-start gap-x-4 border border-white px-4 py-1.5 text-left hover:bg-[#ae7aff] hover:text-black focus:border-[#ae7aff] focus:bg-[#ae7aff] focus:text-black">
                      <span className="inline-block w-full max-w-[20px] group-hover:mr-4 lg:mr-4">
                        {item.icon}
                      </span>
                      <span>{item.name}</span>
                    </button>
                  </li>
                ))}
            </ul>

            <div className="mb-8 mt-auto px-4 sm:mb-0 sm:mt-0 sm:px-0">
              <button className="flex w-full gap-4 text-left sm:items-center">
                <img
                  src="https://images.pexels.com/photos/1115816/pexels-photo-1115816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                  alt="React-Patterns"
                  className="h-16 w-16 shrink-0 rounded-full sm:h-12 sm:w-12"
                />

                <div className="w-full pt-2 sm:hidden">
                  <h6 className="font-semibold">React Patterns</h6>
                  <p className="text-sm text-gray-300">@reactpatterns</p>
                </div>
              </button>
            </div>
          </div>
        </nav>
      </header>
      <div className="flex min-h-[calc(100vh-66px)] sm:min-h-[calc(100vh-82px)]">
        <aside className="group fixed inset-x-0 bottom-0 z-40 w-full shrink-0 border-t border-white bg-[#121212] px-2 py-2 sm:absolute sm:inset-y-0 sm:max-w-[70px] sm:border-r sm:border-t-0 sm:py-6 sm:hover:max-w-[250px] lg:sticky lg:max-w-[250px]">
          <ul className="flex justify-around gap-y-2 sm:sticky sm:top-[106px] sm:min-h-[calc(100vh-130px)] sm:flex-col">
            {navItems.map((item, i, arr) => (
              <li
                key={item.name}
                className={classNames(
                  item.mobileView ? "" : "hidden sm:block",
                  arr.length - i === bottomTotalItems ? "mt-auto" : "",
                )}
              >
                <button className="flex flex-col items-center justify-center border-white py-1 focus:text-[#ae7aff] sm:w-full sm:flex-row sm:border sm:p-1.5 sm:hover:bg-[#ae7aff] sm:hover:text-black sm:focus:border-[#ae7aff] sm:focus:bg-[#ae7aff] sm:focus:text-black sm:group-hover:justify-start sm:group-hover:px-4 lg:justify-start lg:px-4">
                  <span className="inline-block w-5 shrink-0 sm:group-hover:mr-4 lg:mr-4">
                    {item.icon}
                  </span>
                  <span className="block sm:hidden sm:group-hover:inline lg:inline">
                    {item.name}
                  </span>
                </button>
              </li>
            ))}
          </ul>
        </aside>
        <section className="relative w-full pb-[70px] sm:ml-[70px] sm:pb-0 lg:ml-0">
          <div className="relative min-h-[150px] w-full pt-[16.28%]">
            <div className="absolute inset-0 overflow-hidden">
              <img
                src="https://images.pexels.com/photos/1092424/pexels-photo-1092424.jpeg?auto=compress"
                alt="cover-photo"
              />
            </div>
          </div>
          <div className="px-4 pb-4">
            <div className="flex flex-wrap gap-4 pb-4 pt-6">
              <span className="relative -mt-12 inline-block h-28 w-28 shrink-0 overflow-hidden rounded-full border-2">
                <img
                  src="https://images.pexels.com/photos/1115816/pexels-photo-1115816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                  alt="Channel"
                  className="h-full w-full"
                />
              </span>

              <div className="mr-auto inline-block">
                <h1 className="font-bolg text-xl">React Patterns</h1>
                <p className="text-sm text-gray-400">@reactpatterns</p>
                <p className="text-sm text-gray-400">
                  600k Subscribers&nbsp;&middot;&nbsp;220 Subscribed
                </p>
              </div>

              <div className="inline-block">
                <button className="group/btn mr-1 flex w-full items-center gap-x-2 bg-[#ae7aff] px-3 py-2 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e] sm:w-auto">
                  <span className="inline-block w-5">
                    <PencilIcon strokeWidth={2} />
                  </span>
                  Edit
                </button>
              </div>
            </div>

            <ul className="no-scrollbar sticky top-[66px] z-[2] flex flex-row gap-x-2 overflow-auto border-b-2 border-gray-400 bg-[#121212] py-2 sm:top-[82px]">
              <li className="w-full">
                <button className="w-full border-b-2 border-[#ae7aff] bg-white px-3 py-1.5 text-[#ae7aff]">
                  Videos
                </button>
              </li>
              <li className="w-full">
                <button className="w-full border-b-2 border-transparent px-3 py-1.5 text-gray-400">
                  Playlist
                </button>
              </li>
              <li className="w-full">
                <button className="w-full border-b-2 border-transparent px-3 py-1.5 text-gray-400">
                  Tweets
                </button>
              </li>
              <li className="w-full">
                <button className="w-full border-b-2 border-transparent px-3 py-1.5 text-gray-400">
                  Subscribed
                </button>
              </li>
            </ul>
            <div className="flex justify-center p-4">
              <div className="w-full max-w-sm text-center">
                <p className="mb-3 w-full">
                  <span className="inline-flex rounded-full bg-[#E4D3FF] p-2 text-[#AE7AFF]">
                    <PlayIcon className="w-6" />
                  </span>
                </p>
                <h5 className="mb-2 font-semibold">No videos uploaded</h5>
                <p>
                  This page has yet to upload a video. Search another page in
                  order to find more videos.
                </p>
                <button className="mt-4 inline-flex items-center gap-x-2 bg-[#ae7aff] px-3 py-2 font-semibold text-black">
                  <PlusIcon className="h-5 w-5" strokeWidth={2} /> New video
                </button>
              </div>
            </div>
          </div>
          {/* Modal Popup */}
          <div className="absolute inset-x-0 top-0 z-10 flex h-[calc(100vh-66px)] items-center justify-center bg-black/50 px-4 pb-[86px] pt-4 sm:h-[calc(100vh-82px)] sm:px-14 sm:py-8">
            <div className="w-full max-w-lg overflow-auto rounded-lg border border-gray-700 bg-[#121212] p-4">
              <div className="mb-4 flex items-start justify-between">
                <h2 className="text-xl font-semibold">
                  Uploaded Video
                  <span className="block text-sm text-gray-300">
                    Track your video uploading process.
                  </span>
                </h2>
                <button className="h-6 w-6">
                  <XMarkIcon />
                </button>
              </div>
              <div className="mb-6 flex gap-x-2 border p-3">
                <div className="w-8 shrink-0">
                  <span className="inline-block w-full rounded-full bg-[#E4D3FF] p-1 text-[#AE7AFF]">
                    <FilmIcon />
                  </span>
                </div>
                <div className="flex flex-col">
                  <h6>Dashboard prototype recording.mp4</h6>
                  <p className="text-sm">16 MB</p>
                  <div class="mt-2 flex items-center">
                    <span className="mr-2 inline-block w-6 text-[#ae7aff]">
                      <CheckCircleIcon />
                    </span>
                    Uploaded Successfully
                  </div>
                </div>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <button className="border px-4 py-3">Cancel</button>
                <button className="bg-[#ae7aff] px-4 py-3 text-black disabled:bg-[#E4D3FF]">
                  Finish
                </button>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  );
};

export default UploadedVideo;


================================================
FILE: src/components/templates/youtube/uploading-video.jsx
================================================
"use client";
import { classNames } from "@/utils";
import React from "react";
import {
  FilmIcon,
  MagnifyingGlassIcon,
  PencilIcon,
  PlayIcon,
  PlusIcon,
  XCircleIcon,
  XMarkIcon,
} from "@heroicons/react/24/outline";
import { bottomTotalItems, navItems, logo } from "./data";

const UploadingVideo = () => {
  return (
    <div className="h-screen overflow-y-auto bg-[#121212] text-white">
      <header className="sticky inset-x-0 top-0 z-50 w-full border-b border-white bg-[#121212] px-4">
        <nav className="mx-auto flex max-w-7xl items-center py-2">
          <div className="mr-4 w-12 shrink-0 sm:w-16">{logo}</div>
          <div className="relative mx-auto hidden w-full max-w-md overflow-hidden sm:block">
            <input
              className="w-full border bg-transparent py-1 pl-8 pr-3 placeholder-white outline-none sm:py-2"
              placeholder="Search"
            />
            <span className="absolute left-2.5 top-1/2 inline-block -translate-y-1/2">
              <MagnifyingGlassIcon className=" h-4 w-4" />
            </span>
          </div>
          <button className="ml-auto sm:hidden">
            <MagnifyingGlassIcon className=" h-6 w-6" />
          </button>
          <button className="group peer ml-4 flex w-6 shrink-0 flex-wrap gap-y-1.5 sm:hidden">
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-2/3 bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
          </button>
          <div className="fixed inset-y-0 right-0 flex w-full max-w-xs shrink-0 translate-x-full flex-col border-l border-white bg-[#121212] duration-200 hover:translate-x-0 peer-focus:translate-x-0 sm:static sm:ml-4 sm:w-auto sm:translate-x-0 sm:border-none">
            <div className="relative flex w-full items-center justify-between border-b border-white px-4 py-2 sm:hidden">
              <span className="inline-block w-12">{logo}</span>
              <button className="inline-block w-8">
                <XCircleIcon />
              </button>
            </div>
            <ul className="my-4 flex w-full flex-wrap gap-2 px-4 sm:hidden">
              {navItems
                .filter((item) => !item.mobileView)
                .map((item) => (
                  <li key={item.name} className="w-full">
                    <button className="flex w-full items-center justify-start gap-x-4 border border-white px-4 py-1.5 text-left hover:bg-[#ae7aff] hover:text-black focus:border-[#ae7aff] focus:bg-[#ae7aff] focus:text-black">
                      <span className="inline-block w-full max-w-[20px] group-hover:mr-4 lg:mr-4">
                        {item.icon}
                      </span>
                      <span>{item.name}</span>
                    </button>
                  </li>
                ))}
            </ul>

            <div className="mb-8 mt-auto px-4 sm:mb-0 sm:mt-0 sm:px-0">
              <button className="flex w-full gap-4 text-left sm:items-center">
                <img
                  src="https://images.pexels.com/photos/1115816/pexels-photo-1115816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                  alt="React-Patterns"
                  className="h-16 w-16 shrink-0 rounded-full sm:h-12 sm:w-12"
                />

                <div className="w-full pt-2 sm:hidden">
                  <h6 className="font-semibold">React Patterns</h6>
                  <p className="text-sm text-gray-300">@reactpatterns</p>
                </div>
              </button>
            </div>
          </div>
        </nav>
      </header>
      <div className="flex min-h-[calc(100vh-66px)] sm:min-h-[calc(100vh-82px)]">
        <aside className="group fixed inset-x-0 bottom-0 z-40 w-full shrink-0 border-t border-white bg-[#121212] px-2 py-2 sm:absolute sm:inset-y-0 sm:max-w-[70px] sm:border-r sm:border-t-0 sm:py-6 sm:hover:max-w-[250px] lg:sticky lg:max-w-[250px]">
          <ul className="flex justify-around gap-y-2 sm:sticky sm:top-[106px] sm:min-h-[calc(100vh-130px)] sm:flex-col">
            {navItems.map((item, i, arr) => (
              <li
                key={item.name}
                className={classNames(
                  item.mobileView ? "" : "hidden sm:block",
                  arr.length - i === bottomTotalItems ? "mt-auto" : "",
                )}
              >
                <button className="flex flex-col items-center justify-center border-white py-1 focus:text-[#ae7aff] sm:w-full sm:flex-row sm:border sm:p-1.5 sm:hover:bg-[#ae7aff] sm:hover:text-black sm:focus:border-[#ae7aff] sm:focus:bg-[#ae7aff] sm:focus:text-black sm:group-hover:justify-start sm:group-hover:px-4 lg:justify-start lg:px-4">
                  <span className="inline-block w-5 shrink-0 sm:group-hover:mr-4 lg:mr-4">
                    {item.icon}
                  </span>
                  <span className="block sm:hidden sm:group-hover:inline lg:inline">
                    {item.name}
                  </span>
                </button>
              </li>
            ))}
          </ul>
        </aside>
        <section className="relative w-full pb-[70px] sm:ml-[70px] sm:pb-0 lg:ml-0">
          <div className="relative min-h-[150px] w-full pt-[16.28%]">
            <div className="absolute inset-0 overflow-hidden">
              <img
                src="https://images.pexels.com/photos/1092424/pexels-photo-1092424.jpeg?auto=compress"
                alt="cover-photo"
              />
            </div>
          </div>
          <div className="px-4 pb-4">
            <div className="flex flex-wrap gap-4 pb-4 pt-6">
              <span className="relative -mt-12 inline-block h-28 w-28 shrink-0 overflow-hidden rounded-full border-2">
                <img
                  src="https://images.pexels.com/photos/1115816/pexels-photo-1115816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                  alt="Channel"
                  className="h-full w-full"
                />
              </span>

              <div className="mr-auto inline-block">
                <h1 className="font-bolg text-xl">React Patterns</h1>
                <p className="text-sm text-gray-400">@reactpatterns</p>
                <p className="text-sm text-gray-400">
                  600k Subscribers&nbsp;&middot;&nbsp;220 Subscribed
                </p>
              </div>

              <div className="inline-block">
                <button className="group/btn mr-1 flex w-full items-center gap-x-2 bg-[#ae7aff] px-3 py-2 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e] sm:w-auto">
                  <span className="inline-block w-5">
                    <PencilIcon strokeWidth={2} />
                  </span>
                  Edit
                </button>
              </div>
            </div>

            <ul className="no-scrollbar sticky top-[66px] z-[2] flex flex-row gap-x-2 overflow-auto border-b-2 border-gray-400 bg-[#121212] py-2 sm:top-[82px]">
              <li className="w-full">
                <button className="w-full border-b-2 border-[#ae7aff] bg-white px-3 py-1.5 text-[#ae7aff]">
                  Videos
                </button>
              </li>
              <li className="w-full">
                <button className="w-full border-b-2 border-transparent px-3 py-1.5 text-gray-400">
                  Playlist
                </button>
              </li>
              <li className="w-full">
                <button className="w-full border-b-2 border-transparent px-3 py-1.5 text-gray-400">
                  Tweets
                </button>
              </li>
              <li className="w-full">
                <button className="w-full border-b-2 border-transparent px-3 py-1.5 text-gray-400">
                  Subscribed
                </button>
              </li>
            </ul>
            <div className="flex justify-center p-4">
              <div className="w-full max-w-sm text-center">
                <p className="mb-3 w-full">
                  <span className="inline-flex rounded-full bg-[#E4D3FF] p-2 text-[#AE7AFF]">
                    <PlayIcon className="w-6" />
                  </span>
                </p>
                <h5 className="mb-2 font-semibold">No videos uploaded</h5>
                <p>
                  This page has yet to upload a video. Search another page in
                  order to find more videos.
                </p>
                <button className="mt-4 inline-flex items-center gap-x-2 bg-[#ae7aff] px-3 py-2 font-semibold text-black">
                  <PlusIcon className="h-5 w-5" strokeWidth={2} /> New video
                </button>
              </div>
            </div>
          </div>
          {/* Modal Popup */}
          <div className="absolute inset-x-0 top-0 z-10 flex h-[calc(100vh-66px)] items-center justify-center bg-black/50 px-4 pb-[86px] pt-4 sm:h-[calc(100vh-82px)] sm:px-14 sm:py-8">
            <div className="w-full max-w-lg overflow-auto rounded-lg border border-gray-700 bg-[#121212] p-4">
              <div className="mb-4 flex items-start justify-between">
                <h2 className="text-xl font-semibold">
                  Uploading Video...
                  <span className="block text-sm text-gray-300">
                    Track your video uploading process.
                  </span>
                </h2>
                <button className="h-6 w-6">
                  <XMarkIcon />
                </button>
              </div>
              <div className="mb-6 flex gap-x-2 border p-3">
                <div className="w-8 shrink-0">
                  <span className="inline-block w-full rounded-full bg-[#E4D3FF] p-1 text-[#AE7AFF]">
                    <FilmIcon />
                  </span>
                </div>
                <div className="flex flex-col">
                  <h6>Dashboard prototype recording.mp4</h6>
                  <p className="text-sm">16 MB</p>
                  <div class="mt-2">
                    <svg
                      aria-hidden="true"
                      role="status"
                      class="mr-2 inline-block h-5 w-5 animate-spin text-gray-200"
                      viewBox="0 0 100 101"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
                        fill="currentColor"
                      />
                      <path
                        d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
                        fill="#AE7AFF"
                      />
                    </svg>
                    Uploading...
                  </div>
                </div>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <button className="border px-4 py-3">Cancel</button>
                <button
                  className="bg-[#ae7aff] px-4 py-3 text-black disabled:bg-[#E4D3FF]"
                  disabled
                >
                  Finish
                </button>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  );
};

export default UploadingVideo;


================================================
FILE: src/components/templates/youtube/video-cards.jsx
================================================
"use client";
import { classNames } from "@/utils";
import React from "react";
import { MagnifyingGlassIcon, XCircleIcon } from "@heroicons/react/24/outline";
import { bottomTotalItems, navItems, logo, videos } from "./data";

const VideoCards = () => {
  return (
    <div className="h-screen overflow-y-auto bg-[#121212] text-white">
      <header className="sticky inset-x-0 top-0 z-50 w-full border-b border-white bg-[#121212] px-4">
        <nav className="mx-auto flex max-w-7xl items-center py-2">
          <div className="mr-4 w-12 shrink-0 sm:w-16">{logo}</div>
          <div className="relative mx-auto hidden w-full max-w-md overflow-hidden sm:block">
            <input
              className="w-full border bg-transparent py-1 pl-8 pr-3 placeholder-white outline-none sm:py-2"
              placeholder="Search"
            />
            <span className="absolute left-2.5 top-1/2 inline-block -translate-y-1/2">
              <MagnifyingGlassIcon className=" h-4 w-4" />
            </span>
          </div>
          <button className="ml-auto sm:hidden">
            <MagnifyingGlassIcon className=" h-6 w-6" />
          </button>
          <button className="group peer ml-4 flex w-6 shrink-0 flex-wrap gap-y-1.5 sm:hidden">
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-2/3 bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
          </button>
          <div className="fixed inset-y-0 right-0 flex w-full max-w-xs shrink-0 translate-x-full flex-col border-l border-white bg-[#121212] duration-200 hover:translate-x-0 peer-focus:translate-x-0 sm:static sm:ml-4 sm:w-auto sm:translate-x-0 sm:border-none">
            <div className="relative flex w-full items-center justify-between border-b border-white px-4 py-2 sm:hidden">
              <span className="inline-block w-12">{logo}</span>
              <button className="inline-block w-8">
                <XCircleIcon />
              </button>
            </div>
            <ul className="my-4 flex w-full flex-wrap gap-2 px-4 sm:hidden">
              {navItems
                .filter((item) => !item.mobileView)
                .map((item) => (
                  <li key={item.name} className="w-full">
                    <button className="flex w-full items-center justify-start gap-x-4 border border-white px-4 py-1.5 text-left hover:bg-[#ae7aff] hover:text-black focus:border-[#ae7aff] focus:bg-[#ae7aff] focus:text-black">
                      <span className="inline-block w-full max-w-[20px] group-hover:mr-4 lg:mr-4">
                        {item.icon}
                      </span>
                      <span>{item.name}</span>
                    </button>
                  </li>
                ))}
            </ul>

            <div className="mb-8 mt-auto flex w-full flex-wrap gap-4 px-4 sm:mb-0 sm:mt-0 sm:items-center sm:px-0">
              <button className="w-full bg-[#383737] px-3 py-2 hover:bg-[#4f4e4e] sm:w-auto sm:bg-transparent">
                Log in
              </button>
              <button className="mr-1 w-full bg-[#ae7aff] px-3 py-2 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e] sm:w-auto">
                Sign up
              </button>
            </div>
          </div>
        </nav>
      </header>
      <div className="flex min-h-[calc(100vh-66px)] sm:min-h-[calc(100vh-82px)]">
        <aside className="group fixed inset-x-0 bottom-0 z-40 w-full shrink-0 border-t border-white bg-[#121212] px-2 py-2 sm:absolute sm:inset-y-0 sm:max-w-[70px] sm:border-r sm:border-t-0 sm:py-6 sm:hover:max-w-[250px] lg:sticky lg:max-w-[250px]">
          <ul className="flex justify-around gap-y-2 sm:sticky sm:top-[106px] sm:min-h-[calc(100vh-130px)] sm:flex-col">
            {navItems.map((item, i, arr) => (
              <li
                key={item.name}
                className={classNames(
                  item.mobileView ? "" : "hidden sm:block",
                  arr.length - i === bottomTotalItems ? "mt-auto" : "",
                )}
              >
                <button className="flex flex-col items-center justify-center border-white py-1 focus:text-[#ae7aff] sm:w-full sm:flex-row sm:border sm:p-1.5 sm:hover:bg-[#ae7aff] sm:hover:text-black sm:focus:border-[#ae7aff] sm:focus:bg-[#ae7aff] sm:focus:text-black sm:group-hover:justify-start sm:group-hover:px-4 lg:justify-start lg:px-4">
                  <span className="inline-block w-5 shrink-0 sm:group-hover:mr-4 lg:mr-4">
                    {item.icon}
                  </span>
                  <span className="block sm:hidden sm:group-hover:inline lg:inline">
                    {item.name}
                  </span>
                </button>
              </li>
            ))}
          </ul>
        </aside>
        <section className="w-full pb-[70px] sm:ml-[70px] sm:pb-0 lg:ml-0">
          <div className="grid grid-cols-[repeat(auto-fit,_minmax(300px,_1fr))] gap-4 p-4">
            {videos
              .filter((video) => video.isPublished)
              .map((video) => (
                <div key={video.id} className="w-full">
                  <div className="relative mb-2 w-full pt-[56%]">
                    <div className="absolute inset-0">
                      <img
                        src={video.thumbnail}
                        alt={video.title}
                        className="h-full w-full"
                      />
                    </div>
                    <span className="absolute bottom-1 right-1 inline-block rounded bg-black px-1.5 text-sm">
                      {video.duration}
                    </span>
                  </div>
                  <div className="flex gap-x-2">
                    <div className="h-10 w-10 shrink-0">
                      <img
                        src={video.owner.avatar}
                        alt={video.owner.username}
                        className="h-full w-full rounded-full"
                      />
                    </div>
                    <div className="w-full">
                      <h6 className="mb-1 font-semibold">{video.title}</h6>
                      <p className="flex text-sm text-gray-200">
                        {video.views}&nbsp;Views &middot; {video.time}
                      </p>
                      <p className="text-sm text-gray-200">
                        {video.owner.fullName}
                      </p>
                    </div>
                  </div>
                </div>
              ))}
          </div>
        </section>
      </div>
    </div>
  );
};

export default VideoCards;


================================================
FILE: src/components/templates/youtube/video-detail.jsx
================================================
"use client";
import { classNames } from "@/utils";
import React from "react";
import {
  CheckIcon,
  FolderPlusIcon,
  HandThumbDownIcon,
  HandThumbUpIcon,
  MagnifyingGlassIcon,
  UserPlusIcon,
  XCircleIcon,
} from "@heroicons/react/24/outline";
import { bottomTotalItems, navItems, logo, videos, videoDetails } from "./data";

const VideoList = () => {
  return (
    <div className="h-screen overflow-y-auto bg-[#121212] text-white">
      <header className="sticky inset-x-0 top-0 z-50 w-full border-b border-white bg-[#121212] px-4">
        <nav className="mx-auto flex max-w-7xl items-center py-2">
          <div className="mr-4 w-12 shrink-0 sm:w-16">{logo}</div>
          <div className="relative mx-auto hidden w-full max-w-md overflow-hidden sm:block">
            <input
              className="w-full border bg-transparent py-1 pl-8 pr-3 placeholder-white outline-none sm:py-2"
              placeholder="Search"
            />
            <span className="absolute left-2.5 top-1/2 inline-block -translate-y-1/2">
              <MagnifyingGlassIcon className=" h-4 w-4" />
            </span>
          </div>
          <button className="ml-auto sm:hidden">
            <MagnifyingGlassIcon className=" h-6 w-6" />
          </button>
          <button className="group peer ml-4 flex w-6 shrink-0 flex-wrap gap-y-1.5 sm:hidden">
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-2/3 bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
          </button>
          <div className="fixed inset-y-0 right-0 flex w-full max-w-xs shrink-0 translate-x-full flex-col border-l border-white bg-[#121212] duration-200 hover:translate-x-0 peer-focus:translate-x-0 sm:static sm:ml-4 sm:w-auto sm:translate-x-0 sm:border-none">
            <div className="relative flex w-full items-center justify-between border-b border-white px-4 py-2 sm:hidden">
              <span className="inline-block w-12">{logo}</span>
              <button className="inline-block w-8">
                <XCircleIcon />
              </button>
            </div>
            <ul className="my-4 flex w-full flex-wrap gap-2 px-4 sm:hidden">
              {navItems
                .filter((item) => !item.mobileView)
                .map((item) => (
                  <li key={item.name} className="w-full">
                    <button className="flex w-full items-center justify-start gap-x-4 border border-white px-4 py-1.5 text-left hover:bg-[#ae7aff] hover:text-black focus:border-[#ae7aff] focus:bg-[#ae7aff] focus:text-black">
                      <span className="inline-block w-full max-w-[20px] group-hover:mr-4 lg:mr-4">
                        {item.icon}
                      </span>
                      <span>{item.name}</span>
                    </button>
                  </li>
                ))}
            </ul>

            <div className="mb-8 mt-auto flex w-full flex-wrap gap-4 px-4 sm:mb-0 sm:mt-0 sm:items-center sm:px-0">
              <button className="w-full bg-[#383737] px-3 py-2 hover:bg-[#4f4e4e] sm:w-auto sm:bg-transparent">
                Log in
              </button>
              <button className="mr-1 w-full bg-[#ae7aff] px-3 py-2 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e] sm:w-auto">
                Sign up
              </button>
            </div>
          </div>
        </nav>
      </header>
      <div className="flex min-h-[calc(100vh-66px)] sm:min-h-[calc(100vh-82px)]">
        <aside className="group fixed inset-x-0 bottom-0 z-40 w-full shrink-0 border-t border-white bg-[#121212] px-2 py-2 sm:absolute sm:inset-y-0 sm:max-w-[70px] sm:border-r sm:border-t-0 sm:py-6 sm:hover:max-w-[250px]">
          <ul className="flex justify-around gap-y-2 sm:sticky sm:top-[106px] sm:min-h-[calc(100vh-130px)] sm:flex-col">
            {navItems.map((item, i, arr) => (
              <li
                key={item.name}
                className={classNames(
                  item.mobileView ? "" : "hidden sm:block",
                  arr.length - i === bottomTotalItems ? "mt-auto" : "",
                )}
              >
                <button className="flex flex-col items-center justify-center border-white py-1 focus:text-[#ae7aff] sm:w-full sm:flex-row sm:border sm:p-1.5 sm:hover:bg-[#ae7aff] sm:hover:text-black sm:focus:border-[#ae7aff] sm:focus:bg-[#ae7aff] sm:focus:text-black sm:group-hover:justify-start sm:group-hover:px-4 lg:justify-start lg:px-4">
                  <span className="inline-block w-5 shrink-0 sm:group-hover:mr-4 lg:mr-4">
                    {item.icon}
                  </span>
                  <span className="block sm:hidden sm:group-hover:inline">
                    {item.name}
                  </span>
                </button>
              </li>
            ))}
          </ul>
        </aside>
        <section className="w-full pb-[70px] sm:ml-[70px] sm:pb-0">
          <div className="flex w-full flex-wrap gap-4 p-4 lg:flex-nowrap">
            <div className="col-span-12 w-full">
              <div className="relative mb-4 w-full pt-[56%]">
                <div className="absolute inset-0">
                  <video className="h-full w-full" controls autoPlay muted>
                    <source
                      src={videoDetails.videoFile}
                      type={videoDetails.videoType}
                    />
                  </video>
                </div>
              </div>
              <div
                className="group mb-4 w-full rounded-lg border p-4 duration-200 hover:bg-white/5 focus:bg-white/5"
                role="button"
                tabIndex={0}
              >
                <div className="flex flex-wrap gap-y-2">
                  <div className="w-full md:w-1/2 lg:w-full xl:w-1/2">
                    <h1 className="text-lg font-bold">{videoDetails.title}</h1>
                    <p className="flex text-sm text-gray-200">
                      {videoDetails.views}&nbsp;Views &middot;
                      {videoDetails.createdAt}
                    </p>
                  </div>
                  <div className="w-full md:w-1/2 lg:w-full xl:w-1/2">
                    <div className="flex items-center justify-between gap-x-4 md:justify-end lg:justify-between xl:justify-end">
                      <div className="flex overflow-hidden rounded-lg border">
                        <button
                          className="group/btn flex items-center gap-x-2 border-r border-gray-700 px-4 py-1.5 after:content-[attr(data-like)] hover:bg-white/10 focus:after:content-[attr(data-like-alt)]"
                          data-like={videoDetails.likeCount}
                          data-like-alt={
                            videoDetails.liked
                              ? videoDetails.likeCount - 1
                              : videoDetails.likeCount + 1
                          }
                        >
                          <span
                            className={`inline-block w-5 ${
                              videoDetails.liked
                                ? "text-[#ae7aff] group-focus/btn:text-inherit"
                                : "group-focus/btn:text-[#ae7aff]"
                            }`}
                          >
                            <HandThumbUpIcon />
                          </span>
                        </button>
                        <button
                          className="group/btn flex items-center gap-x-2 px-4 py-1.5 after:content-[attr(data-like)] hover:bg-white/10 focus:after:content-[attr(data-like-alt)]"
                          data-like={videoDetails.dislikeCount}
                          data-like-alt={
                            videoDetails.disliked
                              ? videoDetails.dislikeCount - 1
                              : videoDetails.dislikeCount + 1
                          }
                        >
                          <span
                            className={`inline-block w-5 ${
                              videoDetails.disliked
                                ? "text-[#ae7aff] group-focus/btn:text-inherit"
                                : "group-focus/btn:text-[#ae7aff]"
                            }`}
                          >
                            <HandThumbDownIcon />
                          </span>
                        </button>
                      </div>
                      <div className="relative block">
                        <button className="peer flex items-center gap-x-2 rounded-lg bg-white px-4 py-1.5 text-black">
                          <span className="inline-block w-5">
                            <FolderPlusIcon />
                          </span>
                          Save
                        </button>
                        <div className="absolute right-0 top-full z-10 hidden w-64 overflow-hidden rounded-lg bg-[#121212] p-4 shadow shadow-slate-50/30 hover:block peer-focus:block">
                          <h3 className="mb-4 text-center text-lg font-semibold">
                            Save to playlist
                          </h3>
                          <ul className="mb-4">
                            {[
                              "Collections",
                              "JavaScript Basics",
                              "C++ Tuts",
                              "Feel Good Music",
                              "Ed Sheeran",
                              "Python",
                            ].map((playlistName) => (
                              <li key={playlistName} className="mb-2 last:mb-0">
                                <label
                                  className="group/label inline-flex cursor-pointer items-center gap-x-3"
                                  htmlFor={playlistName + "-checkbox"}
                                >
                                  <input
                                    type="checkbox"
                                    className="peer hidden"
                                    id={playlistName + "-checkbox"}
                                  />
                                  <span className="inline-flex h-4 w-4 items-center justify-center rounded-[4px] border border-transparent bg-white text-white group-hover/label:border-[#ae7aff] peer-checked:border-[#ae7aff] peer-checked:text-[#ae7aff]">
                                    <CheckIcon strokeWidth={3} />
                                  </span>
                                  {playlistName}
                                </label>
                              </li>
                            ))}
                          </ul>
                          <div className="flex flex-col">
                            <label
                              htmlFor="playlist-name"
                              className="mb-1 inline-block cursor-pointer"
                            >
                              Name
                            </label>
                            <input
                              className="w-full rounded-lg border border-transparent bg-white px-3 py-2 text-black outline-none focus:border-[#ae7aff]"
                              id="playlist-name"
                              placeholder="Enter playlist name"
                            />
                            <button className="mx-auto mt-4 rounded-lg bg-[#ae7aff] px-4 py-2 text-black">
                              Create new playlist
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="mt-4 flex items-center justify-between">
                  <div className="flex items-center gap-x-4">
                    <div className="mt-2 h-12 w-12 shrink-0">
                      <img
                        src={videoDetails.owner.avatar}
                        alt={videoDetails.owner.username}
                        className="h-full w-full rounded-full"
                      />
                    </div>
                    <div className="block">
                      <p className="text-gray-200">
                        {videoDetails.owner.fullName}
                      </p>
                      <p className="text-sm text-gray-400">
                        {videoDetails.owner.subscribers} Subscribers
                      </p>
                    </div>
                  </div>
                  <div className="block">
                    <button className="group/btn mr-1 flex w-full items-center gap-x-2 bg-[#ae7aff] px-3 py-2 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e] sm:w-auto">
                      <span className="inline-block w-5">
                        <UserPlusIcon strokeWidth={2} />
                      </span>
                      <span className="group-focus/btn:hidden">Subscribe</span>
                      <span className="hidden group-focus/btn:block">
                        Subscribed
                      </span>
                    </button>
                  </div>
                </div>
                <hr className="my-4 border-white" />
                <div className="h-5 overflow-hidden group-focus:h-auto">
                  <p className="text-sm">{videoDetails.description}</p>
                </div>
              </div>
              <button className="peer w-full rounded-lg border p-4 text-left duration-200 hover:bg-white/5 focus:bg-white/5 sm:hidden">
                <h6 className="font-semibold">
                  {videoDetails.commentCount} Comments...
                </h6>
              </button>
              <div className="fixed inset-x-0 top-full z-[60] h-[calc(100%-69px)] overflow-auto rounded-lg border bg-[#121212] p-4 duration-200 hover:top-[67px] peer-focus:top-[67px] sm:static sm:h-auto sm:max-h-[500px] lg:max-h-none">
                <div className="block">
                  <h6 className="mb-4 font-semibold">
                    {videoDetails.commentCount} Comments
                  </h6>
                  <input
                    type="text"
                    className="w-full rounded-lg border bg-transparent px-2 py-1 placeholder-white"
                    placeholder="Add a Comment"
                  />
                </div>
                <hr className="my-4 border-white" />
                {videoDetails.comments.map((comment) => (
                  <div key={comment.id}>
                    <div className="flex gap-x-4">
                      <div className="mt-2 h-11 w-11 shrink-0">
                        <img
                          src={comment.owner.avatar}
                          alt={comment.owner.username}
                          className="h-full w-full rounded-full"
                        />
                      </div>
                      <div className="block">
                        <p className="flex items-center text-gray-200">
                          {comment.owner.fullName}&nbsp;&middot;&nbsp;
                          <span className="text-sm">{comment.createdAt}</span>
                        </p>
                        <p className="text-sm text-gray-200">
                          @{comment.owner.username}
                        </p>
                        <p className="mt-3 text-sm">{comment.content}</p>
                      </div>
                    </div>

                    <hr className="my-4 border-white" />
                  </div>
                ))}
              </div>
            </div>
            <div className="col-span-12 flex w-full shrink-0 flex-col gap-3 lg:w-[350px] xl:w-[400px]">
              {videos
                .filter((video) => video.isPublished)
                .map((video) => (
                  <div
                    key={video.id}
                    className="w-full gap-x-2 border pr-2 md:flex"
                  >
                    <div className="relative mb-2 w-full md:mb-0 md:w-5/12">
                      <div className="w-full pt-[56%]">
                        <div className="absolute inset-0">
                          <img
                            src={video.thumbnail}
                            alt={video.title}
                            className="h-full w-full"
                          />
                        </div>
                        <span className="absolute bottom-1 right-1 inline-block rounded bg-black px-1.5 text-sm">
                          {video.duration}
                        </span>
                      </div>
                    </div>
                    <div className="flex gap-x-2 px-2 pb-4 pt-1 md:w-7/12 md:px-0 md:py-0.5">
                      <div className="h-12 w-12 shrink-0 md:hidden">
                        <img
                          src={videoDetails.owner.avatar}
                          alt={videoDetails.owner.username}
                          className="h-full w-full rounded-full"
                        />
                      </div>
                      <div className="w-full pt-1 md:pt-0">
                        <h6 className="mb-1 text-sm font-semibold">
                          {video.title}
                        </h6>
                        <p className="mb-0.5 mt-2 text-sm text-gray-200">
                          {video.owner.fullName}
                        </p>
                        <p className="flex text-sm text-gray-200">
                          {video.views}&nbsp;Views &middot; {video.time}
                        </p>
                      </div>
                    </div>
                  </div>
                ))}
            </div>
          </div>
        </section>
      </div>
    </div>
  );
};

export default VideoList;


================================================
FILE: src/components/templates/youtube/video-list.jsx
================================================
"use client";
import { classNames } from "@/utils";
import React from "react";
import { MagnifyingGlassIcon, XCircleIcon } from "@heroicons/react/24/outline";
import { bottomTotalItems, navItems, logo, videos } from "./data";

const VideoList = () => {
  return (
    <div className="h-screen overflow-y-auto bg-[#121212] text-white">
      <header className="sticky inset-x-0 top-0 z-50 w-full border-b border-white bg-[#121212] px-4">
        <nav className="mx-auto flex max-w-7xl items-center py-2">
          <div className="mr-4 w-12 shrink-0 sm:w-16">{logo}</div>
          <div className="relative mx-auto hidden w-full max-w-md overflow-hidden sm:block">
            <input
              className="w-full border bg-transparent py-1 pl-8 pr-3 placeholder-white outline-none sm:py-2"
              placeholder="Search"
            />
            <span className="absolute left-2.5 top-1/2 inline-block -translate-y-1/2">
              <MagnifyingGlassIcon className=" h-4 w-4" />
            </span>
          </div>
          <button className="ml-auto sm:hidden">
            <MagnifyingGlassIcon className=" h-6 w-6" />
          </button>
          <button className="group peer ml-4 flex w-6 shrink-0 flex-wrap gap-y-1.5 sm:hidden">
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-2/3 bg-white group-hover:bg-[#ae7aff]"></span>
            <span className="block h-[2px] w-full bg-white group-hover:bg-[#ae7aff]"></span>
          </button>
          <div className="fixed inset-y-0 right-0 flex w-full max-w-xs shrink-0 translate-x-full flex-col border-l border-white bg-[#121212] duration-200 hover:translate-x-0 peer-focus:translate-x-0 sm:static sm:ml-4 sm:w-auto sm:translate-x-0 sm:border-none">
            <div className="relative flex w-full items-center justify-between border-b border-white px-4 py-2 sm:hidden">
              <span className="inline-block w-12">{logo}</span>
              <button className="inline-block w-8">
                <XCircleIcon />
              </button>
            </div>
            <ul className="my-4 flex w-full flex-wrap gap-2 px-4 sm:hidden">
              {navItems
                .filter((item) => !item.mobileView)
                .map((item) => (
                  <li key={item.name} className="w-full">
                    <button className="flex w-full items-center justify-start gap-x-4 border border-white px-4 py-1.5 text-left hover:bg-[#ae7aff] hover:text-black focus:border-[#ae7aff] focus:bg-[#ae7aff] focus:text-black">
                      <span className="inline-block w-full max-w-[20px] group-hover:mr-4 lg:mr-4">
                        {item.icon}
                      </span>
                      <span>{item.name}</span>
                    </button>
                  </li>
                ))}
            </ul>

            <div className="mb-8 mt-auto flex w-full flex-wrap gap-4 px-4 sm:mb-0 sm:mt-0 sm:items-center sm:px-0">
              <button className="w-full bg-[#383737] px-3 py-2 hover:bg-[#4f4e4e] sm:w-auto sm:bg-transparent">
                Log in
              </button>
              <button className="mr-1 w-full bg-[#ae7aff] px-3 py-2 text-center font-bold text-black shadow-[5px_5px_0px_0px_#4f4e4e] transition-all duration-150 ease-in-out active:translate-x-[5px] active:translate-y-[5px] active:shadow-[0px_0px_0px_0px_#4f4e4e] sm:w-auto">
                Sign up
              </button>
            </div>
          </div>
        </nav>
      </header>
      <div className="flex min-h-[calc(100vh-66px)] sm:min-h-[calc(100vh-82px)]">
        <aside className="group fixed inset-x-0 bottom-0 z-40 w-full shrink-0 border-t border-white bg-[#121212] px-2 py-2 sm:absolute sm:inset-y-0 sm:max-w-[70px] sm:border-r sm:border-t-0 sm:py-6 sm:hover:max-w-[250px] lg:sticky lg:max-w-[250px]">
          <ul className="flex justify-around gap-y-2 sm:sticky sm:top-[106px] sm:min-h-[calc(100vh-130px)] sm:flex-col">
            {navItems.map((item, i, arr) => (
              <li
                key={item.name}
                className={classNames(
                  item.mobileView ? "" : "hidden sm:block",
                  arr.length - i === bottomTotalItems ? "mt-auto" : "",
                )}
              >
                <button className="flex flex-col items-center justify-center border-white py-1 focus:text-[#ae7aff] sm:w-full sm:flex-row sm:border sm:p-1.5 sm:hover:bg-[#ae7aff] sm:hover:text-black sm:focus:border-[#ae7aff] sm:focus:bg-[#ae7aff] sm:focus:text-black sm:group-hover:justify-start sm:group-hover:px-4 lg:justify-start lg:px-4">
                  <span className="inline-block w-5 shrink-0 sm:group-hover:mr-4 lg:mr-4">
                    {item.icon}
                  </span>
                  <span className="block sm:hidden sm:group-hover:inline lg:inline">
                    {item.name}
                  </span>
                </button>
              </li>
            ))}
          </ul>
        </aside>
        <section className="w-full pb-[70px] sm:ml-[70px] sm:pb-0 lg:ml-0">
          <div className="flex flex-col gap-4 p-4">
            {videos
              .filter((video) => video.isPublished)
              .map((video) => (
                <div
                  key={video.id}
                  className="w-full max-w-3xl gap-x-4 md:flex"
                >
                  <div className="relative mb-2 w-full md:mb-0 md:w-5/12">
                    <div className="w-full pt-[56%]">
                      <div className="absolute inset-0">
                        <img
                          src={video.thumbnail}
                          alt={video.title}
                          className="h-full w-full"
                        />
                      </div>
                      <span className="absolute bottom-1 right-1 inline-block rounded bg-black px-1.5 text-sm">
                        {video.duration}
                      </span>
                    </div>
                  </div>
                  <div className="flex gap-x-2 md:w-7/12">
                    <div className="h-10 w-10 shrink-0 md:hidden">
                      <img
                        src={video.owner.avatar}
                        alt={video.owner.username}
                        className="h-full w-full rounded-full"
                      />
                    </div>
                    <div className="w-full">
                      <h6 className="mb-1 font-semibold md:max-w-[75%]">
                        {video.title}
                      </h6>
                      <p className="flex text-sm text-gray-200 sm:mt-3">
                        {video.views}&nbsp;Views &middot; {video.time}
                      </p>
                      <div className="flex items-center gap-x-4">
                        <div className="mt-2 hidden h-10 w-10 shrink-0 md:block">
                          <img
                            src={video.owner.avatar}
                            alt={video.owner.username}
                            className="h-full w-full rounded-full"
                          />
                        </div>
                        <p className="text-sm text-gray-200">
                          {video.owner.fullName}
                        </p>
                      </div>
                      <p className="mt-2 hidden text-sm md:block">
                        {video.description}
                      </p>
                    </div>
                  </div>
                </div>
              ))}
          </div>
        </section>
      </div>
    </div>
  );
};

export default VideoList;


================================================
FILE: src/types/utils.ts
================================================
export type TailwindIconType = React.ForwardRefExoticComponent<
  Omit<React.SVGProps<SVGSVGElement>, "ref"> & {
    title?: string | undefined;
    titleId?: string | undefined;
  } & React.RefAttributes<SVGSVGElement>
>;

export type SelectOptionType = {
  id: string;
  name: string;
};


================================================
FILE: src/utils/index.ts
================================================
import { ReactElement } from "react";
import { renderToStaticMarkup } from "react-dom/server";

export const classNames = (...classes: string[]) => {
  return classes.filter(Boolean).join(" ");
};

export const renderHTMLFromJSX = (jsx: ReactElement): string => {
  return renderToStaticMarkup(jsx).replaceAll("&amp;", "&");
};


================================================
FILE: src/utils/screens.tsx
================================================
import Authentication from "@/components/templates/authentication";
import Chat from "@/components/templates/chat";
import SocialMedia from "@/components/templates/social-media";
import Todo from "@/components/templates/todo";
import Youtube from "@/components/templates/youtube";

export const applications = [
  {
    name: "Authentication app",
    id: "authentication",
    subtitle: "User Authentication",
    cover: "/auth.png",
    description:
      "Explore authentication screens for a seamless and secure login and registration UI designs. Access the HTML templates by clicking below.",
    pages: [
      {
        id: "register",
        name: "Register Page",
        component: <Authentication.Register />,
      },
      {
        id: "login",
        name: "Login Page",
        component: <Authentication.Login />,
      },
      {
        id: "forgot-password",
        name: "Forgot Password Page",
        component: <Authentication.ForgotPassword />,
      },
    ],
  },

  {
    name: "Chat app",
    id: "chat",
    subtitle: "Real-time Chat",
    cover: "/chat.png",
    description:
      "Discover HTML templates for our chat application screens. Explore sleek, intuitive and responsive designs for seamless communication experiences.",
    pages: [
      {
        id: "empty-chats",
        name: "Empty Chats",
        component: <Chat.EmptyChats />,
      },
      {
        id: "chat-screen",
        name: "Chat Screen",
        component: <Chat.ChatScreen />,
      },
      {
        id: "create-normal-chat",
        name: "Create Personal Chat",
        component: <Chat.CreateOneOnOneChat />,
      },
      {
        id: "create-group-chat",
        name: "Create Group Chat",
        component: <Chat.CreateGroupChat />,
      },
      {
        id: "group-chat-info",
        name: "About Group Chat",
        component: <Chat.GroupInfo />,
      },
      {
        id: "chat-register",
        name: "Chat Register",
        component: <Chat.Register />,
      },
      {
        id: "chat-login",
        name: "Chat Login",
        component: <Chat.Login />,
      },
    ],
  },
  {
    name: "Social Media App",
    id: "social-media",
    subtitle: "Social Media",
    cover: "/social-media.png",
    description:
      "Discover HTML templates for social media application screens. Dive into our UI designs to create engaging, responsive and user-friendly social platforms.",
    pages: [
      {
        id: "post-listing",
        name: "Post Listing",
        component: <SocialMedia.PostListing />,
      },
      {
        id: "post-detail",
        name: "Post Detail",
        component: <SocialMedia.PostDetail />,
      },
      {
        id: "user-profile",
        name: "User Profile",
        component: <SocialMedia.UserProfile />,
      },
      {
        id: "my-profile",
        name: "My Profile",
        component: <SocialMedia.MyProfile />,
      },
      {
        id: "edit-profile",
        name: "Edit Profile",
        component: <SocialMedia.EditProfile />,
      },
      {
        id: "change-password",
        name: "Change Password",
        component: <SocialMedia.ChangePassword />,
      },
      {
        id: "bookmarked-posts",
        name: "Bookmarked Posts",
        component: <SocialMedia.BookmarkedPosts />,
      },
      {
        id: "social-register",
        name: "Social Register",
        component: <SocialMedia.Register />,
      },
      {
        id: "social-login",
        name: "Social Login",
        component: <SocialMedia.Login />,
      },
    ],
  },
  {
    name: "Todo app",
    id: "todo",
    subtitle: "Task Management",
    cover: "/todo.png",
    description:
      "Explore UI designs for Todo app, a user-friendly task management application. Streamline your productivity by accessing the HTML templates.",
    pages: [
      {
        id: "empty-todos",
        name: "Empty Todos Page",
        component: <Todo.EmptyTodos />,
      },
      {
        id: "todos",
        name: "Todos Page",
        component: <Todo.TodosList />,
      },
    ],
  },
  {
    name: "Youtube App",
    id: "youtube",
    subtitle: "Video Sharing Platform",
    cover: "/youtube.png",
    description:
      "Explore UI designs for a Youtube clone, a user-friendly video sharing platform. Enhance your viewing experience with these accessible HTML templates.",
    pages: [
      {
        id: "empty-videos",
        name: "Empty Video Page",
        component: <Youtube.EmptyVideos />,
      },
      {
        id: "video-card",
        name: "Video Listing Page (Card View)",
        component: <Youtube.VideoCards />,
      },
      {
        id: "video-list",
        name: "Video Listing Page (List View)",
        component: <Youtube.VideoList />,
      },
      {
        id: "video-detail",
        name: "Video Detail Page",
        component: <Youtube.VideoDetail />,
      },
      {
        id: "channel-empty-video",
        name: "Channel Empty Video Page",
        component: <Youtube.ChannelEmptyVideo />,
      },
      {
        id: "channel-video-list",
        name: "Channel Video List Page",
        component: <Youtube.ChannelVideoList />,
      },
      {
        id: "channel-empty-playlist",
        name: "Channel Empty Playlist Page",
        component: <Youtube.ChannelEmptyPlaylist />,
      },
      {
        id: "channel-playlist",
        name: "Channel Playlist Page",
        component: <Youtube.ChannelPlaylist />,
      },
      {
        id: "channel-paylist-videos",
        name: "Channel Playlist Videos Page",
        component: <Youtube.ChannelPlaylistVideos />,
      },
      {
        id: "channel-empty-tweet",
        name: "Channel Empty Tweet Page",
        component: <Youtube.ChannelEmptyTweet />,
      },
      {
        id: "channel-tweets",
        name: "Channel Tweets Page",
        component: <Youtube.ChannelTweets />,
      },
      {
        id: "channel-empty-subscribed",
        name: "Channel Empty Subscribed Page",
        component: <Youtube.ChannelEmptySubscribed />,
      },
      {
        id: "channel-subscribed",
        name: "Channel Subscribed Page",
        component: <Youtube.ChannelSubscribed />,
      },
      {
        id: "login",
        name: "Login Page",
        component: <Youtube.Login />,
      },
      {
        id: "register",
        name: "Register Page",
        component: <Youtube.Register />,
      },
      {
        id: "mychannel-empty-video",
        name: "My Channel Empty Video Page",
        component: <Youtube.MyChannelEmptyVideo />,
      },
      {
        id: "upload-video",
        name: "Upload Video Modal Popup",
        component: <Youtube.UploadVideo />,
      },
      {
        id: "uploading-video",
        name: "Uploading Video Modal Popup",
        component: <Youtube.UploadingVideo />,
      },
      {
        id: "uploaded-video",
        name: "Uploaded Video Successfully Modal Popup",
        component: <Youtube.UploadedVideo />,
      },
      {
        id: "mychannel-empty-tweet",
        name: "My Channel Empty Tweet Page",
        component: <Youtube.MyChannelEmptyTweet />,
      },
      {
        id: "mychannel-tweets",
        name: "My Channel Tweets Page",
        component: <Youtube.MyChannelTweets />,
      },
      {
        id: "edit-personal-info",
        name: "Edit Personal Info Page",
        component: <Youtube.EditPersonalInfo />,
      },
      {
        id: "edit-channel-info",
        name: "Edit Channel Info Page",
        component: <Youtube.EditChannelInfo />,
      },
      {
        id: "change-password",
        name: "Change Password Page",
        component: <Youtube.ChangePassword />,
      },
      {
        id: "dashboard",
        name: "Admin Dashboard Page",
        component: <Youtube.Dashboard />,
      },
      {
        id: "edit-video",
        name: "Edit Video Modal Popup",
        component: <Youtube.EditVideo />,
      },
      {
        id: "delete-video",
        name: "Delete Video Modal Popup",
        component: <Youtube.DeleteVideo />,
      },
      {
        id: "privacy-policy",
        name: "Privacy Policy Page",
        component: <Youtube.PrivacyPolicy />,
      },
      {
        id: "terms-and-conditions",
        name: "Terms and Conditions Page",
        component: <Youtube.TermsAndConditions />,
      },
    ],
  },
];

export const getComponentByAppPageId = (appId: string, pageId: string) => {
  const application = applications.find((app) => app.id === appId);

  if (!application) return <h1>Application id in invalid</h1>;

  const page = application.pages.find((page) => page.id === pageId);

  if (!page) return <h1>Page id in invalid</h1>;

  return page.component;
};


================================================
FILE: tailwind.config.ts
================================================
import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/utils/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        dark: "#020617",
      },
    },
  },
  plugins: [],
};
export default config;


================================================
FILE: tsconfig.json
================================================
{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "allowSyntheticDefaultImports": true,
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}