chat ui updates
This commit is contained in:
parent
0b0089a7f3
commit
bef7b0c9df
@ -10,10 +10,13 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"clsx": "^2.1.1",
|
||||
"framer-motion": "^12.4.7",
|
||||
"motion": "^12.4.5",
|
||||
"next": "15.1.7",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-toastify": "^11.0.5",
|
||||
"react-tweet": "^3.2.2",
|
||||
"tailwind-merge": "^3.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@ -1,14 +1,26 @@
|
||||
"use client";
|
||||
import { useState } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import Image from "next/image";
|
||||
import avatarImg1 from "@/assets/images/avatars/1.svg";
|
||||
import Types from "../../Types";
|
||||
import Sidebar from "@/components/Sidebar";
|
||||
import { motion } from "motion/react";
|
||||
import Loader from "@/components/Loader";
|
||||
|
||||
export default function DashboardChat() {
|
||||
const [state, setState] = useState<number>(1);
|
||||
const [isOpen, setIsOpen] = useState<boolean>(true);
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setState(2);
|
||||
|
||||
setTimeout(() => {
|
||||
setState(3);
|
||||
}, 2000);
|
||||
}, 3000);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="p-2.5 h-[100svh]">
|
||||
<main className="h-full flex">
|
||||
@ -46,196 +58,200 @@ export default function DashboardChat() {
|
||||
nisi ut aliquip ex ea commodo consequat.
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.6 }}
|
||||
className="flex items-start gap-5"
|
||||
>
|
||||
<Image src={avatarImg1} alt="" className="w-[40px]" />
|
||||
<Loader state={state} />
|
||||
|
||||
<div className="space-y-3">
|
||||
<p className="max-w-[660px] text-white">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
|
||||
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
||||
laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</p>
|
||||
{state === 3 && (
|
||||
<motion.div
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.6 }}
|
||||
className="flex items-start gap-5"
|
||||
>
|
||||
<Image src={avatarImg1} alt="" className="w-[40px]" />
|
||||
|
||||
<div className="max-w-[660px] p-5 border border-white/10 bg-white/10 rounded-lg">
|
||||
<div
|
||||
onClick={() => {
|
||||
setIsOpen(!isOpen);
|
||||
}}
|
||||
className="flex justify-between items-center cursor-pointer"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="space-y-3">
|
||||
<p className="max-w-[660px] text-white">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
|
||||
do eiusmod tempor incididunt ut labore et dolore magna
|
||||
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
|
||||
ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</p>
|
||||
|
||||
<div className="max-w-[660px] p-5 border border-white/10 bg-white/10 rounded-lg">
|
||||
<div
|
||||
onClick={() => {
|
||||
setIsOpen(!isOpen);
|
||||
}}
|
||||
className="flex justify-between items-center cursor-pointer"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M9.5 22H14.5M15 15.3264C17.3649 14.2029 19 11.7924 19 9C19 5.13401 15.866 2 12 2C8.13401 2 5 5.13401 5 9C5 11.7924 6.63505 14.2029 9 15.3264V16C9 16.9319 9 17.3978 9.15224 17.7654C9.35523 18.2554 9.74458 18.6448 10.2346 18.8478C10.6022 19 11.0681 19 12 19C12.9319 19 13.3978 19 13.7654 18.8478C14.2554 18.6448 14.6448 18.2554 14.8478 17.7654C15 17.3978 15 16.9319 15 16V15.3264Z"
|
||||
stroke="white"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<div>
|
||||
<p className="font-medium text-white">
|
||||
Title of the Dropdown appears in this section
|
||||
</p>
|
||||
<p className="text-xs text-white/50">
|
||||
Collapse Details
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className={`${!isOpen ? "rotate-[180deg]" : ""} flex`}
|
||||
>
|
||||
<svg
|
||||
width="12"
|
||||
height="6"
|
||||
viewBox="0 0 12 6"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M1.5 5.25L6 0.75L10.5 5.25"
|
||||
stroke="white"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{isOpen && (
|
||||
<p className="mt-4 text-white">
|
||||
Lorem ipsum odor amet, consectetuer adipiscing elit.
|
||||
Eros platea molestie taciti amet class at dictum est.
|
||||
Conubia pharetra maecenas iaculis dui litora convallis
|
||||
et nostra leo. Pellentesque justo sapien amet rhoncus
|
||||
aliquet torquent. Netus lobortis justo eleifend auctor
|
||||
nunc. Vel ex montes commodo, sodales ex iaculis? Dictum
|
||||
habitant duis nam; ridiculus gravida eleifend montes
|
||||
dignissim nam. <br />
|
||||
<br />
|
||||
Nam fermentum id sociosqu curae lacinia felis. Nisl ac
|
||||
cursus inceptos suscipit eros. Accumsan class vitae
|
||||
pulvinar suscipit aliquet? Senectus semper feugiat
|
||||
lobortis morbi vitae tempor. Faucibus nibh posuere
|
||||
blandit himenaeos curabitur. Mauris tortor lorem id
|
||||
magnis tellus senectus laoreet. Magnis elit hendrerit
|
||||
litora in faucibus pharetra. Justo dui ultricies commodo
|
||||
tempus, mauris eleifend nascetur. <br />
|
||||
<br />
|
||||
Ligula tempus purus nec congue, tellus hendrerit litora.
|
||||
Nostra morbi natoque massa metus; bibendum tempus
|
||||
malesuada. Fames donec ultricies metus; condimentum
|
||||
feugiat tristique elementum. Nullam maecenas primis
|
||||
bibendum eleifend hac viverra libero. Proin velit montes
|
||||
netus lacus ante ornare porttitor justo. Quam lorem
|
||||
volutpat accumsan, tristique proin at parturient.
|
||||
Condimentum eu risus tincidunt pulvinar consequat
|
||||
natoque. Vulputate sagittis quis ad tempor lobortis
|
||||
ultrices dolor gravida? Tincidunt tempor rhoncus massa
|
||||
fermentum faucibus fermentum nullam pretium. Diam
|
||||
habitant ex maximus odio praesent semper ipsum ex.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clipPath="url(#clip0_46_276)">
|
||||
<path
|
||||
d="M3.75 11.25C3.05109 11.25 2.70164 11.25 2.42597 11.1359C2.05844 10.9836 1.76642 10.6915 1.61418 10.324C1.5 10.0483 1.5 9.69893 1.5 9V3.9C1.5 3.05992 1.5 2.63988 1.66349 2.31902C1.8073 2.03677 2.03677 1.8073 2.31902 1.66349C2.63988 1.5 3.05992 1.5 3.9 1.5H9C9.69893 1.5 10.0483 1.5 10.324 1.61418C10.6915 1.76642 10.9836 2.05844 11.1359 2.42597C11.25 2.70164 11.25 3.05109 11.25 3.75M9.15 16.5H14.1C14.9401 16.5 15.3602 16.5 15.681 16.3365C15.9632 16.1927 16.1927 15.9632 16.3365 15.681C16.5 15.3602 16.5 14.9401 16.5 14.1V9.15C16.5 8.30992 16.5 7.88985 16.3365 7.569C16.1927 7.28677 15.9632 7.0573 15.681 6.91349C15.3602 6.75 14.9401 6.75 14.1 6.75H9.15C8.30992 6.75 7.88985 6.75 7.569 6.91349C7.28677 7.0573 7.0573 7.28677 6.91349 7.569C6.75 7.88985 6.75 8.30992 6.75 9.15V14.1C6.75 14.9401 6.75 15.3602 6.91349 15.681C7.0573 15.9632 7.28677 16.1927 7.569 16.3365C7.88985 16.5 8.30992 16.5 9.15 16.5Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_46_276">
|
||||
<rect width="18" height="18" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M9.5 22H14.5M15 15.3264C17.3649 14.2029 19 11.7924 19 9C19 5.13401 15.866 2 12 2C8.13401 2 5 5.13401 5 9C5 11.7924 6.63505 14.2029 9 15.3264V16C9 16.9319 9 17.3978 9.15224 17.7654C9.35523 18.2554 9.74458 18.6448 10.2346 18.8478C10.6022 19 11.0681 19 12 19C12.9319 19 13.3978 19 13.7654 18.8478C14.2554 18.6448 14.6448 18.2554 14.8478 17.7654C15 17.3978 15 16.9319 15 16V15.3264Z"
|
||||
d="M6.41002 14.8256C8.20933 15.6239 10.3525 15.5805 12.1877 14.5209C15.2368 12.7605 16.2815 8.86164 14.5211 5.8125L14.3336 5.48773M3.47894 12.1876C1.71853 9.13847 2.76324 5.23958 5.81235 3.47917C7.64758 2.4196 9.79071 2.37625 11.59 3.17452M1.87012 12.2503L3.91915 12.7994L4.46819 10.7503M13.532 7.24936L14.0811 5.20033L16.1301 5.74936"
|
||||
stroke="white"
|
||||
strokeWidth="2"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div>
|
||||
<p className="font-medium text-white">
|
||||
Title of the Dropdown appears in this section
|
||||
</p>
|
||||
<p className="text-xs text-white/50">
|
||||
Collapse Details
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className={`${!isOpen ? "rotate-[180deg]" : ""} flex`}
|
||||
>
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="12"
|
||||
height="6"
|
||||
viewBox="0 0 12 6"
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M1.5 5.25L6 0.75L10.5 5.25"
|
||||
d="M5.25 16.5V8.25M1.5 9.75V15C1.5 15.8284 2.17157 16.5 3 16.5H13.0697C14.1803 16.5 15.1246 15.6898 15.2935 14.5921L16.1012 9.34215C16.3109 7.97917 15.2564 6.75 13.8774 6.75H11.25C10.8358 6.75 10.5 6.41421 10.5 6V3.34938C10.5 2.32799 9.672 1.5 8.65065 1.5C8.40697 1.5 8.18625 1.64348 8.08733 1.86609L5.44795 7.80458C5.32758 8.07548 5.05899 8.25 4.7626 8.25H3C2.17157 8.25 1.5 8.92155 1.5 9.75Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.5"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12.7498 1.5V9.75M16.4998 7.35V3.9C16.4998 3.05992 16.4998 2.63988 16.3363 2.31902C16.1925 2.03677 15.9631 1.8073 15.6808 1.66349C15.3599 1.5 14.9399 1.5 14.0998 1.5H6.0883C4.99219 1.5 4.44414 1.5 4.00148 1.70057C3.61134 1.87736 3.27977 2.16181 3.04572 2.52054C2.78017 2.92754 2.69684 3.46923 2.53017 4.55259L2.13786 7.10259C1.91803 8.53148 1.80811 9.24593 2.02015 9.80183C2.20625 10.2898 2.55628 10.6978 3.01024 10.9559C3.52744 11.25 4.2503 11.25 5.696 11.25H6.29979C6.71984 11.25 6.92985 11.25 7.09029 11.3318C7.23141 11.4037 7.34615 11.5183 7.41805 11.6595C7.49983 11.8199 7.49983 12.0299 7.49983 12.45V14.6507C7.49983 15.672 8.32776 16.5 9.34918 16.5C9.59278 16.5 9.81358 16.3565 9.91251 16.1339L12.4331 10.4627C12.5477 10.2047 12.605 10.0757 12.6956 9.98115C12.7757 9.89752 12.8741 9.83363 12.983 9.7944C13.1062 9.75 13.2474 9.75 13.5296 9.75H14.0998C14.9399 9.75 15.3599 9.75 15.6808 9.5865C15.9631 9.44272 16.1925 9.21322 16.3363 8.931C16.4998 8.61015 16.4998 8.19008 16.4998 7.35Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{isOpen && (
|
||||
<p className="mt-4 text-white">
|
||||
Lorem ipsum odor amet, consectetuer adipiscing elit. Eros
|
||||
platea molestie taciti amet class at dictum est. Conubia
|
||||
pharetra maecenas iaculis dui litora convallis et nostra
|
||||
leo. Pellentesque justo sapien amet rhoncus aliquet
|
||||
torquent. Netus lobortis justo eleifend auctor nunc. Vel
|
||||
ex montes commodo, sodales ex iaculis? Dictum habitant
|
||||
duis nam; ridiculus gravida eleifend montes dignissim nam.{" "}
|
||||
<br />
|
||||
<br />
|
||||
Nam fermentum id sociosqu curae lacinia felis. Nisl ac
|
||||
cursus inceptos suscipit eros. Accumsan class vitae
|
||||
pulvinar suscipit aliquet? Senectus semper feugiat
|
||||
lobortis morbi vitae tempor. Faucibus nibh posuere blandit
|
||||
himenaeos curabitur. Mauris tortor lorem id magnis tellus
|
||||
senectus laoreet. Magnis elit hendrerit litora in faucibus
|
||||
pharetra. Justo dui ultricies commodo tempus, mauris
|
||||
eleifend nascetur. <br />
|
||||
<br />
|
||||
Ligula tempus purus nec congue, tellus hendrerit litora.
|
||||
Nostra morbi natoque massa metus; bibendum tempus
|
||||
malesuada. Fames donec ultricies metus; condimentum
|
||||
feugiat tristique elementum. Nullam maecenas primis
|
||||
bibendum eleifend hac viverra libero. Proin velit montes
|
||||
netus lacus ante ornare porttitor justo. Quam lorem
|
||||
volutpat accumsan, tristique proin at parturient.
|
||||
Condimentum eu risus tincidunt pulvinar consequat natoque.
|
||||
Vulputate sagittis quis ad tempor lobortis ultrices dolor
|
||||
gravida? Tincidunt tempor rhoncus massa fermentum faucibus
|
||||
fermentum nullam pretium. Diam habitant ex maximus odio
|
||||
praesent semper ipsum ex.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clipPath="url(#clip0_46_276)">
|
||||
<path
|
||||
d="M3.75 11.25C3.05109 11.25 2.70164 11.25 2.42597 11.1359C2.05844 10.9836 1.76642 10.6915 1.61418 10.324C1.5 10.0483 1.5 9.69893 1.5 9V3.9C1.5 3.05992 1.5 2.63988 1.66349 2.31902C1.8073 2.03677 2.03677 1.8073 2.31902 1.66349C2.63988 1.5 3.05992 1.5 3.9 1.5H9C9.69893 1.5 10.0483 1.5 10.324 1.61418C10.6915 1.76642 10.9836 2.05844 11.1359 2.42597C11.25 2.70164 11.25 3.05109 11.25 3.75M9.15 16.5H14.1C14.9401 16.5 15.3602 16.5 15.681 16.3365C15.9632 16.1927 16.1927 15.9632 16.3365 15.681C16.5 15.3602 16.5 14.9401 16.5 14.1V9.15C16.5 8.30992 16.5 7.88985 16.3365 7.569C16.1927 7.28677 15.9632 7.0573 15.681 6.91349C15.3602 6.75 14.9401 6.75 14.1 6.75H9.15C8.30992 6.75 7.88985 6.75 7.569 6.91349C7.28677 7.0573 7.0573 7.28677 6.91349 7.569C6.75 7.88985 6.75 8.30992 6.75 9.15V14.1C6.75 14.9401 6.75 15.3602 6.91349 15.681C7.0573 15.9632 7.28677 16.1927 7.569 16.3365C7.88985 16.5 8.30992 16.5 9.15 16.5Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_46_276">
|
||||
<rect width="18" height="18" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M6.41002 14.8256C8.20933 15.6239 10.3525 15.5805 12.1877 14.5209C15.2368 12.7605 16.2815 8.86164 14.5211 5.8125L14.3336 5.48773M3.47894 12.1876C1.71853 9.13847 2.76324 5.23958 5.81235 3.47917C7.64758 2.4196 9.79071 2.37625 11.59 3.17452M1.87012 12.2503L3.91915 12.7994L4.46819 10.7503M13.532 7.24936L14.0811 5.20033L16.1301 5.74936"
|
||||
stroke="white"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5.25 16.5V8.25M1.5 9.75V15C1.5 15.8284 2.17157 16.5 3 16.5H13.0697C14.1803 16.5 15.1246 15.6898 15.2935 14.5921L16.1012 9.34215C16.3109 7.97917 15.2564 6.75 13.8774 6.75H11.25C10.8358 6.75 10.5 6.41421 10.5 6V3.34938C10.5 2.32799 9.672 1.5 8.65065 1.5C8.40697 1.5 8.18625 1.64348 8.08733 1.86609L5.44795 7.80458C5.32758 8.07548 5.05899 8.25 4.7626 8.25H3C2.17157 8.25 1.5 8.92155 1.5 9.75Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12.7498 1.5V9.75M16.4998 7.35V3.9C16.4998 3.05992 16.4998 2.63988 16.3363 2.31902C16.1925 2.03677 15.9631 1.8073 15.6808 1.66349C15.3599 1.5 14.9399 1.5 14.0998 1.5H6.0883C4.99219 1.5 4.44414 1.5 4.00148 1.70057C3.61134 1.87736 3.27977 2.16181 3.04572 2.52054C2.78017 2.92754 2.69684 3.46923 2.53017 4.55259L2.13786 7.10259C1.91803 8.53148 1.80811 9.24593 2.02015 9.80183C2.20625 10.2898 2.55628 10.6978 3.01024 10.9559C3.52744 11.25 4.2503 11.25 5.696 11.25H6.29979C6.71984 11.25 6.92985 11.25 7.09029 11.3318C7.23141 11.4037 7.34615 11.5183 7.41805 11.6595C7.49983 11.8199 7.49983 12.0299 7.49983 12.45V14.6507C7.49983 15.672 8.32776 16.5 9.34918 16.5C9.59278 16.5 9.81358 16.3565 9.91251 16.1339L12.4331 10.4627C12.5477 10.2047 12.605 10.0757 12.6956 9.98115C12.7757 9.89752 12.8741 9.83363 12.983 9.7944C13.1062 9.75 13.2474 9.75 13.5296 9.75H14.0998C14.9399 9.75 15.3599 9.75 15.6808 9.5865C15.9631 9.44272 16.1925 9.21322 16.3363 8.931C16.4998 8.61015 16.4998 8.19008 16.4998 7.35Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
|
||||
@ -4,8 +4,22 @@ import avatarImg1 from "@/assets/images/avatars/1.svg";
|
||||
import Types from "../../Types";
|
||||
import Sidebar from "@/components/Sidebar";
|
||||
import { motion } from "motion/react";
|
||||
import Loader from "@/components/Loader";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
export default function DashboardChat() {
|
||||
const [state, setState] = useState<number>(1);
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setState(2);
|
||||
|
||||
setTimeout(() => {
|
||||
setState(3);
|
||||
}, 2000);
|
||||
}, 3000);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="p-2.5 h-[100svh]">
|
||||
<main className="h-full flex">
|
||||
@ -43,246 +57,253 @@ export default function DashboardChat() {
|
||||
nisi ut aliquip ex ea commodo consequat.
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.6 }}
|
||||
className="flex items-start gap-5"
|
||||
>
|
||||
<Image src={avatarImg1} alt="" className="w-[40px]" />
|
||||
<Loader state={state} />
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="p-5 border border-white/10 bg-white/10 rounded-lg grid grid-cols-[180px_auto] gap-6">
|
||||
<div>
|
||||
<div className="mb-7 flex items-center gap-2">
|
||||
<svg
|
||||
width="24"
|
||||
height="25"
|
||||
viewBox="0 0 24 25"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M21 21.5L15.0001 15.5M17 10.5C17 14.366 13.866 17.5 10 17.5C6.13401 17.5 3 14.366 3 10.5C3 6.63401 6.13401 3.5 10 3.5C13.866 3.5 17 6.63401 17 10.5Z"
|
||||
stroke="white"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
{state === 3 && (
|
||||
<motion.div
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.6 }}
|
||||
className="flex items-start gap-5"
|
||||
>
|
||||
<Image src={avatarImg1} alt="" className="w-[40px]" />
|
||||
|
||||
<div>
|
||||
<p className="font-medium text-white">DeepSearch</p>
|
||||
<p className="text-xs text-white/75">
|
||||
21s * 24 sources
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative mb-7 flex items-center gap-2">
|
||||
<span className="absolute top-9 left-[9px] w-px h-[35px] bg-[#D9D9D9]"></span>
|
||||
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle cx="10" cy="10" r="10" fill="#D9D9D9" />
|
||||
<path
|
||||
d="M13 7.6875L8.1875 12.5L6 10.3125"
|
||||
stroke="black"
|
||||
strokeWidth="0.875"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<div>
|
||||
<p className="font-medium text-white">Researching</p>
|
||||
<p className="text-xs text-white/75">topic name here</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative mb-7 flex items-center gap-2">
|
||||
<span className="absolute top-9 left-[9px] w-px h-[28px] bg-[#D9D9D9]"></span>
|
||||
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle cx="10" cy="10" r="10" fill="#D9D9D9" />
|
||||
<path
|
||||
d="M13 7.6875L8.1875 12.5L6 10.3125"
|
||||
stroke="black"
|
||||
strokeWidth="0.875"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<div>
|
||||
<p className="font-medium text-white">
|
||||
Exploring research
|
||||
</p>
|
||||
<p className="text-xs text-white/75">papers</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle cx="10" cy="10" r="10" fill="#09C04C" />
|
||||
<path
|
||||
d="M13 8.3125L8.1875 13.125L6 10.9375"
|
||||
stroke="#010101"
|
||||
strokeWidth="0.875"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<div>
|
||||
<p className="font-medium text-white">Complete</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="pl-6 border-l border-white/10 text-white">
|
||||
Lorem ipsum odor amet, consectetuer adipiscing elit. Eros
|
||||
platea molestie taciti amet class at dictum est. Conubia
|
||||
pharetra maecenas iaculis dui litora convallis et nostra
|
||||
leo. Pellentesque justo sapien amet rhoncus aliquet
|
||||
torquent. Netus lobortis justo eleifend auctor nunc. Vel ex
|
||||
montes commodo, sodales ex iaculis? Dictum habitant duis
|
||||
nam; ridiculus gravida eleifend montes dignissim nam. <br />
|
||||
<br />
|
||||
Nam fermentum id sociosqu curae lacinia felis. Nisl ac
|
||||
cursus inceptos suscipit eros. Accumsan class vitae pulvinar
|
||||
suscipit aliquet? Senectus semper feugiat lobortis morbi
|
||||
vitae tempor. Faucibus nibh posuere blandit himenaeos
|
||||
curabitur. Mauris tortor lorem id magnis tellus senectus
|
||||
laoreet. Magnis elit hendrerit litora in faucibus pharetra.
|
||||
Justo dui ultricies commodo tempus, mauris eleifend
|
||||
nascetur. <br />
|
||||
<br />
|
||||
Diam habitant ex maximus odio praesent semper ipsum ex.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="py-1 pl-1.5 pr-3 border border-white/10 bg-white/10 rounded-full flex items-center gap-2">
|
||||
<svg
|
||||
width="78"
|
||||
height="18"
|
||||
viewBox="0 0 78 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle cx="9" cy="9" r="9" fill="#E57777" />
|
||||
<circle cx="21" cy="9" r="9" fill="#09C04C" />
|
||||
<circle cx="33" cy="9" r="9" fill="#D1CA0D" />
|
||||
<circle cx="45" cy="9" r="9" fill="#09C04C" />
|
||||
<circle cx="57" cy="9" r="9" fill="#D1CA0D" />
|
||||
<circle cx="69" cy="9" r="9" fill="#E57777" />
|
||||
</svg>
|
||||
|
||||
<p className="font-medium text-white">24 web pages</p>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clipPath="url(#clip0_46_276)">
|
||||
<div className="space-y-3">
|
||||
<div className="p-5 border border-white/10 bg-white/10 rounded-lg grid grid-cols-[180px_auto] gap-6">
|
||||
<div>
|
||||
<div className="mb-7 flex items-center gap-2">
|
||||
<svg
|
||||
width="24"
|
||||
height="25"
|
||||
viewBox="0 0 24 25"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M3.75 11.25C3.05109 11.25 2.70164 11.25 2.42597 11.1359C2.05844 10.9836 1.76642 10.6915 1.61418 10.324C1.5 10.0483 1.5 9.69893 1.5 9V3.9C1.5 3.05992 1.5 2.63988 1.66349 2.31902C1.8073 2.03677 2.03677 1.8073 2.31902 1.66349C2.63988 1.5 3.05992 1.5 3.9 1.5H9C9.69893 1.5 10.0483 1.5 10.324 1.61418C10.6915 1.76642 10.9836 2.05844 11.1359 2.42597C11.25 2.70164 11.25 3.05109 11.25 3.75M9.15 16.5H14.1C14.9401 16.5 15.3602 16.5 15.681 16.3365C15.9632 16.1927 16.1927 15.9632 16.3365 15.681C16.5 15.3602 16.5 14.9401 16.5 14.1V9.15C16.5 8.30992 16.5 7.88985 16.3365 7.569C16.1927 7.28677 15.9632 7.0573 15.681 6.91349C15.3602 6.75 14.9401 6.75 14.1 6.75H9.15C8.30992 6.75 7.88985 6.75 7.569 6.91349C7.28677 7.0573 7.0573 7.28677 6.91349 7.569C6.75 7.88985 6.75 8.30992 6.75 9.15V14.1C6.75 14.9401 6.75 15.3602 6.91349 15.681C7.0573 15.9632 7.28677 16.1927 7.569 16.3365C7.88985 16.5 8.30992 16.5 9.15 16.5Z"
|
||||
d="M21 21.5L15.0001 15.5M17 10.5C17 14.366 13.866 17.5 10 17.5C6.13401 17.5 3 14.366 3 10.5C3 6.63401 6.13401 3.5 10 3.5C13.866 3.5 17 6.63401 17 10.5Z"
|
||||
stroke="white"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<div>
|
||||
<p className="font-medium text-white">DeepSearch</p>
|
||||
<p className="text-xs text-white/75">
|
||||
21s * 24 sources
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative mb-7 flex items-center gap-2">
|
||||
<span className="absolute top-9 left-[9px] w-px h-[35px] bg-[#D9D9D9]"></span>
|
||||
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle cx="10" cy="10" r="10" fill="#D9D9D9" />
|
||||
<path
|
||||
d="M13 7.6875L8.1875 12.5L6 10.3125"
|
||||
stroke="black"
|
||||
strokeWidth="0.875"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<div>
|
||||
<p className="font-medium text-white">Researching</p>
|
||||
<p className="text-xs text-white/75">
|
||||
topic name here
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative mb-7 flex items-center gap-2">
|
||||
<span className="absolute top-9 left-[9px] w-px h-[28px] bg-[#D9D9D9]"></span>
|
||||
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle cx="10" cy="10" r="10" fill="#D9D9D9" />
|
||||
<path
|
||||
d="M13 7.6875L8.1875 12.5L6 10.3125"
|
||||
stroke="black"
|
||||
strokeWidth="0.875"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<div>
|
||||
<p className="font-medium text-white">
|
||||
Exploring research
|
||||
</p>
|
||||
<p className="text-xs text-white/75">papers</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle cx="10" cy="10" r="10" fill="#09C04C" />
|
||||
<path
|
||||
d="M13 8.3125L8.1875 13.125L6 10.9375"
|
||||
stroke="#010101"
|
||||
strokeWidth="0.875"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<div>
|
||||
<p className="font-medium text-white">Complete</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="pl-6 border-l border-white/10 text-white">
|
||||
Lorem ipsum odor amet, consectetuer adipiscing elit. Eros
|
||||
platea molestie taciti amet class at dictum est. Conubia
|
||||
pharetra maecenas iaculis dui litora convallis et nostra
|
||||
leo. Pellentesque justo sapien amet rhoncus aliquet
|
||||
torquent. Netus lobortis justo eleifend auctor nunc. Vel
|
||||
ex montes commodo, sodales ex iaculis? Dictum habitant
|
||||
duis nam; ridiculus gravida eleifend montes dignissim nam.{" "}
|
||||
<br />
|
||||
<br />
|
||||
Nam fermentum id sociosqu curae lacinia felis. Nisl ac
|
||||
cursus inceptos suscipit eros. Accumsan class vitae
|
||||
pulvinar suscipit aliquet? Senectus semper feugiat
|
||||
lobortis morbi vitae tempor. Faucibus nibh posuere blandit
|
||||
himenaeos curabitur. Mauris tortor lorem id magnis tellus
|
||||
senectus laoreet. Magnis elit hendrerit litora in faucibus
|
||||
pharetra. Justo dui ultricies commodo tempus, mauris
|
||||
eleifend nascetur. <br />
|
||||
<br />
|
||||
Diam habitant ex maximus odio praesent semper ipsum ex.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="py-1 pl-1.5 pr-3 border border-white/10 bg-white/10 rounded-full flex items-center gap-2">
|
||||
<svg
|
||||
width="78"
|
||||
height="18"
|
||||
viewBox="0 0 78 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle cx="9" cy="9" r="9" fill="#E57777" />
|
||||
<circle cx="21" cy="9" r="9" fill="#09C04C" />
|
||||
<circle cx="33" cy="9" r="9" fill="#D1CA0D" />
|
||||
<circle cx="45" cy="9" r="9" fill="#09C04C" />
|
||||
<circle cx="57" cy="9" r="9" fill="#D1CA0D" />
|
||||
<circle cx="69" cy="9" r="9" fill="#E57777" />
|
||||
</svg>
|
||||
|
||||
<p className="font-medium text-white">24 web pages</p>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clipPath="url(#clip0_46_276)">
|
||||
<path
|
||||
d="M3.75 11.25C3.05109 11.25 2.70164 11.25 2.42597 11.1359C2.05844 10.9836 1.76642 10.6915 1.61418 10.324C1.5 10.0483 1.5 9.69893 1.5 9V3.9C1.5 3.05992 1.5 2.63988 1.66349 2.31902C1.8073 2.03677 2.03677 1.8073 2.31902 1.66349C2.63988 1.5 3.05992 1.5 3.9 1.5H9C9.69893 1.5 10.0483 1.5 10.324 1.61418C10.6915 1.76642 10.9836 2.05844 11.1359 2.42597C11.25 2.70164 11.25 3.05109 11.25 3.75M9.15 16.5H14.1C14.9401 16.5 15.3602 16.5 15.681 16.3365C15.9632 16.1927 16.1927 15.9632 16.3365 15.681C16.5 15.3602 16.5 14.9401 16.5 14.1V9.15C16.5 8.30992 16.5 7.88985 16.3365 7.569C16.1927 7.28677 15.9632 7.0573 15.681 6.91349C15.3602 6.75 14.9401 6.75 14.1 6.75H9.15C8.30992 6.75 7.88985 6.75 7.569 6.91349C7.28677 7.0573 7.0573 7.28677 6.91349 7.569C6.75 7.88985 6.75 8.30992 6.75 9.15V14.1C6.75 14.9401 6.75 15.3602 6.91349 15.681C7.0573 15.9632 7.28677 16.1927 7.569 16.3365C7.88985 16.5 8.30992 16.5 9.15 16.5Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_46_276">
|
||||
<rect width="18" height="18" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M6.41002 14.8256C8.20933 15.6239 10.3525 15.5805 12.1877 14.5209C15.2368 12.7605 16.2815 8.86164 14.5211 5.8125L14.3336 5.48773M3.47894 12.1876C1.71853 9.13847 2.76324 5.23958 5.81235 3.47917C7.64758 2.4196 9.79071 2.37625 11.59 3.17452M1.87012 12.2503L3.91915 12.7994L4.46819 10.7503M13.532 7.24936L14.0811 5.20033L16.1301 5.74936"
|
||||
stroke="white"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_46_276">
|
||||
<rect width="18" height="18" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</button>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M6.41002 14.8256C8.20933 15.6239 10.3525 15.5805 12.1877 14.5209C15.2368 12.7605 16.2815 8.86164 14.5211 5.8125L14.3336 5.48773M3.47894 12.1876C1.71853 9.13847 2.76324 5.23958 5.81235 3.47917C7.64758 2.4196 9.79071 2.37625 11.59 3.17452M1.87012 12.2503L3.91915 12.7994L4.46819 10.7503M13.532 7.24936L14.0811 5.20033L16.1301 5.74936"
|
||||
stroke="white"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5.25 16.5V8.25M1.5 9.75V15C1.5 15.8284 2.17157 16.5 3 16.5H13.0697C14.1803 16.5 15.1246 15.6898 15.2935 14.5921L16.1012 9.34215C16.3109 7.97917 15.2564 6.75 13.8774 6.75H11.25C10.8358 6.75 10.5 6.41421 10.5 6V3.34938C10.5 2.32799 9.672 1.5 8.65065 1.5C8.40697 1.5 8.18625 1.64348 8.08733 1.86609L5.44795 7.80458C5.32758 8.07548 5.05899 8.25 4.7626 8.25H3C2.17157 8.25 1.5 8.92155 1.5 9.75Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5.25 16.5V8.25M1.5 9.75V15C1.5 15.8284 2.17157 16.5 3 16.5H13.0697C14.1803 16.5 15.1246 15.6898 15.2935 14.5921L16.1012 9.34215C16.3109 7.97917 15.2564 6.75 13.8774 6.75H11.25C10.8358 6.75 10.5 6.41421 10.5 6V3.34938C10.5 2.32799 9.672 1.5 8.65065 1.5C8.40697 1.5 8.18625 1.64348 8.08733 1.86609L5.44795 7.80458C5.32758 8.07548 5.05899 8.25 4.7626 8.25H3C2.17157 8.25 1.5 8.92155 1.5 9.75Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12.7498 1.5V9.75M16.4998 7.35V3.9C16.4998 3.05992 16.4998 2.63988 16.3363 2.31902C16.1925 2.03677 15.9631 1.8073 15.6808 1.66349C15.3599 1.5 14.9399 1.5 14.0998 1.5H6.0883C4.99219 1.5 4.44414 1.5 4.00148 1.70057C3.61134 1.87736 3.27977 2.16181 3.04572 2.52054C2.78017 2.92754 2.69684 3.46923 2.53017 4.55259L2.13786 7.10259C1.91803 8.53148 1.80811 9.24593 2.02015 9.80183C2.20625 10.2898 2.55628 10.6978 3.01024 10.9559C3.52744 11.25 4.2503 11.25 5.696 11.25H6.29979C6.71984 11.25 6.92985 11.25 7.09029 11.3318C7.23141 11.4037 7.34615 11.5183 7.41805 11.6595C7.49983 11.8199 7.49983 12.0299 7.49983 12.45V14.6507C7.49983 15.672 8.32776 16.5 9.34918 16.5C9.59278 16.5 9.81358 16.3565 9.91251 16.1339L12.4331 10.4627C12.5477 10.2047 12.605 10.0757 12.6956 9.98115C12.7757 9.89752 12.8741 9.83363 12.983 9.7944C13.1062 9.75 13.2474 9.75 13.5296 9.75H14.0998C14.9399 9.75 15.3599 9.75 15.6808 9.5865C15.9631 9.44272 16.1925 9.21322 16.3363 8.931C16.4998 8.61015 16.4998 8.19008 16.4998 7.35Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12.7498 1.5V9.75M16.4998 7.35V3.9C16.4998 3.05992 16.4998 2.63988 16.3363 2.31902C16.1925 2.03677 15.9631 1.8073 15.6808 1.66349C15.3599 1.5 14.9399 1.5 14.0998 1.5H6.0883C4.99219 1.5 4.44414 1.5 4.00148 1.70057C3.61134 1.87736 3.27977 2.16181 3.04572 2.52054C2.78017 2.92754 2.69684 3.46923 2.53017 4.55259L2.13786 7.10259C1.91803 8.53148 1.80811 9.24593 2.02015 9.80183C2.20625 10.2898 2.55628 10.6978 3.01024 10.9559C3.52744 11.25 4.2503 11.25 5.696 11.25H6.29979C6.71984 11.25 6.92985 11.25 7.09029 11.3318C7.23141 11.4037 7.34615 11.5183 7.41805 11.6595C7.49983 11.8199 7.49983 12.0299 7.49983 12.45V14.6507C7.49983 15.672 8.32776 16.5 9.34918 16.5C9.59278 16.5 9.81358 16.3565 9.91251 16.1339L12.4331 10.4627C12.5477 10.2047 12.605 10.0757 12.6956 9.98115C12.7757 9.89752 12.8741 9.83363 12.983 9.7944C13.1062 9.75 13.2474 9.75 13.5296 9.75H14.0998C14.9399 9.75 15.3599 9.75 15.6808 9.5865C15.9631 9.44272 16.1925 9.21322 16.3363 8.931C16.4998 8.61015 16.4998 8.19008 16.4998 7.35Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
|
||||
391
src/app/dashboard/chat/chart-embed/page.tsx
Normal file
391
src/app/dashboard/chat/chart-embed/page.tsx
Normal file
@ -0,0 +1,391 @@
|
||||
"use client";
|
||||
import Image from "next/image";
|
||||
import avatarImg1 from "@/assets/images/avatars/1.svg";
|
||||
import fourLogoImg from "@/assets/images/four-logo.png";
|
||||
import Types from "../../Types";
|
||||
import Sidebar from "@/components/Sidebar";
|
||||
import { motion } from "motion/react";
|
||||
import Loader from "@/components/Loader";
|
||||
import { useEffect, useState } from "react";
|
||||
import { toast } from "react-toastify";
|
||||
|
||||
export default function DashboardChat() {
|
||||
const [state, setState] = useState<number>(1);
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setState(2);
|
||||
|
||||
setTimeout(() => {
|
||||
setState(3);
|
||||
}, 2000);
|
||||
}, 3000);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="p-2.5 h-[100svh]">
|
||||
<main className="h-full flex">
|
||||
<Sidebar />
|
||||
|
||||
<div
|
||||
className="flex-1 h-[calc(100svh-20px)] pt-10 pb-5 bg-[#121A15] rounded-xl flex flex-col justify-between items-center"
|
||||
style={{
|
||||
backgroundImage: `url("/images/body-bg.png")`,
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
}}
|
||||
>
|
||||
<div className="hide-scrollbar flex-1 w-full max-w-[780px] pb-10 space-y-12 overflow-y-auto">
|
||||
<motion.p
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.2 }}
|
||||
className="text-lg font-medium text-center text-white"
|
||||
>
|
||||
Title of the Chat comes in this section
|
||||
</motion.p>
|
||||
|
||||
<motion.p
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.4 }}
|
||||
className="ml-auto max-w-[500px] p-3 border border-white/10 bg-white/10 rounded-lg text-white"
|
||||
>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat.
|
||||
</motion.p>
|
||||
|
||||
<Loader state={state} />
|
||||
|
||||
{state === 3 && (
|
||||
<motion.div
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.6 }}
|
||||
className="flex items-start gap-5"
|
||||
>
|
||||
<Image src={avatarImg1} alt="" className="w-[40px]" />
|
||||
|
||||
<div className="flex-1 space-y-3">
|
||||
<div className="w-full p-5 border border-white/10 bg-white/10 rounded-lg">
|
||||
<div className="mb-3.5 pb-2 border-b border-white/10 flex justify-between items-center">
|
||||
<h4 className="text-lg font-semibold text-white">
|
||||
Token Chart
|
||||
</h4>
|
||||
|
||||
<Image src={fourLogoImg} alt="" className="w-[76px]" />
|
||||
</div>
|
||||
|
||||
<div className="mb-4 w-full p-3 border border-white/25 bg-white/10 hover:bg-white/15 rounded-lg flex justify-between items-center cursor-pointer duration-200">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<svg
|
||||
width="31"
|
||||
height="32"
|
||||
viewBox="0 0 31 32"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect
|
||||
y="0.75"
|
||||
width="30.5"
|
||||
height="30.5"
|
||||
rx="15.25"
|
||||
fill="#FF007A"
|
||||
/>
|
||||
<g clipPath="url(#clip0_4_686)">
|
||||
<path
|
||||
d="M10.9321 7.08979C10.6482 7.046 10.6361 7.04147 10.7705 7.02183C11.0272 6.98257 11.6312 7.03543 12.048 7.13358C13.0205 7.36312 13.9054 7.95205 14.8507 8.99854L15.1014 9.2764L15.4608 9.21902C16.9739 8.9774 18.5112 9.16918 19.7993 9.75963C20.1542 9.92272 20.7129 10.2459 20.7809 10.3289C20.805 10.3561 20.8458 10.5252 20.8715 10.708C20.9681 11.3392 20.9213 11.8209 20.7265 12.1818C20.6208 12.3781 20.6148 12.44 20.6857 12.6092C20.7197 12.6788 20.7725 12.7376 20.8382 12.7787C20.9038 12.8198 20.9797 12.8416 21.0572 12.8417C21.3774 12.8417 21.7217 12.3283 21.8802 11.6125L21.9436 11.3271L22.069 11.4691C22.7591 12.2452 23.2997 13.3023 23.3918 14.0543L23.416 14.2506L23.3012 14.0725C23.1344 13.7995 22.9103 13.5661 22.6443 13.3884C22.1822 13.0849 21.693 12.9807 20.4003 12.9127C19.2315 12.8523 18.5701 12.7526 17.9147 12.5397C16.7988 12.1773 16.237 11.6971 14.9111 9.96953C14.3222 9.2009 13.9598 8.77656 13.5974 8.43528C12.7744 7.65758 11.9665 7.24986 10.9321 7.0913V7.08979Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M21.0519 8.80326C21.0806 8.28982 21.1501 7.95005 21.292 7.64049C21.3231 7.56225 21.3621 7.48737 21.4083 7.41699C21.4159 7.41699 21.3917 7.5076 21.3539 7.61783C21.2513 7.91985 21.2331 8.3306 21.3056 8.8093C21.3962 9.41635 21.4461 9.50394 22.0909 10.1593C22.3944 10.4674 22.7462 10.854 22.8746 11.0216L23.1072 11.3236L22.8746 11.1077C22.5907 10.8434 21.9383 10.3269 21.7934 10.2529C21.6967 10.2046 21.6816 10.2046 21.6227 10.2635C21.5669 10.3179 21.5563 10.3994 21.5472 10.786C21.5367 11.3885 21.4536 11.7751 21.2543 12.1602C21.1471 12.3716 21.1305 12.3263 21.2271 12.0892C21.2996 11.914 21.3071 11.8355 21.3071 11.2526C21.3071 10.0823 21.1652 9.79992 20.3452 9.31971C20.0979 9.17685 19.8439 9.04583 19.5841 8.92708C19.4561 8.87563 19.332 8.81507 19.2126 8.74587C19.2353 8.72322 20.0356 8.95578 20.3573 9.07809C20.8375 9.26232 20.916 9.28497 20.9749 9.26383C21.0127 9.24873 21.0323 9.13548 21.0504 8.80326H21.0519ZM11.4885 10.8071C10.9132 10.0189 10.5553 8.8093 10.6338 7.90475L10.6565 7.62538L10.7878 7.64804C11.0355 7.69334 11.4598 7.85039 11.6592 7.9712C12.2043 8.3004 12.4414 8.73379 12.6815 9.84824C12.7525 10.1744 12.8446 10.5429 12.8869 10.6697C12.9548 10.8706 13.2146 11.3402 13.4245 11.6452C13.5755 11.8657 13.4758 11.9699 13.1406 11.9397C12.6286 11.8944 11.9355 11.4187 11.4885 10.8071ZM20.3512 16.6769C17.6572 15.6002 16.7089 14.6639 16.7089 13.0859C16.7089 12.8533 16.7165 12.663 16.727 12.663C16.7361 12.663 16.8403 12.7386 16.9581 12.8337C17.5047 13.2686 18.1163 13.4543 19.8106 13.7005C20.8073 13.8454 21.366 13.9617 21.884 14.1324C23.53 14.6745 24.5463 15.7738 24.7894 17.2734C24.8589 17.7083 24.8196 18.5237 24.7033 18.9541C24.6127 19.2939 24.3379 19.9054 24.2654 19.9296C24.2443 19.9372 24.2246 19.8601 24.2201 19.7544C24.1929 19.1927 23.906 18.6445 23.4258 18.2338C22.8791 17.7672 22.1452 17.3957 20.3512 16.6784V16.6769ZM18.4606 17.1254C18.429 16.9341 18.3856 16.745 18.3307 16.5591L18.2613 16.3552L18.3896 16.4987C18.5663 16.695 18.7068 16.9472 18.8245 17.2839C18.9151 17.5406 18.9242 17.6161 18.9242 18.0329C18.9242 18.4422 18.9121 18.5282 18.8276 18.7578C18.7115 19.0982 18.517 19.4065 18.2598 19.6578C17.7675 20.1561 17.1348 20.431 16.2211 20.5457C16.0626 20.5654 15.6005 20.5986 15.1943 20.6197C14.1689 20.6726 13.4939 20.7828 12.8884 20.9942C12.8335 21.0183 12.7746 21.0322 12.7147 21.035C12.6906 21.0108 13.1043 20.7662 13.4441 20.6031C13.9243 20.3721 14.403 20.2467 15.4752 20.07C16.0037 19.9825 16.5519 19.8752 16.6908 19.833C18.0015 19.4343 18.6766 18.4029 18.4606 17.1254Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M19.695 19.3063C19.3371 18.5421 19.254 17.8037 19.4503 17.1151C19.4715 17.0396 19.5047 16.9807 19.5258 16.9807C19.5455 16.9807 19.6315 17.026 19.7131 17.0819C19.8792 17.1921 20.2084 17.3779 21.0903 17.8551C22.1896 18.4515 22.8178 18.9121 23.2437 19.4407C23.6167 19.9012 23.8477 20.4283 23.9595 21.0685C24.0229 21.431 23.9851 22.3068 23.8915 22.6722C23.5955 23.826 22.91 24.732 21.9284 25.2605C21.7849 25.3376 21.6566 25.401 21.6415 25.401C21.6279 25.401 21.6807 25.2696 21.7578 25.108C22.0885 24.4224 22.1262 23.7565 21.8771 23.015C21.723 22.5605 21.4119 22.0063 20.7837 21.0685C20.0529 19.9813 19.8747 19.6898 19.695 19.3063ZM9.57434 23.4333C10.5755 22.5937 11.8183 21.9987 12.9524 21.8145C13.5365 21.7396 14.1291 21.7626 14.7056 21.8825C15.4305 22.0667 16.0798 22.4805 16.4166 22.9712C16.7458 23.453 16.8877 23.8713 17.0357 24.8045C17.0931 25.1714 17.1565 25.5414 17.1746 25.6245C17.2849 26.1077 17.5008 26.4943 17.7666 26.6876C18.1894 26.9956 18.9203 27.0153 19.6376 26.7374C19.7121 26.7031 19.7908 26.6787 19.8717 26.6649C19.8973 26.6906 19.5364 26.9307 19.2827 27.0576C18.9817 27.2176 18.645 27.2987 18.3042 27.2931C17.6473 27.2931 17.1021 26.9609 16.6461 26.2844C16.4788 25.998 16.3296 25.7014 16.1991 25.3965C15.7189 24.3077 15.4818 23.977 14.9246 23.613C14.4383 23.2959 13.8117 23.24 13.3405 23.4696C12.7214 23.7716 12.5492 24.5568 12.9932 25.0552C13.2006 25.2693 13.4719 25.4103 13.7664 25.4569C13.8833 25.4729 14.0023 25.4636 14.1153 25.4296C14.2284 25.3955 14.3328 25.3376 14.4214 25.2597C14.5101 25.1818 14.5809 25.0857 14.6292 24.978C14.6775 24.8702 14.702 24.7534 14.7011 24.6354C14.7011 24.3077 14.5743 24.1219 14.2556 23.977C13.8192 23.7822 13.3526 24.0102 13.3541 24.4164C13.3541 24.5901 13.4311 24.6988 13.6063 24.7788C13.718 24.8287 13.7211 24.8317 13.6289 24.8136C13.2303 24.7305 13.1366 24.2518 13.4568 23.9347C13.8434 23.5541 14.6407 23.7218 14.914 24.2427C15.0288 24.4617 15.0424 24.8966 14.9427 25.1594C14.7162 25.7483 14.0638 26.0579 13.3994 25.8887C12.9464 25.774 12.7637 25.6501 12.2185 25.0929C11.2717 24.1234 10.9047 23.9347 9.53961 23.7233L9.27686 23.6825L9.57434 23.4333Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M5.12937 6.08256C8.2915 9.89705 10.4706 11.4706 10.7122 11.8028C10.9115 12.0776 10.836 12.3253 10.4947 12.5186C10.252 12.6405 9.98785 12.7139 9.71703 12.7345C9.49504 12.7345 9.41803 12.6499 9.41803 12.6499C9.28967 12.5291 9.21719 12.5503 8.55728 11.386C7.99623 10.5128 7.42842 9.64397 6.85389 8.77958C6.80557 8.73428 6.80708 8.73428 8.46516 11.6835C8.73245 12.2981 8.51801 12.5231 8.51801 12.6107C8.51801 12.7889 8.46818 12.8825 8.24771 13.1286C7.87925 13.5364 7.71465 13.9954 7.59535 14.9453C7.46246 16.0099 7.08796 16.7619 6.04901 18.05C5.44196 18.8036 5.34229 18.941 5.18826 19.246C4.99497 19.6281 4.94212 19.8425 4.92098 20.3242C4.89833 20.8361 4.94212 21.1653 5.09917 21.6531C5.23508 22.082 5.38004 22.3629 5.747 22.9276C6.06412 23.4154 6.24533 23.7778 6.24533 23.9198C6.24533 24.0315 6.26647 24.0315 6.75876 23.9213C7.93059 23.6585 8.88346 23.1964 9.41954 22.6271C9.75176 22.2753 9.82877 22.082 9.83179 21.6003C9.8333 21.2862 9.82273 21.2197 9.73666 21.0385C9.59773 20.744 9.34403 20.4979 8.7853 20.1173C8.0514 19.619 7.7373 19.2188 7.65273 18.6677C7.58025 18.2146 7.6633 17.896 8.06801 17.0519C8.48781 16.176 8.59201 15.803 8.66298 14.9226C8.70829 14.3533 8.7702 14.1283 8.9348 13.9471C9.10695 13.7599 9.26098 13.6964 9.68682 13.6391C10.38 13.5439 10.8194 13.3672 11.1818 13.035C11.3271 12.9151 11.4443 12.7648 11.5252 12.5947C11.6061 12.4246 11.6486 12.2388 11.6499 12.0504L11.665 11.7333L11.4884 11.531C10.8526 10.794 4.70352 5.50269 4.66426 5.50269C4.65671 5.50269 4.8651 5.76393 5.12937 6.08256ZM6.60322 20.9041C6.6725 20.7817 6.6931 20.6378 6.66091 20.5009C6.62872 20.364 6.54611 20.2443 6.42956 20.1657C6.20304 20.0147 5.84817 20.0871 5.84817 20.2819C5.84817 20.3424 5.88139 20.3861 5.9569 20.4239C6.08375 20.4888 6.09281 20.5613 5.99314 20.7108C5.89197 20.8603 5.90103 20.9917 6.01579 21.0823C6.20153 21.2258 6.46429 21.1472 6.60322 20.9041ZM12.1015 13.8067C11.7768 13.9048 11.4612 14.2476 11.3615 14.607C11.3026 14.826 11.3374 15.2111 11.4264 15.3288C11.5714 15.5206 11.7103 15.5705 12.0894 15.569C12.8293 15.5644 13.4726 15.2488 13.5481 14.8532C13.6085 14.53 13.3261 14.083 12.9365 13.8852C12.6719 13.7778 12.3815 13.7504 12.1015 13.8067ZM12.9683 14.4787C13.0815 14.3171 13.0317 14.1434 12.8369 14.0256C12.4684 13.8006 11.9082 13.9864 11.9082 14.3337C11.9082 14.5074 12.1996 14.6961 12.4669 14.6961C12.6451 14.6961 12.8897 14.5904 12.9683 14.4787Z"
|
||||
fill="white"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_4_686">
|
||||
<rect
|
||||
width="21.1413"
|
||||
height="22.6514"
|
||||
fill="white"
|
||||
transform="translate(4.66357 4.74731)"
|
||||
/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<div>
|
||||
<p className="font-medium text-white">Token Name</p>
|
||||
|
||||
<p className="text-sm font-medium text-white/50">
|
||||
Token Symbol
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="flex items-center gap-2.5 text-white">
|
||||
<svg
|
||||
width="19"
|
||||
height="18"
|
||||
viewBox="0 0 19 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clipPath="url(#clip0_72_1934)">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M9.5 0C14.4709 0 18.5 4.02909 18.5 9C18.5 13.9709 14.4709 18 9.5 18C4.52909 18 0.5 13.9709 0.5 9C0.5 4.02909 4.52909 0 9.5 0Z"
|
||||
fill="#F0B90B"
|
||||
/>
|
||||
<path
|
||||
d="M5.44718 9.00001L5.45367 11.3798L7.47578 12.5697V13.963L4.27025 12.0829V8.30409L5.44718 9.00001ZM5.44718 6.6202V8.00698L4.26953 7.31034V5.92356L5.44718 5.22693L6.63059 5.92356L5.44718 6.6202ZM8.32025 5.92356L9.4979 5.22693L10.6813 5.92356L9.4979 6.6202L8.32025 5.92356Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M6.29688 10.8865V9.49327L7.47452 10.1899V11.5767L6.29688 10.8865ZM8.31899 13.0688L9.49663 13.7654L10.68 13.0688V14.4555L9.49663 15.1522L8.31899 14.4555V13.0688ZM12.369 5.92356L13.5466 5.22693L14.73 5.92356V7.31034L13.5466 8.00698V6.6202L12.369 5.92356ZM13.5466 11.3798L13.5531 9.00001L14.7308 8.30337V12.0822L11.5252 13.9623V12.569L13.5466 11.3798Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M12.703 10.8866L11.5254 11.5767V10.1899L12.703 9.49329V10.8866Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M12.7022 7.1134L12.7087 8.50667L10.6808 9.69658V12.0822L9.50312 12.7723L8.32548 12.0822V9.69658L6.2976 8.50667V7.1134L7.48029 6.41677L9.49591 7.61244L11.5238 6.41677L12.7072 7.1134H12.7022ZM6.29688 4.73432L9.49663 2.84778L12.7022 4.73432L11.5245 5.43095L9.49663 4.23528L7.47452 5.43095L6.29688 4.73432Z"
|
||||
fill="white"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_72_1934">
|
||||
<rect
|
||||
width="18"
|
||||
height="18"
|
||||
fill="white"
|
||||
transform="translate(0.5)"
|
||||
/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
CA : 0x1231....abcd{" "}
|
||||
<svg
|
||||
onClick={() => {
|
||||
toast.success("Copied!");
|
||||
|
||||
navigator.clipboard.writeText("0x1231....abcd");
|
||||
}}
|
||||
width="17"
|
||||
height="16"
|
||||
viewBox="0 0 17 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="cursor-pointer"
|
||||
>
|
||||
<path
|
||||
d="M5.83398 5.33337V3.46671C5.83398 2.71997 5.83398 2.3466 5.97931 2.06139C6.10714 1.8105 6.31111 1.60653 6.562 1.4787C6.84721 1.33337 7.22058 1.33337 7.96732 1.33337H13.034C13.7807 1.33337 14.1541 1.33337 14.4393 1.4787C14.6902 1.60653 14.8942 1.8105 15.022 2.06139C15.1673 2.3466 15.1673 2.71997 15.1673 3.46671V8.53337C15.1673 9.28011 15.1673 9.65351 15.022 9.93871C14.8942 10.1896 14.6902 10.3936 14.4393 10.5214C14.1541 10.6667 13.7807 10.6667 13.034 10.6667H11.1673M3.96732 14.6667H9.03398C9.78072 14.6667 10.1541 14.6667 10.4393 14.5214C10.6902 14.3936 10.8942 14.1896 11.022 13.9387C11.1673 13.6535 11.1673 13.2801 11.1673 12.5334V7.46671C11.1673 6.71997 11.1673 6.3466 11.022 6.06139C10.8942 5.8105 10.6902 5.60653 10.4393 5.4787C10.1541 5.33337 9.78072 5.33337 9.03398 5.33337H3.96732C3.22058 5.33337 2.84721 5.33337 2.562 5.4787C2.31111 5.60653 2.10714 5.8105 1.97931 6.06139C1.83398 6.3466 1.83398 6.71997 1.83398 7.46671V12.5334C1.83398 13.2801 1.83398 13.6535 1.97931 13.9387C2.10714 14.1896 2.31111 14.3936 2.562 14.5214C2.84721 14.6667 3.22058 14.6667 3.96732 14.6667Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.33333"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<iframe
|
||||
height="100%"
|
||||
width="100%"
|
||||
id="defined-embed"
|
||||
title="Defined Embed"
|
||||
src="https://www.defined.fi/bsc/0x5e9f06ad65e41fe90c74cc1479c37466ead6d1be?quoteToken=token0&embedded=1&hideTxTable=0&hideSidebar=0&hideChart=0&hideChartEmptyBars=1&chartSmoothing=0&embedColorMode=DEFAULT"
|
||||
frameBorder="0"
|
||||
allow="clipboard-write"
|
||||
className="w-full aspect-video rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="py-1 pl-1.5 pr-3 border border-white/10 bg-white/10 rounded-full flex items-center gap-2">
|
||||
<svg
|
||||
width="78"
|
||||
height="18"
|
||||
viewBox="0 0 78 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle cx="9" cy="9" r="9" fill="#E57777" />
|
||||
<circle cx="21" cy="9" r="9" fill="#09C04C" />
|
||||
<circle cx="33" cy="9" r="9" fill="#D1CA0D" />
|
||||
<circle cx="45" cy="9" r="9" fill="#09C04C" />
|
||||
<circle cx="57" cy="9" r="9" fill="#D1CA0D" />
|
||||
<circle cx="69" cy="9" r="9" fill="#E57777" />
|
||||
</svg>
|
||||
|
||||
<p className="font-medium text-white">24 web pages</p>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clipPath="url(#clip0_46_276)">
|
||||
<path
|
||||
d="M3.75 11.25C3.05109 11.25 2.70164 11.25 2.42597 11.1359C2.05844 10.9836 1.76642 10.6915 1.61418 10.324C1.5 10.0483 1.5 9.69893 1.5 9V3.9C1.5 3.05992 1.5 2.63988 1.66349 2.31902C1.8073 2.03677 2.03677 1.8073 2.31902 1.66349C2.63988 1.5 3.05992 1.5 3.9 1.5H9C9.69893 1.5 10.0483 1.5 10.324 1.61418C10.6915 1.76642 10.9836 2.05844 11.1359 2.42597C11.25 2.70164 11.25 3.05109 11.25 3.75M9.15 16.5H14.1C14.9401 16.5 15.3602 16.5 15.681 16.3365C15.9632 16.1927 16.1927 15.9632 16.3365 15.681C16.5 15.3602 16.5 14.9401 16.5 14.1V9.15C16.5 8.30992 16.5 7.88985 16.3365 7.569C16.1927 7.28677 15.9632 7.0573 15.681 6.91349C15.3602 6.75 14.9401 6.75 14.1 6.75H9.15C8.30992 6.75 7.88985 6.75 7.569 6.91349C7.28677 7.0573 7.0573 7.28677 6.91349 7.569C6.75 7.88985 6.75 8.30992 6.75 9.15V14.1C6.75 14.9401 6.75 15.3602 6.91349 15.681C7.0573 15.9632 7.28677 16.1927 7.569 16.3365C7.88985 16.5 8.30992 16.5 9.15 16.5Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_46_276">
|
||||
<rect width="18" height="18" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M6.41002 14.8256C8.20933 15.6239 10.3525 15.5805 12.1877 14.5209C15.2368 12.7605 16.2815 8.86164 14.5211 5.8125L14.3336 5.48773M3.47894 12.1876C1.71853 9.13847 2.76324 5.23958 5.81235 3.47917C7.64758 2.4196 9.79071 2.37625 11.59 3.17452M1.87012 12.2503L3.91915 12.7994L4.46819 10.7503M13.532 7.24936L14.0811 5.20033L16.1301 5.74936"
|
||||
stroke="white"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5.25 16.5V8.25M1.5 9.75V15C1.5 15.8284 2.17157 16.5 3 16.5H13.0697C14.1803 16.5 15.1246 15.6898 15.2935 14.5921L16.1012 9.34215C16.3109 7.97917 15.2564 6.75 13.8774 6.75H11.25C10.8358 6.75 10.5 6.41421 10.5 6V3.34938C10.5 2.32799 9.672 1.5 8.65065 1.5C8.40697 1.5 8.18625 1.64348 8.08733 1.86609L5.44795 7.80458C5.32758 8.07548 5.05899 8.25 4.7626 8.25H3C2.17157 8.25 1.5 8.92155 1.5 9.75Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12.7498 1.5V9.75M16.4998 7.35V3.9C16.4998 3.05992 16.4998 2.63988 16.3363 2.31902C16.1925 2.03677 15.9631 1.8073 15.6808 1.66349C15.3599 1.5 14.9399 1.5 14.0998 1.5H6.0883C4.99219 1.5 4.44414 1.5 4.00148 1.70057C3.61134 1.87736 3.27977 2.16181 3.04572 2.52054C2.78017 2.92754 2.69684 3.46923 2.53017 4.55259L2.13786 7.10259C1.91803 8.53148 1.80811 9.24593 2.02015 9.80183C2.20625 10.2898 2.55628 10.6978 3.01024 10.9559C3.52744 11.25 4.2503 11.25 5.696 11.25H6.29979C6.71984 11.25 6.92985 11.25 7.09029 11.3318C7.23141 11.4037 7.34615 11.5183 7.41805 11.6595C7.49983 11.8199 7.49983 12.0299 7.49983 12.45V14.6507C7.49983 15.672 8.32776 16.5 9.34918 16.5C9.59278 16.5 9.81358 16.3565 9.91251 16.1339L12.4331 10.4627C12.5477 10.2047 12.605 10.0757 12.6956 9.98115C12.7757 9.89752 12.8741 9.83363 12.983 9.7944C13.1062 9.75 13.2474 9.75 13.5296 9.75H14.0998C14.9399 9.75 15.3599 9.75 15.6808 9.5865C15.9631 9.44272 16.1925 9.21322 16.3363 8.931C16.4998 8.61015 16.4998 8.19008 16.4998 7.35Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.8 }}
|
||||
className="w-full max-w-[780px] space-y-2"
|
||||
>
|
||||
<div className="w-full flex justify-between items-center">
|
||||
<Types />
|
||||
|
||||
<button className="py-1.5 px-2 border border-white/10 bg-[#121A15] rounded-xl flex items-center gap-1.5 text-base font-medium text-white">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M9 10.125V5.625M6.75 7.875H11.25M5.25 13.5V15.2516C5.25 15.6513 5.25 15.8511 5.33192 15.9537C5.40317 16.043 5.5112 16.0949 5.6254 16.0948C5.75672 16.0946 5.91275 15.9698 6.22482 15.7201L8.0139 14.2888C8.37937 13.9965 8.56215 13.8503 8.76562 13.7464C8.94615 13.6541 9.1383 13.5867 9.3369 13.546C9.56077 13.5 9.79477 13.5 10.2628 13.5H12.15C13.4102 13.5 14.0401 13.5 14.5215 13.2548C14.9449 13.0391 15.2891 12.6949 15.5048 12.2715C15.75 11.7901 15.75 11.1601 15.75 9.9V5.85C15.75 4.58988 15.75 3.95982 15.5048 3.47852C15.2891 3.05516 14.9449 2.71095 14.5215 2.49524C14.0401 2.25 13.4102 2.25 12.15 2.25H5.85C4.58988 2.25 3.95982 2.25 3.47852 2.49524C3.05516 2.71095 2.71095 3.05516 2.49524 3.47852C2.25 3.95982 2.25 4.58988 2.25 5.85V10.5C2.25 11.1975 2.25 11.5462 2.32667 11.8324C2.53472 12.6088 3.1412 13.2153 3.91765 13.4234C4.20378 13.5 4.55252 13.5 5.25 13.5Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
New Chat
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="relative flex">
|
||||
<textarea
|
||||
placeholder="Ask me anything..."
|
||||
className="w-full h-[66px] p-5 resize-none outline-none border border-white/10 focus:border-[#09C04C] bg-[#121A15] rounded-2xl text-base text-white placeholder:text-white/75 duration-200"
|
||||
></textarea>
|
||||
|
||||
<div className="absolute top-1/2 right-0 -translate-y-1/2 w-fit px-5 flex justify-end">
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 32 32"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="32" height="32" rx="16" fill="#09C04C" />
|
||||
<path
|
||||
d="M16 24V8M16 8L10 14M16 8L22 14"
|
||||
stroke="black"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div className="absolute -z-10 -top-1/3 -left-[180px] w-[750px] h-[750px] bg-[#6B6700] blur-[150px] rounded-full"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
278
src/app/dashboard/chat/discord/page.tsx
Normal file
278
src/app/dashboard/chat/discord/page.tsx
Normal file
@ -0,0 +1,278 @@
|
||||
"use client";
|
||||
import Image from "next/image";
|
||||
import avatarImg1 from "@/assets/images/avatars/1.svg";
|
||||
import Types from "../../Types";
|
||||
import Sidebar from "@/components/Sidebar";
|
||||
import { motion } from "motion/react";
|
||||
import Loader from "@/components/Loader";
|
||||
import { useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function DashboardChat() {
|
||||
const [state, setState] = useState<number>(1);
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setState(2);
|
||||
|
||||
setTimeout(() => {
|
||||
setState(3);
|
||||
}, 2000);
|
||||
}, 3000);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="p-2.5 h-[100svh]">
|
||||
<main className="h-full flex">
|
||||
<Sidebar />
|
||||
|
||||
<div
|
||||
className="flex-1 h-[calc(100svh-20px)] pt-10 pb-5 bg-[#121A15] rounded-xl flex flex-col justify-between items-center"
|
||||
style={{
|
||||
backgroundImage: `url("/images/body-bg.png")`,
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
}}
|
||||
>
|
||||
<div className="hide-scrollbar flex-1 w-full max-w-[780px] pb-10 space-y-12 overflow-y-auto">
|
||||
<motion.p
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.2 }}
|
||||
className="text-lg font-medium text-center text-white"
|
||||
>
|
||||
Title of the Chat comes in this section
|
||||
</motion.p>
|
||||
|
||||
<motion.p
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.4 }}
|
||||
className="ml-auto max-w-[500px] p-3 border border-white/10 bg-white/10 rounded-lg text-white"
|
||||
>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat.
|
||||
</motion.p>
|
||||
|
||||
<Loader state={state} />
|
||||
|
||||
{state === 3 && (
|
||||
<motion.div
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.6 }}
|
||||
className="flex items-start gap-5"
|
||||
>
|
||||
<Image src={avatarImg1} alt="" className="w-[40px]" />
|
||||
|
||||
<div className="space-y-3">
|
||||
<Link
|
||||
href={"/"}
|
||||
target="_blank"
|
||||
className="w-full p-5 border border-white/10 bg-white/10 rounded-lg grid grid-cols-[4px_auto] gap-4"
|
||||
>
|
||||
<div className="w-full h-full bg-[#EBE318] rounded-full"></div>
|
||||
|
||||
<div>
|
||||
<h4 className="mb-1 text-2xl font-semibold text-white">
|
||||
Collano
|
||||
</h4>
|
||||
|
||||
<p className="mb-3 font-medium text-[#EBE318]">
|
||||
https://ai-proj-10.vercel.app/
|
||||
</p>
|
||||
|
||||
<p className="mb-5 text-white">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
||||
sed do eiusmod tempor incididunt ut labore et dolore
|
||||
magna aliqua. Ut enim ad minim veniam, quis nostrud
|
||||
exercitation ullamco laboris nisi ut aliquip ex ea
|
||||
commodo consequat
|
||||
</p>
|
||||
|
||||
<Image
|
||||
src={"/og-banner.png"}
|
||||
alt=""
|
||||
width={360}
|
||||
height={180}
|
||||
className="rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="py-1 pl-1.5 pr-3 border border-white/10 bg-white/10 rounded-full flex items-center gap-2">
|
||||
<svg
|
||||
width="78"
|
||||
height="18"
|
||||
viewBox="0 0 78 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle cx="9" cy="9" r="9" fill="#E57777" />
|
||||
<circle cx="21" cy="9" r="9" fill="#09C04C" />
|
||||
<circle cx="33" cy="9" r="9" fill="#D1CA0D" />
|
||||
<circle cx="45" cy="9" r="9" fill="#09C04C" />
|
||||
<circle cx="57" cy="9" r="9" fill="#D1CA0D" />
|
||||
<circle cx="69" cy="9" r="9" fill="#E57777" />
|
||||
</svg>
|
||||
|
||||
<p className="font-medium text-white">24 web pages</p>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clipPath="url(#clip0_46_276)">
|
||||
<path
|
||||
d="M3.75 11.25C3.05109 11.25 2.70164 11.25 2.42597 11.1359C2.05844 10.9836 1.76642 10.6915 1.61418 10.324C1.5 10.0483 1.5 9.69893 1.5 9V3.9C1.5 3.05992 1.5 2.63988 1.66349 2.31902C1.8073 2.03677 2.03677 1.8073 2.31902 1.66349C2.63988 1.5 3.05992 1.5 3.9 1.5H9C9.69893 1.5 10.0483 1.5 10.324 1.61418C10.6915 1.76642 10.9836 2.05844 11.1359 2.42597C11.25 2.70164 11.25 3.05109 11.25 3.75M9.15 16.5H14.1C14.9401 16.5 15.3602 16.5 15.681 16.3365C15.9632 16.1927 16.1927 15.9632 16.3365 15.681C16.5 15.3602 16.5 14.9401 16.5 14.1V9.15C16.5 8.30992 16.5 7.88985 16.3365 7.569C16.1927 7.28677 15.9632 7.0573 15.681 6.91349C15.3602 6.75 14.9401 6.75 14.1 6.75H9.15C8.30992 6.75 7.88985 6.75 7.569 6.91349C7.28677 7.0573 7.0573 7.28677 6.91349 7.569C6.75 7.88985 6.75 8.30992 6.75 9.15V14.1C6.75 14.9401 6.75 15.3602 6.91349 15.681C7.0573 15.9632 7.28677 16.1927 7.569 16.3365C7.88985 16.5 8.30992 16.5 9.15 16.5Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_46_276">
|
||||
<rect width="18" height="18" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M6.41002 14.8256C8.20933 15.6239 10.3525 15.5805 12.1877 14.5209C15.2368 12.7605 16.2815 8.86164 14.5211 5.8125L14.3336 5.48773M3.47894 12.1876C1.71853 9.13847 2.76324 5.23958 5.81235 3.47917C7.64758 2.4196 9.79071 2.37625 11.59 3.17452M1.87012 12.2503L3.91915 12.7994L4.46819 10.7503M13.532 7.24936L14.0811 5.20033L16.1301 5.74936"
|
||||
stroke="white"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5.25 16.5V8.25M1.5 9.75V15C1.5 15.8284 2.17157 16.5 3 16.5H13.0697C14.1803 16.5 15.1246 15.6898 15.2935 14.5921L16.1012 9.34215C16.3109 7.97917 15.2564 6.75 13.8774 6.75H11.25C10.8358 6.75 10.5 6.41421 10.5 6V3.34938C10.5 2.32799 9.672 1.5 8.65065 1.5C8.40697 1.5 8.18625 1.64348 8.08733 1.86609L5.44795 7.80458C5.32758 8.07548 5.05899 8.25 4.7626 8.25H3C2.17157 8.25 1.5 8.92155 1.5 9.75Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12.7498 1.5V9.75M16.4998 7.35V3.9C16.4998 3.05992 16.4998 2.63988 16.3363 2.31902C16.1925 2.03677 15.9631 1.8073 15.6808 1.66349C15.3599 1.5 14.9399 1.5 14.0998 1.5H6.0883C4.99219 1.5 4.44414 1.5 4.00148 1.70057C3.61134 1.87736 3.27977 2.16181 3.04572 2.52054C2.78017 2.92754 2.69684 3.46923 2.53017 4.55259L2.13786 7.10259C1.91803 8.53148 1.80811 9.24593 2.02015 9.80183C2.20625 10.2898 2.55628 10.6978 3.01024 10.9559C3.52744 11.25 4.2503 11.25 5.696 11.25H6.29979C6.71984 11.25 6.92985 11.25 7.09029 11.3318C7.23141 11.4037 7.34615 11.5183 7.41805 11.6595C7.49983 11.8199 7.49983 12.0299 7.49983 12.45V14.6507C7.49983 15.672 8.32776 16.5 9.34918 16.5C9.59278 16.5 9.81358 16.3565 9.91251 16.1339L12.4331 10.4627C12.5477 10.2047 12.605 10.0757 12.6956 9.98115C12.7757 9.89752 12.8741 9.83363 12.983 9.7944C13.1062 9.75 13.2474 9.75 13.5296 9.75H14.0998C14.9399 9.75 15.3599 9.75 15.6808 9.5865C15.9631 9.44272 16.1925 9.21322 16.3363 8.931C16.4998 8.61015 16.4998 8.19008 16.4998 7.35Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.8 }}
|
||||
className="w-full max-w-[780px] space-y-2"
|
||||
>
|
||||
<div className="w-full flex justify-between items-center">
|
||||
<Types />
|
||||
|
||||
<button className="py-1.5 px-2 border border-white/10 bg-[#121A15] rounded-xl flex items-center gap-1.5 text-base font-medium text-white">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M9 10.125V5.625M6.75 7.875H11.25M5.25 13.5V15.2516C5.25 15.6513 5.25 15.8511 5.33192 15.9537C5.40317 16.043 5.5112 16.0949 5.6254 16.0948C5.75672 16.0946 5.91275 15.9698 6.22482 15.7201L8.0139 14.2888C8.37937 13.9965 8.56215 13.8503 8.76562 13.7464C8.94615 13.6541 9.1383 13.5867 9.3369 13.546C9.56077 13.5 9.79477 13.5 10.2628 13.5H12.15C13.4102 13.5 14.0401 13.5 14.5215 13.2548C14.9449 13.0391 15.2891 12.6949 15.5048 12.2715C15.75 11.7901 15.75 11.1601 15.75 9.9V5.85C15.75 4.58988 15.75 3.95982 15.5048 3.47852C15.2891 3.05516 14.9449 2.71095 14.5215 2.49524C14.0401 2.25 13.4102 2.25 12.15 2.25H5.85C4.58988 2.25 3.95982 2.25 3.47852 2.49524C3.05516 2.71095 2.71095 3.05516 2.49524 3.47852C2.25 3.95982 2.25 4.58988 2.25 5.85V10.5C2.25 11.1975 2.25 11.5462 2.32667 11.8324C2.53472 12.6088 3.1412 13.2153 3.91765 13.4234C4.20378 13.5 4.55252 13.5 5.25 13.5Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
New Chat
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="relative flex">
|
||||
<textarea
|
||||
placeholder="Ask me anything..."
|
||||
className="w-full h-[66px] p-5 resize-none outline-none border border-white/10 focus:border-[#09C04C] bg-[#121A15] rounded-2xl text-base text-white placeholder:text-white/75 duration-200"
|
||||
></textarea>
|
||||
|
||||
<div className="absolute top-1/2 right-0 -translate-y-1/2 w-fit px-5 flex justify-end">
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 32 32"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="32" height="32" rx="16" fill="#09C04C" />
|
||||
<path
|
||||
d="M16 24V8M16 8L10 14M16 8L22 14"
|
||||
stroke="black"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div className="absolute -z-10 -top-1/3 -left-[180px] w-[750px] h-[750px] bg-[#6B6700] blur-[150px] rounded-full"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -4,8 +4,22 @@ import Image from "next/image";
|
||||
import avatarImg1 from "@/assets/images/avatars/1.svg";
|
||||
import Types from "../Types";
|
||||
import Sidebar from "@/components/Sidebar";
|
||||
import { useEffect, useState } from "react";
|
||||
import Loader from "@/components/Loader";
|
||||
|
||||
export default function DashboardChat() {
|
||||
const [state, setState] = useState<number>(1);
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setState(2);
|
||||
|
||||
setTimeout(() => {
|
||||
setState(3);
|
||||
}, 2000);
|
||||
}, 3000);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="p-2.5 h-[100svh]">
|
||||
<main className="h-full flex">
|
||||
@ -43,109 +57,113 @@ export default function DashboardChat() {
|
||||
nisi ut aliquip ex ea commodo consequat.
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.6 }}
|
||||
className="flex items-start gap-5"
|
||||
>
|
||||
<Image src={avatarImg1} alt="" className="w-[40px]" />
|
||||
<Loader state={state} />
|
||||
|
||||
<div>
|
||||
<p className="max-w-[660px] text-white">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
|
||||
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
||||
laboris nisi ut aliquip ex ea commodo consequat. Duis aute
|
||||
irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
|
||||
cupidatat non proident, sunt in culpa qui officia deserunt
|
||||
mollit anim id est laborum.
|
||||
</p>
|
||||
{state === 3 && (
|
||||
<motion.div
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.6 }}
|
||||
className="flex items-start gap-5"
|
||||
>
|
||||
<Image src={avatarImg1} alt="" className="w-[40px]" />
|
||||
|
||||
<div className="mt-3 flex gap-3">
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clipPath="url(#clip0_46_276)">
|
||||
<div>
|
||||
<p className="max-w-[660px] text-white">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
|
||||
do eiusmod tempor incididunt ut labore et dolore magna
|
||||
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
|
||||
ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit
|
||||
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
|
||||
occaecat cupidatat non proident, sunt in culpa qui officia
|
||||
deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
|
||||
<div className="mt-3 flex gap-3">
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clipPath="url(#clip0_46_276)">
|
||||
<path
|
||||
d="M3.75 11.25C3.05109 11.25 2.70164 11.25 2.42597 11.1359C2.05844 10.9836 1.76642 10.6915 1.61418 10.324C1.5 10.0483 1.5 9.69893 1.5 9V3.9C1.5 3.05992 1.5 2.63988 1.66349 2.31902C1.8073 2.03677 2.03677 1.8073 2.31902 1.66349C2.63988 1.5 3.05992 1.5 3.9 1.5H9C9.69893 1.5 10.0483 1.5 10.324 1.61418C10.6915 1.76642 10.9836 2.05844 11.1359 2.42597C11.25 2.70164 11.25 3.05109 11.25 3.75M9.15 16.5H14.1C14.9401 16.5 15.3602 16.5 15.681 16.3365C15.9632 16.1927 16.1927 15.9632 16.3365 15.681C16.5 15.3602 16.5 14.9401 16.5 14.1V9.15C16.5 8.30992 16.5 7.88985 16.3365 7.569C16.1927 7.28677 15.9632 7.0573 15.681 6.91349C15.3602 6.75 14.9401 6.75 14.1 6.75H9.15C8.30992 6.75 7.88985 6.75 7.569 6.91349C7.28677 7.0573 7.0573 7.28677 6.91349 7.569C6.75 7.88985 6.75 8.30992 6.75 9.15V14.1C6.75 14.9401 6.75 15.3602 6.91349 15.681C7.0573 15.9632 7.28677 16.1927 7.569 16.3365C7.88985 16.5 8.30992 16.5 9.15 16.5Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_46_276">
|
||||
<rect width="18" height="18" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M3.75 11.25C3.05109 11.25 2.70164 11.25 2.42597 11.1359C2.05844 10.9836 1.76642 10.6915 1.61418 10.324C1.5 10.0483 1.5 9.69893 1.5 9V3.9C1.5 3.05992 1.5 2.63988 1.66349 2.31902C1.8073 2.03677 2.03677 1.8073 2.31902 1.66349C2.63988 1.5 3.05992 1.5 3.9 1.5H9C9.69893 1.5 10.0483 1.5 10.324 1.61418C10.6915 1.76642 10.9836 2.05844 11.1359 2.42597C11.25 2.70164 11.25 3.05109 11.25 3.75M9.15 16.5H14.1C14.9401 16.5 15.3602 16.5 15.681 16.3365C15.9632 16.1927 16.1927 15.9632 16.3365 15.681C16.5 15.3602 16.5 14.9401 16.5 14.1V9.15C16.5 8.30992 16.5 7.88985 16.3365 7.569C16.1927 7.28677 15.9632 7.0573 15.681 6.91349C15.3602 6.75 14.9401 6.75 14.1 6.75H9.15C8.30992 6.75 7.88985 6.75 7.569 6.91349C7.28677 7.0573 7.0573 7.28677 6.91349 7.569C6.75 7.88985 6.75 8.30992 6.75 9.15V14.1C6.75 14.9401 6.75 15.3602 6.91349 15.681C7.0573 15.9632 7.28677 16.1927 7.569 16.3365C7.88985 16.5 8.30992 16.5 9.15 16.5Z"
|
||||
d="M6.41002 14.8256C8.20933 15.6239 10.3525 15.5805 12.1877 14.5209C15.2368 12.7605 16.2815 8.86164 14.5211 5.8125L14.3336 5.48773M3.47894 12.1876C1.71853 9.13847 2.76324 5.23958 5.81235 3.47917C7.64758 2.4196 9.79071 2.37625 11.59 3.17452M1.87012 12.2503L3.91915 12.7994L4.46819 10.7503M13.532 7.24936L14.0811 5.20033L16.1301 5.74936"
|
||||
stroke="white"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_46_276">
|
||||
<rect width="18" height="18" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</button>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M6.41002 14.8256C8.20933 15.6239 10.3525 15.5805 12.1877 14.5209C15.2368 12.7605 16.2815 8.86164 14.5211 5.8125L14.3336 5.48773M3.47894 12.1876C1.71853 9.13847 2.76324 5.23958 5.81235 3.47917C7.64758 2.4196 9.79071 2.37625 11.59 3.17452M1.87012 12.2503L3.91915 12.7994L4.46819 10.7503M13.532 7.24936L14.0811 5.20033L16.1301 5.74936"
|
||||
stroke="white"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5.25 16.5V8.25M1.5 9.75V15C1.5 15.8284 2.17157 16.5 3 16.5H13.0697C14.1803 16.5 15.1246 15.6898 15.2935 14.5921L16.1012 9.34215C16.3109 7.97917 15.2564 6.75 13.8774 6.75H11.25C10.8358 6.75 10.5 6.41421 10.5 6V3.34938C10.5 2.32799 9.672 1.5 8.65065 1.5C8.40697 1.5 8.18625 1.64348 8.08733 1.86609L5.44795 7.80458C5.32758 8.07548 5.05899 8.25 4.7626 8.25H3C2.17157 8.25 1.5 8.92155 1.5 9.75Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5.25 16.5V8.25M1.5 9.75V15C1.5 15.8284 2.17157 16.5 3 16.5H13.0697C14.1803 16.5 15.1246 15.6898 15.2935 14.5921L16.1012 9.34215C16.3109 7.97917 15.2564 6.75 13.8774 6.75H11.25C10.8358 6.75 10.5 6.41421 10.5 6V3.34938C10.5 2.32799 9.672 1.5 8.65065 1.5C8.40697 1.5 8.18625 1.64348 8.08733 1.86609L5.44795 7.80458C5.32758 8.07548 5.05899 8.25 4.7626 8.25H3C2.17157 8.25 1.5 8.92155 1.5 9.75Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12.7498 1.5V9.75M16.4998 7.35V3.9C16.4998 3.05992 16.4998 2.63988 16.3363 2.31902C16.1925 2.03677 15.9631 1.8073 15.6808 1.66349C15.3599 1.5 14.9399 1.5 14.0998 1.5H6.0883C4.99219 1.5 4.44414 1.5 4.00148 1.70057C3.61134 1.87736 3.27977 2.16181 3.04572 2.52054C2.78017 2.92754 2.69684 3.46923 2.53017 4.55259L2.13786 7.10259C1.91803 8.53148 1.80811 9.24593 2.02015 9.80183C2.20625 10.2898 2.55628 10.6978 3.01024 10.9559C3.52744 11.25 4.2503 11.25 5.696 11.25H6.29979C6.71984 11.25 6.92985 11.25 7.09029 11.3318C7.23141 11.4037 7.34615 11.5183 7.41805 11.6595C7.49983 11.8199 7.49983 12.0299 7.49983 12.45V14.6507C7.49983 15.672 8.32776 16.5 9.34918 16.5C9.59278 16.5 9.81358 16.3565 9.91251 16.1339L12.4331 10.4627C12.5477 10.2047 12.605 10.0757 12.6956 9.98115C12.7757 9.89752 12.8741 9.83363 12.983 9.7944C13.1062 9.75 13.2474 9.75 13.5296 9.75H14.0998C14.9399 9.75 15.3599 9.75 15.6808 9.5865C15.9631 9.44272 16.1925 9.21322 16.3363 8.931C16.4998 8.61015 16.4998 8.19008 16.4998 7.35Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12.7498 1.5V9.75M16.4998 7.35V3.9C16.4998 3.05992 16.4998 2.63988 16.3363 2.31902C16.1925 2.03677 15.9631 1.8073 15.6808 1.66349C15.3599 1.5 14.9399 1.5 14.0998 1.5H6.0883C4.99219 1.5 4.44414 1.5 4.00148 1.70057C3.61134 1.87736 3.27977 2.16181 3.04572 2.52054C2.78017 2.92754 2.69684 3.46923 2.53017 4.55259L2.13786 7.10259C1.91803 8.53148 1.80811 9.24593 2.02015 9.80183C2.20625 10.2898 2.55628 10.6978 3.01024 10.9559C3.52744 11.25 4.2503 11.25 5.696 11.25H6.29979C6.71984 11.25 6.92985 11.25 7.09029 11.3318C7.23141 11.4037 7.34615 11.5183 7.41805 11.6595C7.49983 11.8199 7.49983 12.0299 7.49983 12.45V14.6507C7.49983 15.672 8.32776 16.5 9.34918 16.5C9.59278 16.5 9.81358 16.3565 9.91251 16.1339L12.4331 10.4627C12.5477 10.2047 12.605 10.0757 12.6956 9.98115C12.7757 9.89752 12.8741 9.83363 12.983 9.7944C13.1062 9.75 13.2474 9.75 13.5296 9.75H14.0998C14.9399 9.75 15.3599 9.75 15.6808 9.5865C15.9631 9.44272 16.1925 9.21322 16.3363 8.931C16.4998 8.61015 16.4998 8.19008 16.4998 7.35Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
|
||||
250
src/app/dashboard/chat/stake/page.tsx
Normal file
250
src/app/dashboard/chat/stake/page.tsx
Normal file
@ -0,0 +1,250 @@
|
||||
"use client";
|
||||
import Image from "next/image";
|
||||
import avatarImg1 from "@/assets/images/avatars/1.svg";
|
||||
import Types from "../../Types";
|
||||
import Sidebar from "@/components/Sidebar";
|
||||
import { motion } from "motion/react";
|
||||
import Loader from "@/components/Loader";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
export default function DashboardChat() {
|
||||
const [state, setState] = useState<number>(1);
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setState(2);
|
||||
|
||||
setTimeout(() => {
|
||||
setState(3);
|
||||
}, 2000);
|
||||
}, 3000);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="p-2.5 h-[100svh]">
|
||||
<main className="h-full flex">
|
||||
<Sidebar />
|
||||
|
||||
<div
|
||||
className="flex-1 h-[calc(100svh-20px)] pt-10 pb-5 bg-[#121A15] rounded-xl flex flex-col justify-between items-center"
|
||||
style={{
|
||||
backgroundImage: `url("/images/body-bg.png")`,
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
}}
|
||||
>
|
||||
<div className="hide-scrollbar flex-1 w-full max-w-[780px] pb-10 space-y-12 overflow-y-auto">
|
||||
<motion.p
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.2 }}
|
||||
className="text-lg font-medium text-center text-white"
|
||||
>
|
||||
Title of the Chat comes in this section
|
||||
</motion.p>
|
||||
|
||||
<motion.p
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.4 }}
|
||||
className="ml-auto max-w-[500px] p-3 border border-white/10 bg-white/10 rounded-lg text-white"
|
||||
>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat.
|
||||
</motion.p>
|
||||
|
||||
<Loader state={state} />
|
||||
|
||||
{state === 3 && (
|
||||
<motion.div
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.6 }}
|
||||
className="flex items-start gap-5"
|
||||
>
|
||||
<Image src={avatarImg1} alt="" className="w-[40px]" />
|
||||
|
||||
<div className="max-w-[450px] space-y-3">
|
||||
<div className="w-full p-5 border border-white/10 bg-white/10 rounded-lg">
|
||||
<div className="mb-3.5 pb-2 border-b border-white/10 flex justify-between items-center">
|
||||
<h4 className="text-lg font-semibold text-white">
|
||||
Approve Stake
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<div className="mb-4 w-full p-3 border border-white/25 bg-white/10 hover:bg-white/15 rounded-lg flex justify-between items-center cursor-pointer duration-200">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<svg
|
||||
width="30"
|
||||
height="30"
|
||||
viewBox="0 0 30 30"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M15 0C23.2849 0 30 6.71515 30 15C30 23.2849 23.2849 30 15 30C6.71515 30 0 23.2849 0 15C0 6.71515 6.71515 0 15 0Z"
|
||||
fill="#F0B90B"
|
||||
/>
|
||||
<path
|
||||
d="M8.24399 15L8.25481 18.9664L11.625 20.9495V23.2717L6.28245 20.1382V13.8402L8.24399 15ZM8.24399 11.0337V13.345L6.28125 12.1839V9.87261L8.24399 8.71155L10.2164 9.87261L8.24399 11.0337ZM13.0325 9.87261L14.9952 8.71155L16.9676 9.87261L14.9952 11.0337L13.0325 9.87261Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M9.66211 18.1443V15.8221L11.6249 16.9832V19.2945L9.66211 18.1443ZM13.0323 21.7813L14.995 22.9423L16.9674 21.7813V24.0926L14.995 25.2536L13.0323 24.0926V21.7813ZM19.7823 9.87261L21.7451 8.71155L23.7174 9.87261V12.1839L21.7451 13.345V11.0337L19.7823 9.87261ZM21.7451 18.9664L21.7559 15L23.7186 13.839V20.137L18.3761 23.2705V20.9483L21.7451 18.9664Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M20.3377 18.1443L18.375 19.2945V16.9832L20.3377 15.8221V18.1443Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M20.3376 11.8558L20.3484 14.178L16.9686 16.1611V20.1371L15.0059 21.2873L13.0431 20.1371V16.1611L9.66331 14.178V11.8558L11.6345 10.6948L14.9938 12.6876L18.3737 10.6948L20.346 11.8558H20.3376ZM9.66211 7.8907L14.995 4.74646L20.3376 7.8907L18.3749 9.05175L14.995 7.05896L11.6249 9.05175L9.66211 7.8907Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<div>
|
||||
<p className="font-medium text-white">BNB</p>
|
||||
|
||||
<p className="text-sm font-medium text-white/50">
|
||||
BNB
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="font-medium text-white">BNB</p>
|
||||
|
||||
<p className="text-sm font-medium text-white/50">
|
||||
600 USD
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="mb-4 text-sm text-white/75">
|
||||
Note : any required text for staking or any information
|
||||
can appear in this section right here
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<button className="py-2 px-6 border border-[#FF002E] hover:bg-[#FF002E]/10 rounded-lg flex justify-center items-center gap-2 font-dm text-base font-semibold text-white duration-200">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M13.125 4.875L4.875 13.125M4.875 4.875L13.125 13.125"
|
||||
stroke="white"
|
||||
strokeWidth="1.375"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Deny
|
||||
</button>
|
||||
|
||||
<button className="btn-bg py-2 px-6 rounded-lg flex justify-center items-center gap-2 font-dm text-base font-semibold text-white duration-200">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M15.875 9C15.875 5.20304 12.7969 2.125 9 2.125C5.20304 2.125 2.125 5.20304 2.125 9C2.125 12.7969 5.20304 15.875 9 15.875C12.7969 15.875 15.875 12.7969 15.875 9Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.03125"
|
||||
/>
|
||||
<path
|
||||
d="M6.25 9.34375L7.96875 11.0625L11.75 6.9375"
|
||||
stroke="white"
|
||||
strokeWidth="1.03125"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Approve
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.8 }}
|
||||
className="w-full max-w-[780px] space-y-2"
|
||||
>
|
||||
<div className="w-full flex justify-between items-center">
|
||||
<Types />
|
||||
|
||||
<button className="py-1.5 px-2 border border-white/10 bg-[#121A15] rounded-xl flex items-center gap-1.5 text-base font-medium text-white">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M9 10.125V5.625M6.75 7.875H11.25M5.25 13.5V15.2516C5.25 15.6513 5.25 15.8511 5.33192 15.9537C5.40317 16.043 5.5112 16.0949 5.6254 16.0948C5.75672 16.0946 5.91275 15.9698 6.22482 15.7201L8.0139 14.2888C8.37937 13.9965 8.56215 13.8503 8.76562 13.7464C8.94615 13.6541 9.1383 13.5867 9.3369 13.546C9.56077 13.5 9.79477 13.5 10.2628 13.5H12.15C13.4102 13.5 14.0401 13.5 14.5215 13.2548C14.9449 13.0391 15.2891 12.6949 15.5048 12.2715C15.75 11.7901 15.75 11.1601 15.75 9.9V5.85C15.75 4.58988 15.75 3.95982 15.5048 3.47852C15.2891 3.05516 14.9449 2.71095 14.5215 2.49524C14.0401 2.25 13.4102 2.25 12.15 2.25H5.85C4.58988 2.25 3.95982 2.25 3.47852 2.49524C3.05516 2.71095 2.71095 3.05516 2.49524 3.47852C2.25 3.95982 2.25 4.58988 2.25 5.85V10.5C2.25 11.1975 2.25 11.5462 2.32667 11.8324C2.53472 12.6088 3.1412 13.2153 3.91765 13.4234C4.20378 13.5 4.55252 13.5 5.25 13.5Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
New Chat
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="relative flex">
|
||||
<textarea
|
||||
placeholder="Ask me anything..."
|
||||
className="w-full h-[66px] p-5 resize-none outline-none border border-white/10 focus:border-[#09C04C] bg-[#121A15] rounded-2xl text-base text-white placeholder:text-white/75 duration-200"
|
||||
></textarea>
|
||||
|
||||
<div className="absolute top-1/2 right-0 -translate-y-1/2 w-fit px-5 flex justify-end">
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 32 32"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="32" height="32" rx="16" fill="#09C04C" />
|
||||
<path
|
||||
d="M16 24V8M16 8L10 14M16 8L22 14"
|
||||
stroke="black"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div className="absolute -z-10 -top-1/3 -left-[180px] w-[750px] h-[750px] bg-[#6B6700] blur-[150px] rounded-full"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
352
src/app/dashboard/chat/surf-internet/page.tsx
Normal file
352
src/app/dashboard/chat/surf-internet/page.tsx
Normal file
@ -0,0 +1,352 @@
|
||||
"use client";
|
||||
import Image from "next/image";
|
||||
import avatarImg1 from "@/assets/images/avatars/1.svg";
|
||||
import surfImg from "@/assets/images/surf.png";
|
||||
import surfImg2 from "@/assets/images/surf-2.png";
|
||||
import Types from "../../Types";
|
||||
import Sidebar from "@/components/Sidebar";
|
||||
import { motion } from "motion/react";
|
||||
import Loader from "@/components/Loader";
|
||||
import { useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function DashboardChat() {
|
||||
const [state, setState] = useState<number>(1);
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setState(2);
|
||||
|
||||
setTimeout(() => {
|
||||
setState(3);
|
||||
}, 2000);
|
||||
}, 3000);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="p-2.5 h-[100svh]">
|
||||
<main className="h-full flex">
|
||||
<Sidebar />
|
||||
|
||||
<div
|
||||
className="flex-1 h-[calc(100svh-20px)] pt-10 pb-5 bg-[#121A15] rounded-xl flex flex-col justify-between items-center"
|
||||
style={{
|
||||
backgroundImage: `url("/images/body-bg.png")`,
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
}}
|
||||
>
|
||||
<div className="hide-scrollbar flex-1 w-full max-w-[780px] pb-10 space-y-12 overflow-y-auto">
|
||||
<motion.p
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.2 }}
|
||||
className="text-lg font-medium text-center text-white"
|
||||
>
|
||||
Title of the Chat comes in this section
|
||||
</motion.p>
|
||||
|
||||
<motion.p
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.4 }}
|
||||
className="ml-auto max-w-[500px] p-3 border border-white/10 bg-white/10 rounded-lg text-white"
|
||||
>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat.
|
||||
</motion.p>
|
||||
|
||||
<Loader state={state} />
|
||||
|
||||
{state === 3 && (
|
||||
<motion.div
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.6 }}
|
||||
className="flex items-start gap-5"
|
||||
>
|
||||
<Image src={avatarImg1} alt="" className="w-[40px]" />
|
||||
|
||||
<div className="flex-1 space-y-3">
|
||||
<div className="w-full p-5 border border-white/10 bg-white/10 rounded-lg">
|
||||
<Link
|
||||
href={"/"}
|
||||
target="_blank"
|
||||
className="pb-4 border-b border-white/10 flex justify-between items-center"
|
||||
>
|
||||
<div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Image src={surfImg2} alt="" className="w-[20px]" />
|
||||
|
||||
<p className="text-sm font-medium text-[#EBE318]">
|
||||
theguardian.com
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h3 className="my-2 text-xl font-semibold text-white">
|
||||
Hackers steal $1.5bn from Bybit crypto exchange
|
||||
</h3>
|
||||
|
||||
<p className="text-sm text-white/75">Today</p>
|
||||
</div>
|
||||
|
||||
<div className="flex">
|
||||
<Image src={surfImg} alt="" className="w-[75px]" />
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href={"/"}
|
||||
target="_blank"
|
||||
className="py-4 border-b border-white/10 flex justify-between items-center"
|
||||
>
|
||||
<div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Image src={surfImg2} alt="" className="w-[20px]" />
|
||||
|
||||
<p className="text-sm font-medium text-[#EBE318]">
|
||||
theguardian.com
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h3 className="my-2 text-xl font-semibold text-white">
|
||||
Hackers steal $1.5bn from Bybit crypto exchange
|
||||
</h3>
|
||||
|
||||
<p className="text-sm text-white/75">Today</p>
|
||||
</div>
|
||||
|
||||
<div className="flex">
|
||||
<Image src={surfImg} alt="" className="w-[75px]" />
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href={"/"}
|
||||
target="_blank"
|
||||
className="py-4 border-b border-white/10 flex justify-between items-center"
|
||||
>
|
||||
<div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Image src={surfImg2} alt="" className="w-[20px]" />
|
||||
|
||||
<p className="text-sm font-medium text-[#EBE318]">
|
||||
theguardian.com
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h3 className="my-2 text-xl font-semibold text-white">
|
||||
Hackers steal $1.5bn from Bybit crypto exchange
|
||||
</h3>
|
||||
|
||||
<p className="text-sm text-white/75">Today</p>
|
||||
</div>
|
||||
|
||||
<div className="flex">
|
||||
<Image src={surfImg} alt="" className="w-[75px]" />
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href={"/"}
|
||||
target="_blank"
|
||||
className="pt-4 flex justify-between items-center"
|
||||
>
|
||||
<div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Image src={surfImg2} alt="" className="w-[20px]" />
|
||||
|
||||
<p className="text-sm font-medium text-[#EBE318]">
|
||||
theguardian.com
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h3 className="my-2 text-xl font-semibold text-white">
|
||||
Hackers steal $1.5bn from Bybit crypto exchange
|
||||
</h3>
|
||||
|
||||
<p className="text-sm text-white/75">Today</p>
|
||||
</div>
|
||||
|
||||
<div className="flex">
|
||||
<Image src={surfImg} alt="" className="w-[75px]" />
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="py-1 pl-1.5 pr-3 border border-white/10 bg-white/10 rounded-full flex items-center gap-2">
|
||||
<svg
|
||||
width="78"
|
||||
height="18"
|
||||
viewBox="0 0 78 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle cx="9" cy="9" r="9" fill="#E57777" />
|
||||
<circle cx="21" cy="9" r="9" fill="#09C04C" />
|
||||
<circle cx="33" cy="9" r="9" fill="#D1CA0D" />
|
||||
<circle cx="45" cy="9" r="9" fill="#09C04C" />
|
||||
<circle cx="57" cy="9" r="9" fill="#D1CA0D" />
|
||||
<circle cx="69" cy="9" r="9" fill="#E57777" />
|
||||
</svg>
|
||||
|
||||
<p className="font-medium text-white">24 web pages</p>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clipPath="url(#clip0_46_276)">
|
||||
<path
|
||||
d="M3.75 11.25C3.05109 11.25 2.70164 11.25 2.42597 11.1359C2.05844 10.9836 1.76642 10.6915 1.61418 10.324C1.5 10.0483 1.5 9.69893 1.5 9V3.9C1.5 3.05992 1.5 2.63988 1.66349 2.31902C1.8073 2.03677 2.03677 1.8073 2.31902 1.66349C2.63988 1.5 3.05992 1.5 3.9 1.5H9C9.69893 1.5 10.0483 1.5 10.324 1.61418C10.6915 1.76642 10.9836 2.05844 11.1359 2.42597C11.25 2.70164 11.25 3.05109 11.25 3.75M9.15 16.5H14.1C14.9401 16.5 15.3602 16.5 15.681 16.3365C15.9632 16.1927 16.1927 15.9632 16.3365 15.681C16.5 15.3602 16.5 14.9401 16.5 14.1V9.15C16.5 8.30992 16.5 7.88985 16.3365 7.569C16.1927 7.28677 15.9632 7.0573 15.681 6.91349C15.3602 6.75 14.9401 6.75 14.1 6.75H9.15C8.30992 6.75 7.88985 6.75 7.569 6.91349C7.28677 7.0573 7.0573 7.28677 6.91349 7.569C6.75 7.88985 6.75 8.30992 6.75 9.15V14.1C6.75 14.9401 6.75 15.3602 6.91349 15.681C7.0573 15.9632 7.28677 16.1927 7.569 16.3365C7.88985 16.5 8.30992 16.5 9.15 16.5Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_46_276">
|
||||
<rect width="18" height="18" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M6.41002 14.8256C8.20933 15.6239 10.3525 15.5805 12.1877 14.5209C15.2368 12.7605 16.2815 8.86164 14.5211 5.8125L14.3336 5.48773M3.47894 12.1876C1.71853 9.13847 2.76324 5.23958 5.81235 3.47917C7.64758 2.4196 9.79071 2.37625 11.59 3.17452M1.87012 12.2503L3.91915 12.7994L4.46819 10.7503M13.532 7.24936L14.0811 5.20033L16.1301 5.74936"
|
||||
stroke="white"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5.25 16.5V8.25M1.5 9.75V15C1.5 15.8284 2.17157 16.5 3 16.5H13.0697C14.1803 16.5 15.1246 15.6898 15.2935 14.5921L16.1012 9.34215C16.3109 7.97917 15.2564 6.75 13.8774 6.75H11.25C10.8358 6.75 10.5 6.41421 10.5 6V3.34938C10.5 2.32799 9.672 1.5 8.65065 1.5C8.40697 1.5 8.18625 1.64348 8.08733 1.86609L5.44795 7.80458C5.32758 8.07548 5.05899 8.25 4.7626 8.25H3C2.17157 8.25 1.5 8.92155 1.5 9.75Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12.7498 1.5V9.75M16.4998 7.35V3.9C16.4998 3.05992 16.4998 2.63988 16.3363 2.31902C16.1925 2.03677 15.9631 1.8073 15.6808 1.66349C15.3599 1.5 14.9399 1.5 14.0998 1.5H6.0883C4.99219 1.5 4.44414 1.5 4.00148 1.70057C3.61134 1.87736 3.27977 2.16181 3.04572 2.52054C2.78017 2.92754 2.69684 3.46923 2.53017 4.55259L2.13786 7.10259C1.91803 8.53148 1.80811 9.24593 2.02015 9.80183C2.20625 10.2898 2.55628 10.6978 3.01024 10.9559C3.52744 11.25 4.2503 11.25 5.696 11.25H6.29979C6.71984 11.25 6.92985 11.25 7.09029 11.3318C7.23141 11.4037 7.34615 11.5183 7.41805 11.6595C7.49983 11.8199 7.49983 12.0299 7.49983 12.45V14.6507C7.49983 15.672 8.32776 16.5 9.34918 16.5C9.59278 16.5 9.81358 16.3565 9.91251 16.1339L12.4331 10.4627C12.5477 10.2047 12.605 10.0757 12.6956 9.98115C12.7757 9.89752 12.8741 9.83363 12.983 9.7944C13.1062 9.75 13.2474 9.75 13.5296 9.75H14.0998C14.9399 9.75 15.3599 9.75 15.6808 9.5865C15.9631 9.44272 16.1925 9.21322 16.3363 8.931C16.4998 8.61015 16.4998 8.19008 16.4998 7.35Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.8 }}
|
||||
className="w-full max-w-[780px] space-y-2"
|
||||
>
|
||||
<div className="w-full flex justify-between items-center">
|
||||
<Types />
|
||||
|
||||
<button className="py-1.5 px-2 border border-white/10 bg-[#121A15] rounded-xl flex items-center gap-1.5 text-base font-medium text-white">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M9 10.125V5.625M6.75 7.875H11.25M5.25 13.5V15.2516C5.25 15.6513 5.25 15.8511 5.33192 15.9537C5.40317 16.043 5.5112 16.0949 5.6254 16.0948C5.75672 16.0946 5.91275 15.9698 6.22482 15.7201L8.0139 14.2888C8.37937 13.9965 8.56215 13.8503 8.76562 13.7464C8.94615 13.6541 9.1383 13.5867 9.3369 13.546C9.56077 13.5 9.79477 13.5 10.2628 13.5H12.15C13.4102 13.5 14.0401 13.5 14.5215 13.2548C14.9449 13.0391 15.2891 12.6949 15.5048 12.2715C15.75 11.7901 15.75 11.1601 15.75 9.9V5.85C15.75 4.58988 15.75 3.95982 15.5048 3.47852C15.2891 3.05516 14.9449 2.71095 14.5215 2.49524C14.0401 2.25 13.4102 2.25 12.15 2.25H5.85C4.58988 2.25 3.95982 2.25 3.47852 2.49524C3.05516 2.71095 2.71095 3.05516 2.49524 3.47852C2.25 3.95982 2.25 4.58988 2.25 5.85V10.5C2.25 11.1975 2.25 11.5462 2.32667 11.8324C2.53472 12.6088 3.1412 13.2153 3.91765 13.4234C4.20378 13.5 4.55252 13.5 5.25 13.5Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
New Chat
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="relative flex">
|
||||
<textarea
|
||||
placeholder="Ask me anything..."
|
||||
className="w-full h-[66px] p-5 resize-none outline-none border border-white/10 focus:border-[#09C04C] bg-[#121A15] rounded-2xl text-base text-white placeholder:text-white/75 duration-200"
|
||||
></textarea>
|
||||
|
||||
<div className="absolute top-1/2 right-0 -translate-y-1/2 w-fit px-5 flex justify-end">
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 32 32"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="32" height="32" rx="16" fill="#09C04C" />
|
||||
<path
|
||||
d="M16 24V8M16 8L10 14M16 8L22 14"
|
||||
stroke="black"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div className="absolute -z-10 -top-1/3 -left-[180px] w-[750px] h-[750px] bg-[#6B6700] blur-[150px] rounded-full"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
445
src/app/dashboard/chat/transfer/page.tsx
Normal file
445
src/app/dashboard/chat/transfer/page.tsx
Normal file
@ -0,0 +1,445 @@
|
||||
"use client";
|
||||
import Image from "next/image";
|
||||
import avatarImg1 from "@/assets/images/avatars/1.svg";
|
||||
import Types from "../../Types";
|
||||
import Sidebar from "@/components/Sidebar";
|
||||
import { motion } from "motion/react";
|
||||
import Loader from "@/components/Loader";
|
||||
import { useEffect, useState } from "react";
|
||||
import fourLogoImg from "@/assets/images/four-logo.png";
|
||||
import { toast } from "react-toastify";
|
||||
|
||||
export default function DashboardChat() {
|
||||
const [state, setState] = useState<number>(1);
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setState(2);
|
||||
|
||||
setTimeout(() => {
|
||||
setState(3);
|
||||
}, 2000);
|
||||
}, 3000);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="p-2.5 h-[100svh]">
|
||||
<main className="h-full flex">
|
||||
<Sidebar />
|
||||
|
||||
<div
|
||||
className="flex-1 h-[calc(100svh-20px)] pt-10 pb-5 bg-[#121A15] rounded-xl flex flex-col justify-between items-center"
|
||||
style={{
|
||||
backgroundImage: `url("/images/body-bg.png")`,
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
}}
|
||||
>
|
||||
<div className="hide-scrollbar flex-1 w-full max-w-[780px] pb-10 space-y-12 overflow-y-auto">
|
||||
<motion.p
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.2 }}
|
||||
className="text-lg font-medium text-center text-white"
|
||||
>
|
||||
Title of the Chat comes in this section
|
||||
</motion.p>
|
||||
|
||||
<motion.p
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.4 }}
|
||||
className="ml-auto max-w-[500px] p-3 border border-white/10 bg-white/10 rounded-lg text-white"
|
||||
>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat.
|
||||
</motion.p>
|
||||
|
||||
<Loader state={state} />
|
||||
|
||||
{state === 3 && (
|
||||
<motion.div
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.6 }}
|
||||
className="flex items-start gap-5"
|
||||
>
|
||||
<Image src={avatarImg1} alt="" className="w-[40px]" />
|
||||
|
||||
<div className="flex-1 max-w-[450px] space-y-3">
|
||||
<div className="w-full p-5 border border-white/10 bg-white/10 rounded-lg">
|
||||
<div className="mb-3.5 pb-2 border-b border-white/10 flex justify-between items-center">
|
||||
<h4 className="text-lg font-semibold text-white">
|
||||
Approve Transfer
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<div className="mb-4 space-y-3">
|
||||
<div className="w-full p-3 border border-white/25 bg-white/10 hover:bg-white/15 rounded-lg flex justify-between items-center cursor-pointer duration-200">
|
||||
<p className="font-medium text-white">Swap using Dex</p>
|
||||
|
||||
<Image src={fourLogoImg} alt="" className="w-[76px]" />
|
||||
</div>
|
||||
|
||||
<div className="w-full p-3 border border-white/25 bg-white/10 hover:bg-white/15 rounded-lg flex justify-between items-center cursor-pointer duration-200">
|
||||
<p className="font-medium text-white">Swap using Dex</p>
|
||||
|
||||
<svg
|
||||
width="149"
|
||||
height="23"
|
||||
viewBox="0 0 149 23"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clipPath="url(#clip0_72_322)">
|
||||
<path
|
||||
d="M29.0391 17.6879C28.6949 17.6879 28.4516 17.6166 28.3091 17.4743C28.1786 17.3318 28.1133 17.1063 28.1133 16.7977V6.48964C28.1133 6.18105 28.1845 5.95554 28.3269 5.81312C28.4694 5.65882 28.7067 5.58167 29.0391 5.58167H33.4008C35.0625 5.58167 36.2849 5.9318 37.0684 6.63206C37.8517 7.33233 38.2434 8.37678 38.2434 9.76544C38.2434 11.1422 37.8517 12.1807 37.0684 12.881C36.2968 13.5695 35.0744 13.9136 33.4008 13.9136H31.7095V16.7977C31.7095 17.1063 31.6384 17.3318 31.4959 17.4743C31.3535 17.6166 31.1101 17.6879 30.766 17.6879H29.0391ZM33.1161 11.3321C33.6027 11.3321 33.9766 11.2016 34.2377 10.9405C34.5106 10.6793 34.6471 10.2877 34.6471 9.76544C34.6471 9.23134 34.5106 8.83374 34.2377 8.57262C33.9766 8.31151 33.6027 8.18094 33.1161 8.18094H31.7095V11.3321H33.1161Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M42.4469 17.9549C41.3313 17.9549 40.4352 17.5988 39.7587 16.8868C39.094 16.1627 38.7617 15.148 38.7617 13.8423C38.7617 12.8454 38.9872 11.973 39.4382 11.2253C39.9011 10.4775 40.548 9.90191 41.3788 9.49837C42.2215 9.08295 43.1888 8.87524 44.2807 8.87524C45.1828 8.87524 45.978 8.97613 46.6664 9.1779C47.3666 9.3678 48.0075 9.64673 48.5891 10.0147V17.136C48.5891 17.3615 48.5476 17.5099 48.4644 17.581C48.3814 17.6523 48.2152 17.6879 47.966 17.6879H46.15C46.0195 17.6879 45.9186 17.6701 45.8475 17.6344C45.7762 17.587 45.7169 17.5158 45.6694 17.4208L45.4379 16.8868C45.0937 17.2546 44.6784 17.5218 44.1917 17.6879C43.717 17.8659 43.1354 17.9549 42.4469 17.9549ZM43.7823 15.5336C44.2451 15.5336 44.6071 15.4209 44.8682 15.1955C45.1293 14.9699 45.2599 14.6495 45.2599 14.234V11.4567C45.0344 11.3499 44.7495 11.2965 44.4054 11.2965C43.7763 11.2965 43.2718 11.5161 42.8921 11.9552C42.5241 12.3943 42.3402 13.0115 42.3402 13.8067C42.3402 14.958 42.8208 15.5336 43.7823 15.5336Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M51.0666 17.6879C50.7223 17.6879 50.479 17.6166 50.3367 17.4743C50.1942 17.3318 50.123 17.1063 50.123 16.7977V9.6942C50.123 9.48057 50.1586 9.33813 50.2298 9.26692C50.3129 9.18384 50.479 9.1423 50.7283 9.1423H52.5621C52.7044 9.1423 52.8113 9.16603 52.8825 9.21351C52.9655 9.24911 53.013 9.32033 53.0249 9.42715L53.1139 9.96125C53.4463 9.62892 53.8795 9.3678 54.4135 9.1779C54.9596 8.97613 55.5648 8.87524 56.2295 8.87524C57.1909 8.87524 57.9683 9.14823 58.5617 9.6942C59.1552 10.2283 59.4519 11.0235 59.4519 12.0798V16.7977C59.4519 17.1063 59.3807 17.3318 59.2383 17.4743C59.1077 17.6166 58.8703 17.6879 58.5261 17.6879H56.7992C56.455 17.6879 56.2058 17.6166 56.0515 17.4743C55.909 17.3318 55.8379 17.1063 55.8379 16.7977V12.3113C55.8379 11.9552 55.7607 11.7001 55.6064 11.5457C55.4521 11.3914 55.2088 11.3143 54.8765 11.3143C54.5204 11.3143 54.2355 11.4092 54.0219 11.5991C53.8202 11.789 53.7193 12.0502 53.7193 12.3825V16.7977C53.7193 17.1063 53.648 17.3318 53.5057 17.4743C53.3751 17.6166 53.1377 17.6879 52.7935 17.6879H51.0666Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M65.7455 17.9549C64.0839 17.9549 62.802 17.5691 61.8999 16.7977C60.9979 16.0263 60.5469 14.9047 60.5469 13.4329C60.5469 12.5309 60.7546 11.7357 61.17 11.0473C61.5854 10.3589 62.1848 9.82475 62.9681 9.44496C63.7634 9.06515 64.701 8.87524 65.7811 8.87524C66.6 8.87524 67.2884 8.9524 67.8462 9.10669C68.4159 9.26098 68.9204 9.49836 69.3595 9.81883C69.4901 9.90191 69.5553 10.0087 69.5553 10.1393C69.5553 10.2342 69.5079 10.3589 69.4129 10.5131L68.683 11.7771C68.5999 11.9434 68.499 12.0265 68.3804 12.0265C68.3091 12.0265 68.1963 11.979 68.0421 11.884C67.7216 11.6823 67.419 11.5339 67.1341 11.4389C66.8611 11.344 66.5169 11.2965 66.1016 11.2965C65.5081 11.2965 65.0274 11.4864 64.6595 11.8662C64.3034 12.246 64.1253 12.7682 64.1253 13.4329C64.1253 14.1094 64.3093 14.6317 64.6772 14.9995C65.0452 15.3556 65.5496 15.5336 66.1905 15.5336C66.5703 15.5336 66.9146 15.4803 67.2232 15.3734C67.5318 15.2666 67.8462 15.1183 68.1667 14.9284C68.3329 14.8334 68.4515 14.7859 68.5228 14.7859C68.6296 14.7859 68.7245 14.869 68.8076 15.0352L69.6087 16.406C69.6681 16.5247 69.6978 16.6197 69.6978 16.6908C69.6978 16.7977 69.6265 16.8986 69.4842 16.9935C68.9857 17.314 68.4396 17.5513 67.8462 17.7057C67.2646 17.8718 66.5644 17.9549 65.7455 17.9549Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M74.2107 17.9549C73.095 17.9549 72.1989 17.5988 71.5225 16.8868C70.8578 16.1627 70.5254 15.148 70.5254 13.8423C70.5254 12.8454 70.7509 11.973 71.202 11.2253C71.6648 10.4775 72.3117 9.90191 73.1425 9.49837C73.9852 9.08295 74.9526 8.87524 76.0445 8.87524C76.9465 8.87524 77.7417 8.97613 78.43 9.1779C79.1303 9.3678 79.7713 9.64673 80.3529 10.0147V17.136C80.3529 17.3615 80.3113 17.5099 80.2282 17.581C80.1452 17.6523 79.979 17.6879 79.7297 17.6879H77.9138C77.7833 17.6879 77.6823 17.6701 77.6111 17.6344C77.54 17.587 77.4806 17.5158 77.4331 17.4208L77.2017 16.8868C76.8575 17.2546 76.442 17.5218 75.9554 17.6879C75.4807 17.8659 74.8991 17.9549 74.2107 17.9549ZM75.5459 15.5336C76.0089 15.5336 76.3709 15.4209 76.632 15.1955C76.8931 14.9699 77.0236 14.6495 77.0236 14.234V11.4567C76.7981 11.3499 76.5133 11.2965 76.169 11.2965C75.5401 11.2965 75.0356 11.5161 74.6558 11.9552C74.2879 12.3943 74.1038 13.0115 74.1038 13.8067C74.1038 14.958 74.5846 15.5336 75.5459 15.5336Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M91.538 17.0114C91.6211 17.1063 91.6627 17.2132 91.6627 17.3318C91.6627 17.4386 91.6271 17.5277 91.5558 17.5988C91.4846 17.6582 91.3897 17.6879 91.271 17.6879H88.5115C88.3453 17.6879 88.2207 17.676 88.1376 17.6523C88.0664 17.6166 87.9893 17.5514 87.9062 17.4565L85.4849 14.1628V16.7977C85.4849 17.1063 85.4138 17.3318 85.2713 17.4743C85.1288 17.6166 84.8855 17.6879 84.5414 17.6879H82.8145C82.4703 17.6879 82.227 17.6166 82.0845 17.4743C81.9539 17.3318 81.8887 17.1063 81.8887 16.7977V6.48964C81.8887 6.18105 81.9598 5.95554 82.1023 5.81312C82.2448 5.65882 82.4822 5.58167 82.8145 5.58167H84.5414C84.8855 5.58167 85.1288 5.65882 85.2713 5.81312C85.4138 5.95554 85.4849 6.18105 85.4849 6.48964V12.4537L87.835 9.39157C87.9062 9.29661 87.9834 9.23134 88.0664 9.19573C88.1495 9.16013 88.2742 9.14233 88.4403 9.14233H91.1999C91.3185 9.14233 91.4075 9.17793 91.4669 9.24914C91.538 9.30849 91.5737 9.39157 91.5737 9.4984C91.5737 9.61709 91.5321 9.7239 91.4491 9.81886L88.4047 13.3084L91.538 17.0114Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M97.3174 17.9549C96.3205 17.9549 95.4303 17.7888 94.6469 17.4565C93.8755 17.1241 93.2642 16.6256 92.8132 15.961C92.3622 15.2963 92.1367 14.4833 92.1367 13.5219C92.1367 12.0146 92.564 10.8633 93.4186 10.0681C94.2731 9.27286 95.5016 8.87524 97.1038 8.87524C98.6706 8.87524 99.8574 9.26692 100.664 10.0503C101.483 10.8217 101.893 11.8959 101.893 13.2726C101.893 13.8661 101.632 14.1628 101.11 14.1628H95.5193C95.5193 14.6731 95.7092 15.0649 96.0891 15.3378C96.4807 15.6108 97.0682 15.7473 97.8515 15.7473C98.3382 15.7473 98.7417 15.7058 99.0622 15.6227C99.3945 15.5277 99.7269 15.3913 100.059 15.2133C100.202 15.1539 100.297 15.1242 100.344 15.1242C100.451 15.1242 100.54 15.1955 100.611 15.3378L101.216 16.4772C101.276 16.596 101.305 16.6849 101.305 16.7443C101.305 16.8511 101.234 16.9521 101.092 17.0469C100.605 17.3674 100.053 17.5988 99.4361 17.7413C98.8189 17.8837 98.1126 17.9549 97.3174 17.9549ZM98.6884 12.4003C98.6884 11.9493 98.5578 11.5991 98.2967 11.3499C98.0356 11.1007 97.6438 10.976 97.1216 10.976C96.5994 10.976 96.2018 11.1066 95.9288 11.3677C95.6558 11.617 95.5193 11.9612 95.5193 12.4003H98.6884Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M107.997 17.9549C106.999 17.9549 106.056 17.854 105.166 17.6523C104.276 17.4386 103.558 17.1419 103.012 16.7621C102.81 16.6315 102.709 16.495 102.709 16.3526C102.709 16.2577 102.745 16.1568 102.816 16.0499L103.688 14.6613C103.783 14.5189 103.878 14.4477 103.973 14.4477C104.032 14.4477 104.133 14.4892 104.276 14.5723C104.715 14.8216 105.213 15.0233 105.771 15.1775C106.329 15.3319 106.881 15.4091 107.427 15.4091C107.985 15.4091 108.394 15.326 108.655 15.1598C108.928 14.9936 109.065 14.7266 109.065 14.3586C109.065 14.0026 108.916 13.7237 108.62 13.5219C108.335 13.3201 107.795 13.065 106.999 12.7564C105.801 12.3054 104.863 11.8009 104.187 11.2431C103.522 10.6734 103.19 9.90189 103.19 8.92864C103.19 7.75363 103.611 6.85753 104.454 6.24034C105.296 5.62317 106.418 5.31458 107.819 5.31458C108.792 5.31458 109.623 5.40359 110.311 5.58162C111.011 5.74778 111.605 6.0089 112.091 6.36497C112.293 6.51927 112.394 6.66169 112.394 6.79225C112.394 6.87533 112.358 6.97028 112.287 7.0771L111.415 8.46576C111.308 8.60818 111.213 8.6794 111.13 8.6794C111.071 8.6794 110.97 8.63785 110.827 8.55477C110.139 8.10376 109.32 7.87824 108.37 7.87824C107.86 7.87824 107.468 7.96133 107.195 8.1275C106.922 8.29366 106.786 8.56665 106.786 8.94644C106.786 9.20757 106.857 9.4212 106.999 9.58736C107.142 9.75352 107.332 9.90189 107.569 10.0324C107.819 10.1511 108.198 10.3054 108.709 10.4953L109.047 10.62C109.925 10.9642 110.614 11.2965 111.112 11.617C111.622 11.9255 112.008 12.3112 112.269 12.7742C112.53 13.2251 112.661 13.7948 112.661 14.4833C112.661 15.5396 112.263 16.3823 111.468 17.0113C110.685 17.6404 109.528 17.9549 107.997 17.9549Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M116.442 17.6879C116.264 17.6879 116.127 17.6582 116.032 17.5989C115.937 17.5396 115.866 17.4208 115.819 17.2428L113.522 9.5518C113.498 9.4806 113.486 9.42718 113.486 9.39158C113.486 9.22541 113.605 9.14233 113.842 9.14233H116.192C116.347 9.14233 116.459 9.172 116.531 9.23134C116.602 9.27882 116.65 9.3619 116.673 9.48058L117.634 13.522L118.845 10.2639C118.905 10.1215 118.964 10.0266 119.023 9.97908C119.094 9.91973 119.213 9.89006 119.38 9.89006H120.5C120.667 9.89006 120.78 9.91973 120.839 9.97908C120.911 10.0266 120.975 10.1215 121.035 10.2639L122.228 13.522L123.207 9.48058C123.242 9.3619 123.289 9.27882 123.35 9.23134C123.408 9.172 123.516 9.14233 123.67 9.14233H126.038C126.275 9.14233 126.394 9.22541 126.394 9.39158C126.394 9.42718 126.382 9.4806 126.358 9.5518L124.044 17.2428C123.997 17.4208 123.925 17.5396 123.83 17.5989C123.747 17.6582 123.616 17.6879 123.438 17.6879H121.694C121.528 17.6879 121.403 17.6582 121.32 17.5989C121.236 17.5277 121.166 17.409 121.106 17.2428L119.931 14.0204L118.756 17.2428C118.708 17.409 118.637 17.5277 118.542 17.5989C118.459 17.6582 118.335 17.6879 118.169 17.6879H116.442Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M130.908 17.9549C129.792 17.9549 128.897 17.5988 128.22 16.8868C127.555 16.1627 127.223 15.148 127.223 13.8423C127.223 12.8454 127.448 11.973 127.9 11.2253C128.362 10.4775 129.009 9.90191 129.84 9.49837C130.683 9.08295 131.65 8.87524 132.742 8.87524C133.644 8.87524 134.439 8.97613 135.128 9.1779C135.828 9.3678 136.469 9.64673 137.05 10.0147V17.136C137.05 17.3615 137.008 17.5099 136.925 17.581C136.842 17.6523 136.677 17.6879 136.427 17.6879H134.611C134.481 17.6879 134.38 17.6701 134.308 17.6344C134.237 17.587 134.178 17.5158 134.13 17.4208L133.899 16.8868C133.555 17.2546 133.139 17.5218 132.653 17.6879C132.178 17.8659 131.597 17.9549 130.908 17.9549ZM132.244 15.5336C132.706 15.5336 133.069 15.4209 133.33 15.1955C133.591 14.9699 133.721 14.6495 133.721 14.234V11.4567C133.495 11.3499 133.211 11.2965 132.867 11.2965C132.237 11.2965 131.733 11.5161 131.353 11.9552C130.986 12.3943 130.801 13.0115 130.801 13.8067C130.801 14.958 131.283 15.5336 132.244 15.5336Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M139.509 21.2841C139.165 21.2841 138.922 21.213 138.779 21.0705C138.649 20.9281 138.584 20.7025 138.584 20.394V10.1927C139.118 9.81289 139.789 9.49836 140.595 9.24911C141.403 8.99987 142.245 8.87524 143.123 8.87524C146.708 8.87524 148.5 10.3945 148.5 13.4329C148.5 14.8097 148.12 15.9075 147.361 16.7265C146.601 17.5454 145.528 17.9549 144.139 17.9549C143.747 17.9549 143.367 17.9074 142.999 17.8124C142.643 17.7176 142.346 17.587 142.109 17.4208V20.394C142.109 20.7025 142.037 20.9281 141.895 21.0705C141.753 21.213 141.509 21.2841 141.165 21.2841H139.509ZM143.373 15.5514C143.884 15.5514 144.264 15.3616 144.512 14.9817C144.773 14.5901 144.904 14.0678 144.904 13.4151C144.904 12.6437 144.75 12.1035 144.442 11.7949C144.145 11.4745 143.681 11.3143 143.053 11.3143C142.648 11.3143 142.328 11.3677 142.092 11.4745V14.3053C142.092 14.7088 142.204 15.0174 142.429 15.2311C142.655 15.4447 142.97 15.5514 143.373 15.5514Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M11.7718 22.946C8.39903 22.9435 5.68219 22.1341 3.78391 20.6805C1.86286 19.2094 0.84375 17.1217 0.84375 14.7593C0.84375 12.4832 1.86063 10.8419 3.01121 9.73247C3.91292 8.86304 4.90796 8.30621 5.60082 7.98591C5.44413 7.50507 5.24866 6.87557 5.07376 6.22538C4.83975 5.35535 4.61017 4.33456 4.61017 3.58653C4.61017 2.70114 4.8032 1.81197 5.32369 1.12104C5.8736 0.391057 6.70146 0 7.69739 0C8.47576 0 9.13659 0.288725 9.65394 0.786804C10.1485 1.2629 10.4776 1.89516 10.7048 2.55427C11.1042 3.71242 11.2597 5.16745 11.3033 6.6195H12.2572C12.3009 5.16745 12.4563 3.71242 12.8557 2.55427C13.083 1.89516 13.412 1.2629 13.9066 0.786804C14.424 0.288725 15.0847 0 15.8631 0C16.8591 0 17.6869 0.391057 18.2368 1.12104C18.7573 1.81197 18.9504 2.70114 18.9504 3.58653C18.9504 4.33456 18.7207 5.35535 18.4867 6.22538C18.3118 6.87557 18.1163 7.50507 17.9597 7.98591C18.6525 8.30621 19.6476 8.86304 20.5493 9.73247C21.6999 10.8419 22.7167 12.4832 22.7167 14.7593C22.7167 17.1217 21.6977 19.2094 19.7766 20.6805C17.8783 22.1341 15.1614 22.9435 11.7887 22.946H11.7718Z"
|
||||
fill="#633001"
|
||||
/>
|
||||
<path
|
||||
d="M7.69739 0.842041C6.23868 0.842041 5.5672 1.9414 5.5672 3.46178C5.5672 4.67026 6.3474 7.09053 6.66751 8.03269C6.73951 8.2446 6.62638 8.47678 6.42005 8.55896C5.25094 9.02465 1.80078 10.7297 1.80078 14.6347C1.80078 18.748 5.30693 21.8496 11.7725 21.8545C11.7751 21.8545 11.7777 21.8544 11.7802 21.8544C11.7828 21.8544 11.7854 21.8545 11.788 21.8545C18.2535 21.8496 21.7597 18.748 21.7597 14.6347C21.7597 10.7297 18.3096 9.02465 17.1405 8.55896C16.9341 8.47678 16.821 8.2446 16.893 8.03269C17.2131 7.09053 17.9933 4.67026 17.9933 3.46178C17.9933 1.9414 17.3218 0.842041 15.8631 0.842041C13.7634 0.842041 13.2399 3.84677 13.2026 7.07158C13.2001 7.28687 13.0278 7.46154 12.8147 7.46154H10.7458C10.5327 7.46154 10.3604 7.28687 10.3579 7.07158C10.3206 3.84677 9.79716 0.842041 7.69739 0.842041Z"
|
||||
fill="#D1884F"
|
||||
/>
|
||||
<path
|
||||
d="M11.788 20.5369C7.03736 20.5369 1.809 17.968 1.8008 14.6426C1.80079 14.6477 1.80078 14.6529 1.80078 14.6581C1.80078 18.7748 5.31251 21.8779 11.788 21.8779C18.2635 21.8779 21.7751 18.7748 21.7751 14.6581C21.7751 14.6529 21.7751 14.6477 21.7751 14.6426C21.7669 17.968 16.5385 20.5369 11.788 20.5369Z"
|
||||
fill="#FEDC90"
|
||||
/>
|
||||
<path
|
||||
d="M9.14707 13.6211C9.14707 14.7438 8.62184 15.3286 7.97393 15.3286C7.32601 15.3286 6.80078 14.7438 6.80078 13.6211C6.80078 12.4983 7.32601 11.9136 7.97393 11.9136C8.62184 11.9136 9.14707 12.4983 9.14707 13.6211Z"
|
||||
fill="#633001"
|
||||
/>
|
||||
<path
|
||||
d="M16.774 13.6211C16.774 14.7438 16.2488 15.3286 15.6009 15.3286C14.953 15.3286 14.4277 14.7438 14.4277 13.6211C14.4277 12.4983 14.953 11.9136 15.6009 11.9136C16.2488 11.9136 16.774 12.4983 16.774 13.6211Z"
|
||||
fill="#633001"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_72_322">
|
||||
<rect
|
||||
width="148"
|
||||
height="22.9914"
|
||||
fill="white"
|
||||
transform="translate(0.5)"
|
||||
/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="w-full p-3 border border-white/25 bg-white/10 hover:bg-white/15 rounded-lg flex justify-between items-center cursor-pointer duration-200">
|
||||
<p className="font-medium text-white">From</p>
|
||||
<p className="flex items-center gap-2 font-medium text-white">
|
||||
0x...........abcd{" "}
|
||||
<svg
|
||||
onClick={() => {
|
||||
toast.success("Copied!");
|
||||
|
||||
navigator.clipboard.writeText(
|
||||
"0x...........abcd"
|
||||
);
|
||||
}}
|
||||
width="17"
|
||||
height="16"
|
||||
viewBox="0 0 17 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="cursor-pointer"
|
||||
>
|
||||
<g clipPath="url(#clip0_72_249)">
|
||||
<path
|
||||
d="M5.83398 5.32471V3.45804C5.83398 2.71131 5.83398 2.33793 5.97931 2.05272C6.10714 1.80183 6.31111 1.59786 6.562 1.47003C6.84721 1.32471 7.22058 1.32471 7.96732 1.32471H13.034C13.7807 1.32471 14.1541 1.32471 14.4393 1.47003C14.6902 1.59786 14.8942 1.80183 15.022 2.05272C15.1673 2.33793 15.1673 2.71131 15.1673 3.45804V8.52471C15.1673 9.27144 15.1673 9.64484 15.022 9.93004C14.8942 10.1809 14.6902 10.3849 14.4393 10.5127C14.1541 10.658 13.7807 10.658 13.034 10.658H11.1673M3.96732 14.658H9.03398C9.78072 14.658 10.1541 14.658 10.4393 14.5127C10.6902 14.3849 10.8942 14.1809 11.022 13.93C11.1673 13.6448 11.1673 13.2714 11.1673 12.5247V7.45804C11.1673 6.71131 11.1673 6.33793 11.022 6.05272C10.8942 5.80183 10.6902 5.59786 10.4393 5.47003C10.1541 5.32471 9.78072 5.32471 9.03398 5.32471H3.96732C3.22058 5.32471 2.84721 5.32471 2.562 5.47003C2.31111 5.59786 2.10714 5.80183 1.97931 6.05272C1.83398 6.33793 1.83398 6.71131 1.83398 7.45804V12.5247C1.83398 13.2714 1.83398 13.6448 1.97931 13.93C2.10714 14.1809 2.31111 14.3849 2.562 14.5127C2.84721 14.658 3.22058 14.658 3.96732 14.658Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.33333"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_72_249">
|
||||
<rect
|
||||
width="16"
|
||||
height="16"
|
||||
fill="white"
|
||||
transform="translate(0.5 -0.00854492)"
|
||||
/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="w-full p-3 border border-white/25 bg-white/10 hover:bg-white/15 rounded-lg flex justify-between items-center cursor-pointer duration-200">
|
||||
<p className="font-medium text-white">To</p>
|
||||
<p className="flex items-center gap-2 font-medium text-white">
|
||||
0x...........abcd{" "}
|
||||
<svg
|
||||
onClick={() => {
|
||||
toast.success("Copied!");
|
||||
|
||||
navigator.clipboard.writeText(
|
||||
"0x...........abcd"
|
||||
);
|
||||
}}
|
||||
width="17"
|
||||
height="16"
|
||||
viewBox="0 0 17 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="cursor-pointer"
|
||||
>
|
||||
<g clipPath="url(#clip0_72_249)">
|
||||
<path
|
||||
d="M5.83398 5.32471V3.45804C5.83398 2.71131 5.83398 2.33793 5.97931 2.05272C6.10714 1.80183 6.31111 1.59786 6.562 1.47003C6.84721 1.32471 7.22058 1.32471 7.96732 1.32471H13.034C13.7807 1.32471 14.1541 1.32471 14.4393 1.47003C14.6902 1.59786 14.8942 1.80183 15.022 2.05272C15.1673 2.33793 15.1673 2.71131 15.1673 3.45804V8.52471C15.1673 9.27144 15.1673 9.64484 15.022 9.93004C14.8942 10.1809 14.6902 10.3849 14.4393 10.5127C14.1541 10.658 13.7807 10.658 13.034 10.658H11.1673M3.96732 14.658H9.03398C9.78072 14.658 10.1541 14.658 10.4393 14.5127C10.6902 14.3849 10.8942 14.1809 11.022 13.93C11.1673 13.6448 11.1673 13.2714 11.1673 12.5247V7.45804C11.1673 6.71131 11.1673 6.33793 11.022 6.05272C10.8942 5.80183 10.6902 5.59786 10.4393 5.47003C10.1541 5.32471 9.78072 5.32471 9.03398 5.32471H3.96732C3.22058 5.32471 2.84721 5.32471 2.562 5.47003C2.31111 5.59786 2.10714 5.80183 1.97931 6.05272C1.83398 6.33793 1.83398 6.71131 1.83398 7.45804V12.5247C1.83398 13.2714 1.83398 13.6448 1.97931 13.93C2.10714 14.1809 2.31111 14.3849 2.562 14.5127C2.84721 14.658 3.22058 14.658 3.96732 14.658Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.33333"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_72_249">
|
||||
<rect
|
||||
width="16"
|
||||
height="16"
|
||||
fill="white"
|
||||
transform="translate(0.5 -0.00854492)"
|
||||
/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="w-full p-3 border border-white/25 bg-white/10 hover:bg-white/15 rounded-lg flex justify-between items-center cursor-pointer duration-200">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<svg
|
||||
width="31"
|
||||
height="32"
|
||||
viewBox="0 0 31 32"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect
|
||||
y="0.741455"
|
||||
width="30.5"
|
||||
height="30.5"
|
||||
rx="15.25"
|
||||
fill="#FF007A"
|
||||
/>
|
||||
<g clipPath="url(#clip0_72_263)">
|
||||
<path
|
||||
d="M10.9321 7.08124C10.6482 7.03745 10.6361 7.03292 10.7705 7.01329C11.0272 6.97403 11.6312 7.02688 12.048 7.12504C13.0205 7.35457 13.9054 7.94351 14.8507 8.99L15.1014 9.26786L15.4608 9.21047C16.9739 8.96886 18.5112 9.16064 19.7993 9.75109C20.1542 9.91417 20.7129 10.2373 20.7809 10.3204C20.805 10.3476 20.8458 10.5167 20.8715 10.6994C20.9681 11.3306 20.9213 11.8124 20.7265 12.1733C20.6208 12.3696 20.6148 12.4315 20.6857 12.6006C20.7197 12.6703 20.7725 12.729 20.8382 12.7701C20.9038 12.8112 20.9797 12.8331 21.0572 12.8332C21.3774 12.8332 21.7217 12.3197 21.8802 11.604L21.9436 11.3186L22.069 11.4605C22.7591 12.2367 23.2997 13.2938 23.3918 14.0458L23.416 14.2421L23.3012 14.0639C23.1344 13.791 22.9103 13.5576 22.6443 13.3798C22.1822 13.0763 21.693 12.9721 20.4003 12.9042C19.2315 12.8438 18.5701 12.7441 17.9147 12.5312C16.7988 12.1687 16.237 11.6885 14.9111 9.96099C14.3222 9.19235 13.9598 8.76802 13.5974 8.42673C12.7744 7.64904 11.9665 7.24131 10.9321 7.08275V7.08124Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M21.0519 8.79471C21.0806 8.28128 21.1501 7.94151 21.292 7.63194C21.3231 7.55371 21.3621 7.47882 21.4083 7.40845C21.4159 7.40845 21.3917 7.49905 21.3539 7.60929C21.2513 7.91131 21.2331 8.32205 21.3056 8.80075C21.3962 9.40781 21.4461 9.49539 22.0909 10.1508C22.3944 10.4588 22.7462 10.8454 22.8746 11.013L23.1072 11.3151L22.8746 11.0991C22.5907 10.8348 21.9383 10.3184 21.7934 10.2444C21.6967 10.1961 21.6816 10.1961 21.6227 10.255C21.5669 10.3093 21.5563 10.3909 21.5472 10.7775C21.5367 11.38 21.4536 11.7666 21.2543 12.1516C21.1471 12.3631 21.1305 12.3178 21.2271 12.0807C21.2996 11.9055 21.3071 11.827 21.3071 11.2441C21.3071 10.0738 21.1652 9.79137 20.3452 9.31116C20.0979 9.16831 19.8439 9.03728 19.5841 8.91854C19.4561 8.86709 19.332 8.80653 19.2126 8.73733C19.2353 8.71468 20.0356 8.94723 20.3573 9.06955C20.8375 9.25378 20.916 9.27643 20.9749 9.25529C21.0127 9.24019 21.0323 9.12693 21.0504 8.79471H21.0519ZM11.4885 10.7986C10.9132 10.0103 10.5553 8.80075 10.6338 7.89621L10.6565 7.61684L10.7878 7.63949C11.0355 7.68479 11.4598 7.84184 11.6592 7.96265C12.2043 8.29185 12.4414 8.72525 12.6815 9.83969C12.7525 10.1659 12.8446 10.5343 12.8869 10.6612C12.9548 10.862 13.2146 11.3317 13.4245 11.6367C13.5755 11.8572 13.4758 11.9614 13.1406 11.9312C12.6286 11.8859 11.9355 11.4102 11.4885 10.7986ZM20.3512 16.6683C17.6572 15.5916 16.7089 14.6554 16.7089 13.0773C16.7089 12.8448 16.7165 12.6545 16.727 12.6545C16.7361 12.6545 16.8403 12.73 16.9581 12.8251C17.5047 13.26 18.1163 13.4458 19.8106 13.6919C20.8073 13.8369 21.366 13.9532 21.884 14.1238C23.53 14.6659 24.5463 15.7653 24.7894 17.2648C24.8589 17.6997 24.8196 18.5152 24.7033 18.9455C24.6127 19.2853 24.3379 19.8969 24.2654 19.9211C24.2443 19.9286 24.2246 19.8516 24.2201 19.7459C24.1929 19.1841 23.906 18.636 23.4258 18.2252C22.8791 17.7586 22.1452 17.3871 20.3512 16.6698V16.6683ZM18.4606 17.1168C18.429 16.9256 18.3856 16.7365 18.3307 16.5505L18.2613 16.3467L18.3896 16.4901C18.5663 16.6864 18.7068 16.9386 18.8245 17.2754C18.9151 17.5321 18.9242 17.6076 18.9242 18.0244C18.9242 18.4336 18.9121 18.5197 18.8276 18.7492C18.7115 19.0896 18.517 19.3979 18.2598 19.6492C17.7675 20.1476 17.1348 20.4224 16.2211 20.5372C16.0626 20.5568 15.6005 20.59 15.1943 20.6112C14.1689 20.664 13.4939 20.7743 12.8884 20.9857C12.8335 21.0098 12.7746 21.0236 12.7147 21.0264C12.6906 21.0023 13.1043 20.7577 13.4441 20.5946C13.9243 20.3635 14.403 20.2382 15.4752 20.0615C16.0037 19.9739 16.5519 19.8667 16.6908 19.8244C18.0015 19.4258 18.6766 18.3944 18.4606 17.1168Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M19.6955 19.2977C19.3376 18.5336 19.2545 17.7952 19.4508 17.1066C19.472 17.0311 19.5052 16.9722 19.5263 16.9722C19.546 16.9722 19.632 17.0175 19.7136 17.0733C19.8797 17.1836 20.2089 17.3693 21.0908 17.8465C22.1901 18.443 22.8183 18.9036 23.2442 19.4321C23.6172 19.8927 23.8482 20.4197 23.96 21.06C24.0234 21.4224 23.9856 22.2983 23.892 22.6637C23.596 23.8174 22.9104 24.7235 21.9289 25.252C21.7854 25.329 21.6571 25.3924 21.642 25.3924C21.6284 25.3924 21.6812 25.2611 21.7582 25.0995C22.089 24.4139 22.1267 23.7479 21.8775 23.0065C21.7235 22.552 21.4124 21.9978 20.7842 21.06C20.0534 19.9727 19.8752 19.6813 19.6955 19.2977ZM9.57483 23.4248C10.576 22.5852 11.8188 21.9902 12.9529 21.806C13.537 21.7311 14.1295 21.754 14.7061 21.8739C15.431 22.0582 16.0803 22.4719 16.4171 22.9627C16.7463 23.4444 16.8882 23.8627 17.0362 24.7959C17.0936 25.1629 17.157 25.5329 17.1751 25.6159C17.2854 26.0992 17.5013 26.4857 17.7671 26.679C18.1899 26.9871 18.9208 27.0067 19.6381 26.7289C19.7126 26.6945 19.7913 26.6702 19.8721 26.6564C19.8978 26.6821 19.5369 26.9222 19.2832 27.049C18.9822 27.2091 18.6455 27.2901 18.3047 27.2846C17.6478 27.2846 17.1026 26.9524 16.6466 26.2758C16.4793 25.9894 16.3301 25.6929 16.1996 25.3879C15.7194 24.2991 15.4823 23.9684 14.9251 23.6045C14.4388 23.2874 13.8121 23.2315 13.341 23.461C12.7219 23.763 12.5497 24.5483 12.9937 25.0466C13.2011 25.2608 13.4724 25.4017 13.7668 25.4483C13.8838 25.4643 14.0028 25.455 14.1158 25.421C14.2289 25.387 14.3332 25.329 14.4219 25.2511C14.5106 25.1732 14.5814 25.0771 14.6297 24.9694C14.6779 24.8617 14.7025 24.7449 14.7016 24.6268C14.7016 24.2991 14.5747 24.1134 14.2561 23.9684C13.8197 23.7736 13.3531 24.0016 13.3546 24.4079C13.3546 24.5815 13.4316 24.6902 13.6068 24.7703C13.7185 24.8201 13.7215 24.8231 13.6294 24.805C13.2308 24.722 13.1371 24.2433 13.4573 23.9261C13.8439 23.5456 14.6412 23.7132 14.9145 24.2342C15.0293 24.4532 15.0429 24.8881 14.9432 25.1508C14.7167 25.7398 14.0643 26.0493 13.3999 25.8802C12.9469 25.7654 12.7641 25.6416 12.219 25.0844C11.2722 24.1149 10.9052 23.9261 9.5401 23.7147L9.27734 23.674L9.57483 23.4248Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M5.12937 6.07402C8.2915 9.88851 10.4706 11.462 10.7122 11.7942C10.9115 12.0691 10.836 12.3167 10.4947 12.51C10.252 12.632 9.98785 12.7053 9.71703 12.726C9.49504 12.726 9.41803 12.6414 9.41803 12.6414C9.28967 12.5206 9.21719 12.5417 8.55728 11.3775C7.99623 10.5043 7.42842 9.63543 6.85389 8.77104C6.80557 8.72574 6.80708 8.72574 8.46516 11.6749C8.73245 12.2896 8.51801 12.5146 8.51801 12.6021C8.51801 12.7803 8.46818 12.874 8.24771 13.1201C7.87925 13.5278 7.71465 13.9869 7.59535 14.9367C7.46246 16.0014 7.08796 16.7534 6.04901 18.0415C5.44196 18.795 5.34229 18.9324 5.18826 19.2375C4.99497 19.6195 4.94212 19.834 4.92098 20.3157C4.89833 20.8276 4.94212 21.1568 5.09917 21.6446C5.23508 22.0734 5.38004 22.3543 5.747 22.9191C6.06412 23.4068 6.24533 23.7693 6.24533 23.9112C6.24533 24.023 6.26647 24.023 6.75876 23.9127C7.93059 23.65 8.88346 23.1879 9.41954 22.6186C9.75176 22.2667 9.82877 22.0734 9.83179 21.5917C9.8333 21.2776 9.82273 21.2112 9.73666 21.03C9.59773 20.7355 9.34403 20.4893 8.7853 20.1088C8.0514 19.6105 7.7373 19.2103 7.65273 18.6591C7.58025 18.2061 7.6633 17.8875 8.06801 17.0433C8.48781 16.1675 8.59201 15.7945 8.66298 14.9141C8.70829 14.3448 8.7702 14.1198 8.9348 13.9386C9.10695 13.7513 9.26098 13.6879 9.68682 13.6305C10.38 13.5354 10.8194 13.3587 11.1818 13.0265C11.3271 12.9066 11.4443 12.7563 11.5252 12.5862C11.6061 12.416 11.6486 12.2303 11.6499 12.0419L11.665 11.7248L11.4884 11.5224C10.8526 10.7855 4.70352 5.49414 4.66426 5.49414C4.65671 5.49414 4.8651 5.75539 5.12937 6.07402ZM6.60322 20.8956C6.6725 20.7732 6.6931 20.6292 6.66091 20.4924C6.62872 20.3555 6.54611 20.2358 6.42956 20.1571C6.20304 20.0061 5.84817 20.0786 5.84817 20.2734C5.84817 20.3338 5.88139 20.3776 5.9569 20.4153C6.08375 20.4803 6.09281 20.5528 5.99314 20.7023C5.89197 20.8518 5.90103 20.9831 6.01579 21.0738C6.20153 21.2172 6.46429 21.1387 6.60322 20.8956ZM12.1015 13.7981C11.7768 13.8963 11.4612 14.2391 11.3615 14.5985C11.3026 14.8174 11.3374 15.2025 11.4264 15.3203C11.5714 15.5121 11.7103 15.5619 12.0894 15.5604C12.8293 15.5559 13.4726 15.2403 13.5481 14.8446C13.6085 14.5215 13.3261 14.0745 12.9365 13.8767C12.6719 13.7692 12.3815 13.7419 12.1015 13.7981ZM12.9683 14.4701C13.0815 14.3085 13.0317 14.1349 12.8369 14.0171C12.4684 13.7921 11.9082 13.9778 11.9082 14.3252C11.9082 14.4988 12.1996 14.6876 12.4669 14.6876C12.6451 14.6876 12.8897 14.5819 12.9683 14.4701Z"
|
||||
fill="white"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_72_263">
|
||||
<rect
|
||||
width="21.1413"
|
||||
height="22.6514"
|
||||
fill="white"
|
||||
transform="translate(4.66406 4.73877)"
|
||||
/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<div>
|
||||
<p className="font-medium text-white">Uniswap</p>
|
||||
|
||||
<p className="text-sm font-medium text-white/50">
|
||||
UNI
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-end">
|
||||
<p className="font-medium text-white">2 UNI</p>
|
||||
|
||||
<p className="text-sm font-medium text-white/50">
|
||||
24 USD
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<button className="py-2 px-6 border border-[#FF002E] hover:bg-[#FF002E]/10 rounded-lg flex justify-center items-center gap-2 font-dm text-base font-semibold text-white duration-200">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M13.125 4.875L4.875 13.125M4.875 4.875L13.125 13.125"
|
||||
stroke="white"
|
||||
strokeWidth="1.375"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Deny
|
||||
</button>
|
||||
|
||||
<button className="btn-bg py-2 px-6 rounded-lg flex justify-center items-center gap-2 font-dm text-base font-semibold text-white duration-200">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M15.875 9C15.875 5.20304 12.7969 2.125 9 2.125C5.20304 2.125 2.125 5.20304 2.125 9C2.125 12.7969 5.20304 15.875 9 15.875C12.7969 15.875 15.875 12.7969 15.875 9Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.03125"
|
||||
/>
|
||||
<path
|
||||
d="M6.25 9.34375L7.96875 11.0625L11.75 6.9375"
|
||||
stroke="white"
|
||||
strokeWidth="1.03125"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Approve
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.8 }}
|
||||
className="w-full max-w-[780px] space-y-2"
|
||||
>
|
||||
<div className="w-full flex justify-between items-center">
|
||||
<Types />
|
||||
|
||||
<button className="py-1.5 px-2 border border-white/10 bg-[#121A15] rounded-xl flex items-center gap-1.5 text-base font-medium text-white">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M9 10.125V5.625M6.75 7.875H11.25M5.25 13.5V15.2516C5.25 15.6513 5.25 15.8511 5.33192 15.9537C5.40317 16.043 5.5112 16.0949 5.6254 16.0948C5.75672 16.0946 5.91275 15.9698 6.22482 15.7201L8.0139 14.2888C8.37937 13.9965 8.56215 13.8503 8.76562 13.7464C8.94615 13.6541 9.1383 13.5867 9.3369 13.546C9.56077 13.5 9.79477 13.5 10.2628 13.5H12.15C13.4102 13.5 14.0401 13.5 14.5215 13.2548C14.9449 13.0391 15.2891 12.6949 15.5048 12.2715C15.75 11.7901 15.75 11.1601 15.75 9.9V5.85C15.75 4.58988 15.75 3.95982 15.5048 3.47852C15.2891 3.05516 14.9449 2.71095 14.5215 2.49524C14.0401 2.25 13.4102 2.25 12.15 2.25H5.85C4.58988 2.25 3.95982 2.25 3.47852 2.49524C3.05516 2.71095 2.71095 3.05516 2.49524 3.47852C2.25 3.95982 2.25 4.58988 2.25 5.85V10.5C2.25 11.1975 2.25 11.5462 2.32667 11.8324C2.53472 12.6088 3.1412 13.2153 3.91765 13.4234C4.20378 13.5 4.55252 13.5 5.25 13.5Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
New Chat
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="relative flex">
|
||||
<textarea
|
||||
placeholder="Ask me anything..."
|
||||
className="w-full h-[66px] p-5 resize-none outline-none border border-white/10 focus:border-[#09C04C] bg-[#121A15] rounded-2xl text-base text-white placeholder:text-white/75 duration-200"
|
||||
></textarea>
|
||||
|
||||
<div className="absolute top-1/2 right-0 -translate-y-1/2 w-fit px-5 flex justify-end">
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 32 32"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="32" height="32" rx="16" fill="#09C04C" />
|
||||
<path
|
||||
d="M16 24V8M16 8L10 14M16 8L22 14"
|
||||
stroke="black"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div className="absolute -z-10 -top-1/3 -left-[180px] w-[750px] h-[750px] bg-[#6B6700] blur-[150px] rounded-full"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
247
src/app/dashboard/chat/trending-tokens/page.tsx
Normal file
247
src/app/dashboard/chat/trending-tokens/page.tsx
Normal file
@ -0,0 +1,247 @@
|
||||
"use client";
|
||||
import Image from "next/image";
|
||||
import avatarImg1 from "@/assets/images/avatars/1.svg";
|
||||
import trendingTokenImg from "@/assets/images/trending-token.png";
|
||||
import fourLogoImg from "@/assets/images/four-logo.png";
|
||||
import Types from "../../Types";
|
||||
import Sidebar from "@/components/Sidebar";
|
||||
import { motion } from "motion/react";
|
||||
import Loader from "@/components/Loader";
|
||||
import { useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { toast } from "react-toastify";
|
||||
|
||||
export default function DashboardChat() {
|
||||
const [state, setState] = useState<number>(1);
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setState(2);
|
||||
|
||||
setTimeout(() => {
|
||||
setState(3);
|
||||
}, 2000);
|
||||
}, 3000);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="p-2.5 h-[100svh]">
|
||||
<main className="h-full flex">
|
||||
<Sidebar />
|
||||
|
||||
<div
|
||||
className="flex-1 h-[calc(100svh-20px)] pt-10 pb-5 bg-[#121A15] rounded-xl flex flex-col justify-between items-center"
|
||||
style={{
|
||||
backgroundImage: `url("/images/body-bg.png")`,
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
}}
|
||||
>
|
||||
<div className="hide-scrollbar flex-1 w-full max-w-[780px] pb-10 space-y-12 overflow-y-auto">
|
||||
<motion.p
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.2 }}
|
||||
className="text-lg font-medium text-center text-white"
|
||||
>
|
||||
Title of the Chat comes in this section
|
||||
</motion.p>
|
||||
|
||||
<motion.p
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.4 }}
|
||||
className="ml-auto max-w-[500px] p-3 border border-white/10 bg-white/10 rounded-lg text-white"
|
||||
>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat.
|
||||
</motion.p>
|
||||
|
||||
<Loader state={state} />
|
||||
|
||||
{state === 3 && (
|
||||
<motion.div
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.6 }}
|
||||
className="flex items-start gap-5"
|
||||
>
|
||||
<Image src={avatarImg1} alt="" className="w-[40px]" />
|
||||
|
||||
<div className="flex-1 space-y-3">
|
||||
<div className="w-full p-5 border border-white/10 bg-white/10 rounded-lg">
|
||||
<div className="mb-3.5 pb-2 border-b border-white/10 flex justify-between items-center">
|
||||
<h4 className="text-lg font-semibold text-white">
|
||||
Trending Tokens
|
||||
</h4>
|
||||
|
||||
<Image src={fourLogoImg} alt="" className="w-[76px]" />
|
||||
</div>
|
||||
|
||||
<div className="w-full grid grid-cols-3 gap-4">
|
||||
{[1, 2, 3, 4, 5, 6].map((_, index) => {
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="relative hover:-translate-y-1 p-3 border border-white/10 bg-white/10 rounded-lg duration-200"
|
||||
>
|
||||
<Link href={"#"} target="_blank">
|
||||
<Image
|
||||
src={trendingTokenImg}
|
||||
alt=""
|
||||
className="w-full rounded-lg"
|
||||
/>
|
||||
</Link>
|
||||
|
||||
<h4 className="mt-3 mb-2 text-lg font-medium text-white">
|
||||
GOVNISHE (GVN)
|
||||
</h4>
|
||||
|
||||
<p className="flex items-center gap-2.5 text-sm text-white/75">
|
||||
<svg
|
||||
width="19"
|
||||
height="18"
|
||||
viewBox="0 0 19 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clipPath="url(#clip0_72_1934)">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M9.5 0C14.4709 0 18.5 4.02909 18.5 9C18.5 13.9709 14.4709 18 9.5 18C4.52909 18 0.5 13.9709 0.5 9C0.5 4.02909 4.52909 0 9.5 0Z"
|
||||
fill="#F0B90B"
|
||||
/>
|
||||
<path
|
||||
d="M5.44718 9.00001L5.45367 11.3798L7.47578 12.5697V13.963L4.27025 12.0829V8.30409L5.44718 9.00001ZM5.44718 6.6202V8.00698L4.26953 7.31034V5.92356L5.44718 5.22693L6.63059 5.92356L5.44718 6.6202ZM8.32025 5.92356L9.4979 5.22693L10.6813 5.92356L9.4979 6.6202L8.32025 5.92356Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M6.29688 10.8865V9.49327L7.47452 10.1899V11.5767L6.29688 10.8865ZM8.31899 13.0688L9.49663 13.7654L10.68 13.0688V14.4555L9.49663 15.1522L8.31899 14.4555V13.0688ZM12.369 5.92356L13.5466 5.22693L14.73 5.92356V7.31034L13.5466 8.00698V6.6202L12.369 5.92356ZM13.5466 11.3798L13.5531 9.00001L14.7308 8.30337V12.0822L11.5252 13.9623V12.569L13.5466 11.3798Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M12.703 10.8866L11.5254 11.5767V10.1899L12.703 9.49329V10.8866Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M12.7022 7.1134L12.7087 8.50667L10.6808 9.69658V12.0822L9.50312 12.7723L8.32548 12.0822V9.69658L6.2976 8.50667V7.1134L7.48029 6.41677L9.49591 7.61244L11.5238 6.41677L12.7072 7.1134H12.7022ZM6.29688 4.73432L9.49663 2.84778L12.7022 4.73432L11.5245 5.43095L9.49663 4.23528L7.47452 5.43095L6.29688 4.73432Z"
|
||||
fill="white"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_72_1934">
|
||||
<rect
|
||||
width="18"
|
||||
height="18"
|
||||
fill="white"
|
||||
transform="translate(0.5)"
|
||||
/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
CA : 0x1231....abcd{" "}
|
||||
<svg
|
||||
onClick={() => {
|
||||
toast.success("Copied!");
|
||||
|
||||
navigator.clipboard.writeText(
|
||||
"0x1231....abcd"
|
||||
);
|
||||
}}
|
||||
width="17"
|
||||
height="16"
|
||||
viewBox="0 0 17 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="cursor-pointer"
|
||||
>
|
||||
<path
|
||||
d="M5.83398 5.33337V3.46671C5.83398 2.71997 5.83398 2.3466 5.97931 2.06139C6.10714 1.8105 6.31111 1.60653 6.562 1.4787C6.84721 1.33337 7.22058 1.33337 7.96732 1.33337H13.034C13.7807 1.33337 14.1541 1.33337 14.4393 1.4787C14.6902 1.60653 14.8942 1.8105 15.022 2.06139C15.1673 2.3466 15.1673 2.71997 15.1673 3.46671V8.53337C15.1673 9.28011 15.1673 9.65351 15.022 9.93871C14.8942 10.1896 14.6902 10.3936 14.4393 10.5214C14.1541 10.6667 13.7807 10.6667 13.034 10.6667H11.1673M3.96732 14.6667H9.03398C9.78072 14.6667 10.1541 14.6667 10.4393 14.5214C10.6902 14.3936 10.8942 14.1896 11.022 13.9387C11.1673 13.6535 11.1673 13.2801 11.1673 12.5334V7.46671C11.1673 6.71997 11.1673 6.3466 11.022 6.06139C10.8942 5.8105 10.6902 5.60653 10.4393 5.4787C10.1541 5.33337 9.78072 5.33337 9.03398 5.33337H3.96732C3.22058 5.33337 2.84721 5.33337 2.562 5.4787C2.31111 5.60653 2.10714 5.8105 1.97931 6.06139C1.83398 6.3466 1.83398 6.71997 1.83398 7.46671V12.5334C1.83398 13.2801 1.83398 13.6535 1.97931 13.9387C2.10714 14.1896 2.31111 14.3936 2.562 14.5214C2.84721 14.6667 3.22058 14.6667 3.96732 14.6667Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.33333"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.8 }}
|
||||
className="w-full max-w-[780px] space-y-2"
|
||||
>
|
||||
<div className="w-full flex justify-between items-center">
|
||||
<Types />
|
||||
|
||||
<button className="py-1.5 px-2 border border-white/10 bg-[#121A15] rounded-xl flex items-center gap-1.5 text-base font-medium text-white">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M9 10.125V5.625M6.75 7.875H11.25M5.25 13.5V15.2516C5.25 15.6513 5.25 15.8511 5.33192 15.9537C5.40317 16.043 5.5112 16.0949 5.6254 16.0948C5.75672 16.0946 5.91275 15.9698 6.22482 15.7201L8.0139 14.2888C8.37937 13.9965 8.56215 13.8503 8.76562 13.7464C8.94615 13.6541 9.1383 13.5867 9.3369 13.546C9.56077 13.5 9.79477 13.5 10.2628 13.5H12.15C13.4102 13.5 14.0401 13.5 14.5215 13.2548C14.9449 13.0391 15.2891 12.6949 15.5048 12.2715C15.75 11.7901 15.75 11.1601 15.75 9.9V5.85C15.75 4.58988 15.75 3.95982 15.5048 3.47852C15.2891 3.05516 14.9449 2.71095 14.5215 2.49524C14.0401 2.25 13.4102 2.25 12.15 2.25H5.85C4.58988 2.25 3.95982 2.25 3.47852 2.49524C3.05516 2.71095 2.71095 3.05516 2.49524 3.47852C2.25 3.95982 2.25 4.58988 2.25 5.85V10.5C2.25 11.1975 2.25 11.5462 2.32667 11.8324C2.53472 12.6088 3.1412 13.2153 3.91765 13.4234C4.20378 13.5 4.55252 13.5 5.25 13.5Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
New Chat
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="relative flex">
|
||||
<textarea
|
||||
placeholder="Ask me anything..."
|
||||
className="w-full h-[66px] p-5 resize-none outline-none border border-white/10 focus:border-[#09C04C] bg-[#121A15] rounded-2xl text-base text-white placeholder:text-white/75 duration-200"
|
||||
></textarea>
|
||||
|
||||
<div className="absolute top-1/2 right-0 -translate-y-1/2 w-fit px-5 flex justify-end">
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 32 32"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="32" height="32" rx="16" fill="#09C04C" />
|
||||
<path
|
||||
d="M16 24V8M16 8L10 14M16 8L22 14"
|
||||
stroke="black"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div className="absolute -z-10 -top-1/3 -left-[180px] w-[750px] h-[750px] bg-[#6B6700] blur-[150px] rounded-full"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
267
src/app/dashboard/chat/twitter-embed/page.tsx
Normal file
267
src/app/dashboard/chat/twitter-embed/page.tsx
Normal file
@ -0,0 +1,267 @@
|
||||
"use client";
|
||||
import Image from "next/image";
|
||||
import avatarImg1 from "@/assets/images/avatars/1.svg";
|
||||
import Types from "../../Types";
|
||||
import Sidebar from "@/components/Sidebar";
|
||||
import { motion } from "motion/react";
|
||||
import Loader from "@/components/Loader";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Tweet } from "react-tweet";
|
||||
|
||||
export default function DashboardChat() {
|
||||
const [state, setState] = useState<number>(1);
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setState(2);
|
||||
|
||||
setTimeout(() => {
|
||||
setState(3);
|
||||
}, 2000);
|
||||
}, 3000);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="p-2.5 h-[100svh]">
|
||||
<main className="h-full flex">
|
||||
<Sidebar />
|
||||
|
||||
<div
|
||||
className="flex-1 h-[calc(100svh-20px)] pt-10 pb-5 bg-[#121A15] rounded-xl flex flex-col justify-between items-center"
|
||||
style={{
|
||||
backgroundImage: `url("/images/body-bg.png")`,
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
}}
|
||||
>
|
||||
<div className="hide-scrollbar flex-1 w-full max-w-[780px] pb-10 space-y-12 overflow-y-auto">
|
||||
<motion.p
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.2 }}
|
||||
className="text-lg font-medium text-center text-white"
|
||||
>
|
||||
Title of the Chat comes in this section
|
||||
</motion.p>
|
||||
|
||||
<motion.p
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.4 }}
|
||||
className="ml-auto max-w-[500px] p-3 border border-white/10 bg-white/10 rounded-lg text-white"
|
||||
>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat.
|
||||
</motion.p>
|
||||
|
||||
<Loader state={state} />
|
||||
|
||||
{state === 3 && (
|
||||
<motion.div
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.6 }}
|
||||
className="flex items-start gap-5"
|
||||
>
|
||||
<Image src={avatarImg1} alt="" className="w-[40px]" />
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="w-full p-5 pb-0 border border-white/10 bg-white/10 rounded-lg">
|
||||
<div className="pb-2 border-b border-white/10 flex justify-between items-center">
|
||||
<h4 className="text-lg font-semibold text-white">
|
||||
Twitter Embed Appears here
|
||||
</h4>
|
||||
|
||||
<svg
|
||||
width="22"
|
||||
height="22"
|
||||
viewBox="0 0 22 22"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M16.8242 1.7373H19.9026L13.1773 9.42389L21.089 19.8836H14.8942L10.0421 13.5398L4.49031 19.8836H1.4101L8.60347 11.6619L1.01367 1.7373H7.3658L11.7516 7.53574L16.8242 1.7373ZM15.7438 18.041H17.4496L6.43895 3.48307H4.6085L15.7438 18.041Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<Tweet id="1894728764095095247" />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="py-1 pl-1.5 pr-3 border border-white/10 bg-white/10 rounded-full flex items-center gap-2">
|
||||
<svg
|
||||
width="78"
|
||||
height="18"
|
||||
viewBox="0 0 78 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle cx="9" cy="9" r="9" fill="#E57777" />
|
||||
<circle cx="21" cy="9" r="9" fill="#09C04C" />
|
||||
<circle cx="33" cy="9" r="9" fill="#D1CA0D" />
|
||||
<circle cx="45" cy="9" r="9" fill="#09C04C" />
|
||||
<circle cx="57" cy="9" r="9" fill="#D1CA0D" />
|
||||
<circle cx="69" cy="9" r="9" fill="#E57777" />
|
||||
</svg>
|
||||
|
||||
<p className="font-medium text-white">24 web pages</p>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clipPath="url(#clip0_46_276)">
|
||||
<path
|
||||
d="M3.75 11.25C3.05109 11.25 2.70164 11.25 2.42597 11.1359C2.05844 10.9836 1.76642 10.6915 1.61418 10.324C1.5 10.0483 1.5 9.69893 1.5 9V3.9C1.5 3.05992 1.5 2.63988 1.66349 2.31902C1.8073 2.03677 2.03677 1.8073 2.31902 1.66349C2.63988 1.5 3.05992 1.5 3.9 1.5H9C9.69893 1.5 10.0483 1.5 10.324 1.61418C10.6915 1.76642 10.9836 2.05844 11.1359 2.42597C11.25 2.70164 11.25 3.05109 11.25 3.75M9.15 16.5H14.1C14.9401 16.5 15.3602 16.5 15.681 16.3365C15.9632 16.1927 16.1927 15.9632 16.3365 15.681C16.5 15.3602 16.5 14.9401 16.5 14.1V9.15C16.5 8.30992 16.5 7.88985 16.3365 7.569C16.1927 7.28677 15.9632 7.0573 15.681 6.91349C15.3602 6.75 14.9401 6.75 14.1 6.75H9.15C8.30992 6.75 7.88985 6.75 7.569 6.91349C7.28677 7.0573 7.0573 7.28677 6.91349 7.569C6.75 7.88985 6.75 8.30992 6.75 9.15V14.1C6.75 14.9401 6.75 15.3602 6.91349 15.681C7.0573 15.9632 7.28677 16.1927 7.569 16.3365C7.88985 16.5 8.30992 16.5 9.15 16.5Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_46_276">
|
||||
<rect width="18" height="18" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M6.41002 14.8256C8.20933 15.6239 10.3525 15.5805 12.1877 14.5209C15.2368 12.7605 16.2815 8.86164 14.5211 5.8125L14.3336 5.48773M3.47894 12.1876C1.71853 9.13847 2.76324 5.23958 5.81235 3.47917C7.64758 2.4196 9.79071 2.37625 11.59 3.17452M1.87012 12.2503L3.91915 12.7994L4.46819 10.7503M13.532 7.24936L14.0811 5.20033L16.1301 5.74936"
|
||||
stroke="white"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5.25 16.5V8.25M1.5 9.75V15C1.5 15.8284 2.17157 16.5 3 16.5H13.0697C14.1803 16.5 15.1246 15.6898 15.2935 14.5921L16.1012 9.34215C16.3109 7.97917 15.2564 6.75 13.8774 6.75H11.25C10.8358 6.75 10.5 6.41421 10.5 6V3.34938C10.5 2.32799 9.672 1.5 8.65065 1.5C8.40697 1.5 8.18625 1.64348 8.08733 1.86609L5.44795 7.80458C5.32758 8.07548 5.05899 8.25 4.7626 8.25H3C2.17157 8.25 1.5 8.92155 1.5 9.75Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12.7498 1.5V9.75M16.4998 7.35V3.9C16.4998 3.05992 16.4998 2.63988 16.3363 2.31902C16.1925 2.03677 15.9631 1.8073 15.6808 1.66349C15.3599 1.5 14.9399 1.5 14.0998 1.5H6.0883C4.99219 1.5 4.44414 1.5 4.00148 1.70057C3.61134 1.87736 3.27977 2.16181 3.04572 2.52054C2.78017 2.92754 2.69684 3.46923 2.53017 4.55259L2.13786 7.10259C1.91803 8.53148 1.80811 9.24593 2.02015 9.80183C2.20625 10.2898 2.55628 10.6978 3.01024 10.9559C3.52744 11.25 4.2503 11.25 5.696 11.25H6.29979C6.71984 11.25 6.92985 11.25 7.09029 11.3318C7.23141 11.4037 7.34615 11.5183 7.41805 11.6595C7.49983 11.8199 7.49983 12.0299 7.49983 12.45V14.6507C7.49983 15.672 8.32776 16.5 9.34918 16.5C9.59278 16.5 9.81358 16.3565 9.91251 16.1339L12.4331 10.4627C12.5477 10.2047 12.605 10.0757 12.6956 9.98115C12.7757 9.89752 12.8741 9.83363 12.983 9.7944C13.1062 9.75 13.2474 9.75 13.5296 9.75H14.0998C14.9399 9.75 15.3599 9.75 15.6808 9.5865C15.9631 9.44272 16.1925 9.21322 16.3363 8.931C16.4998 8.61015 16.4998 8.19008 16.4998 7.35Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.8 }}
|
||||
className="w-full max-w-[780px] space-y-2"
|
||||
>
|
||||
<div className="w-full flex justify-between items-center">
|
||||
<Types />
|
||||
|
||||
<button className="py-1.5 px-2 border border-white/10 bg-[#121A15] rounded-xl flex items-center gap-1.5 text-base font-medium text-white">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M9 10.125V5.625M6.75 7.875H11.25M5.25 13.5V15.2516C5.25 15.6513 5.25 15.8511 5.33192 15.9537C5.40317 16.043 5.5112 16.0949 5.6254 16.0948C5.75672 16.0946 5.91275 15.9698 6.22482 15.7201L8.0139 14.2888C8.37937 13.9965 8.56215 13.8503 8.76562 13.7464C8.94615 13.6541 9.1383 13.5867 9.3369 13.546C9.56077 13.5 9.79477 13.5 10.2628 13.5H12.15C13.4102 13.5 14.0401 13.5 14.5215 13.2548C14.9449 13.0391 15.2891 12.6949 15.5048 12.2715C15.75 11.7901 15.75 11.1601 15.75 9.9V5.85C15.75 4.58988 15.75 3.95982 15.5048 3.47852C15.2891 3.05516 14.9449 2.71095 14.5215 2.49524C14.0401 2.25 13.4102 2.25 12.15 2.25H5.85C4.58988 2.25 3.95982 2.25 3.47852 2.49524C3.05516 2.71095 2.71095 3.05516 2.49524 3.47852C2.25 3.95982 2.25 4.58988 2.25 5.85V10.5C2.25 11.1975 2.25 11.5462 2.32667 11.8324C2.53472 12.6088 3.1412 13.2153 3.91765 13.4234C4.20378 13.5 4.55252 13.5 5.25 13.5Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
New Chat
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="relative flex">
|
||||
<textarea
|
||||
placeholder="Ask me anything..."
|
||||
className="w-full h-[66px] p-5 resize-none outline-none border border-white/10 focus:border-[#09C04C] bg-[#121A15] rounded-2xl text-base text-white placeholder:text-white/75 duration-200"
|
||||
></textarea>
|
||||
|
||||
<div className="absolute top-1/2 right-0 -translate-y-1/2 w-fit px-5 flex justify-end">
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 32 32"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="32" height="32" rx="16" fill="#09C04C" />
|
||||
<path
|
||||
d="M16 24V8M16 8L10 14M16 8L22 14"
|
||||
stroke="black"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div className="absolute -z-10 -top-1/3 -left-[180px] w-[750px] h-[750px] bg-[#6B6700] blur-[150px] rounded-full"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
208
src/app/dashboard/chat/txn-failed/page.tsx
Normal file
208
src/app/dashboard/chat/txn-failed/page.tsx
Normal file
@ -0,0 +1,208 @@
|
||||
"use client";
|
||||
import Image from "next/image";
|
||||
import avatarImg1 from "@/assets/images/avatars/1.svg";
|
||||
import Types from "../../Types";
|
||||
import Sidebar from "@/components/Sidebar";
|
||||
import { motion } from "motion/react";
|
||||
import Loader from "@/components/Loader";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
export default function DashboardChat() {
|
||||
const [state, setState] = useState<number>(1);
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setState(2);
|
||||
|
||||
setTimeout(() => {
|
||||
setState(3);
|
||||
}, 2000);
|
||||
}, 3000);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="p-2.5 h-[100svh]">
|
||||
<main className="h-full flex">
|
||||
<Sidebar />
|
||||
|
||||
<div
|
||||
className="flex-1 h-[calc(100svh-20px)] pt-10 pb-5 bg-[#121A15] rounded-xl flex flex-col justify-between items-center"
|
||||
style={{
|
||||
backgroundImage: `url("/images/body-bg.png")`,
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
}}
|
||||
>
|
||||
<div className="hide-scrollbar flex-1 w-full max-w-[780px] pb-10 space-y-12 overflow-y-auto">
|
||||
<motion.p
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.2 }}
|
||||
className="text-lg font-medium text-center text-white"
|
||||
>
|
||||
Title of the Chat comes in this section
|
||||
</motion.p>
|
||||
|
||||
<motion.p
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.4 }}
|
||||
className="ml-auto max-w-[500px] p-3 border border-white/10 bg-white/10 rounded-lg text-white"
|
||||
>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat.
|
||||
</motion.p>
|
||||
|
||||
<Loader state={state} />
|
||||
|
||||
{state === 3 && (
|
||||
<motion.div
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.6 }}
|
||||
className="flex items-start gap-5"
|
||||
>
|
||||
<Image src={avatarImg1} alt="" className="w-[40px]" />
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="w-full p-5 border border-white/10 bg-white/10 rounded-lg flex flex-col items-center">
|
||||
<svg
|
||||
width="58"
|
||||
height="63"
|
||||
viewBox="0 0 58 63"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M24.2025 2.67768C27.1843 1.0134 30.8157 1.0134 33.7975 2.67768L52.1725 12.9335C55.2881 14.6724 57.2188 17.9611 57.2188 21.529V41.471C57.2188 45.0389 55.2881 48.3276 52.1725 50.0665L33.7975 60.3223C30.8157 61.9866 27.1843 61.9866 24.2025 60.3223L5.82749 50.0665C2.71194 48.3276 0.78125 45.0389 0.78125 41.471V21.529C0.78125 17.9611 2.71194 14.6724 5.82749 12.9335L24.2025 2.67768Z"
|
||||
fill="#FF002E"
|
||||
/>
|
||||
<path
|
||||
d="M24.2025 2.67768C27.1843 1.0134 30.8157 1.0134 33.7975 2.67768L52.1725 12.9335C55.2881 14.6724 57.2188 17.9611 57.2188 21.529V41.471C57.2188 45.0389 55.2881 48.3276 52.1725 50.0665L33.7975 60.3223C30.8157 61.9866 27.1843 61.9866 24.2025 60.3223L5.82749 50.0665C2.71194 48.3276 0.78125 45.0389 0.78125 41.471V21.529C0.78125 17.9611 2.71194 14.6724 5.82749 12.9335L24.2025 2.67768Z"
|
||||
fill="url(#paint0_linear_72_1722)"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M25.162 4.39679C27.5475 3.06536 30.4525 3.06536 32.838 4.39679L51.213 14.6526C53.7054 16.0437 55.25 18.6747 55.25 21.529V41.471C55.25 44.3253 53.7054 46.9563 51.213 48.3474L32.838 58.6032C30.4525 59.9346 27.5475 59.9346 25.162 58.6032L6.78699 48.3474C4.29455 46.9563 2.75 44.3253 2.75 41.471V21.529C2.75 18.6747 4.29455 16.0437 6.78699 14.6526L25.162 4.39679Z"
|
||||
stroke="url(#paint1_linear_72_1722)"
|
||||
strokeOpacity="0.75"
|
||||
strokeWidth="3.9375"
|
||||
/>
|
||||
<path
|
||||
d="M36.75 24.5L21.75 39.5M21.75 24.5L36.75 39.5"
|
||||
stroke="white"
|
||||
strokeWidth="3"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="paint0_linear_72_1722"
|
||||
x1="29"
|
||||
y1="0"
|
||||
x2="29"
|
||||
y2="63"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="white" stopOpacity="0" />
|
||||
<stop offset="1" stopColor="white" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint1_linear_72_1722"
|
||||
x1="29"
|
||||
y1="0"
|
||||
x2="29"
|
||||
y2="63"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#FF002E" />
|
||||
<stop offset="1" stopColor="#7C0016" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<h4 className="mt-3 mb-2 text-lg font-semibold text-center text-white">
|
||||
Transactions Failed
|
||||
</h4>
|
||||
|
||||
<div className="mb-3 w-full h-px bg-white/10"></div>
|
||||
|
||||
<button className="w-full py-1 px-4 border border-white/10 bg-white/10 hover:bg-white rounded-md flex justify-center items-center text-base font-medium text-white hover:text-[#212121] duration-200">
|
||||
Retry
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.8 }}
|
||||
className="w-full max-w-[780px] space-y-2"
|
||||
>
|
||||
<div className="w-full flex justify-between items-center">
|
||||
<Types />
|
||||
|
||||
<button className="py-1.5 px-2 border border-white/10 bg-[#121A15] rounded-xl flex items-center gap-1.5 text-base font-medium text-white">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M9 10.125V5.625M6.75 7.875H11.25M5.25 13.5V15.2516C5.25 15.6513 5.25 15.8511 5.33192 15.9537C5.40317 16.043 5.5112 16.0949 5.6254 16.0948C5.75672 16.0946 5.91275 15.9698 6.22482 15.7201L8.0139 14.2888C8.37937 13.9965 8.56215 13.8503 8.76562 13.7464C8.94615 13.6541 9.1383 13.5867 9.3369 13.546C9.56077 13.5 9.79477 13.5 10.2628 13.5H12.15C13.4102 13.5 14.0401 13.5 14.5215 13.2548C14.9449 13.0391 15.2891 12.6949 15.5048 12.2715C15.75 11.7901 15.75 11.1601 15.75 9.9V5.85C15.75 4.58988 15.75 3.95982 15.5048 3.47852C15.2891 3.05516 14.9449 2.71095 14.5215 2.49524C14.0401 2.25 13.4102 2.25 12.15 2.25H5.85C4.58988 2.25 3.95982 2.25 3.47852 2.49524C3.05516 2.71095 2.71095 3.05516 2.49524 3.47852C2.25 3.95982 2.25 4.58988 2.25 5.85V10.5C2.25 11.1975 2.25 11.5462 2.32667 11.8324C2.53472 12.6088 3.1412 13.2153 3.91765 13.4234C4.20378 13.5 4.55252 13.5 5.25 13.5Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
New Chat
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="relative flex">
|
||||
<textarea
|
||||
placeholder="Ask me anything..."
|
||||
className="w-full h-[66px] p-5 resize-none outline-none border border-white/10 focus:border-[#09C04C] bg-[#121A15] rounded-2xl text-base text-white placeholder:text-white/75 duration-200"
|
||||
></textarea>
|
||||
|
||||
<div className="absolute top-1/2 right-0 -translate-y-1/2 w-fit px-5 flex justify-end">
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 32 32"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="32" height="32" rx="16" fill="#09C04C" />
|
||||
<path
|
||||
d="M16 24V8M16 8L10 14M16 8L22 14"
|
||||
stroke="black"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div className="absolute -z-10 -top-1/3 -left-[180px] w-[750px] h-[750px] bg-[#6B6700] blur-[150px] rounded-full"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
232
src/app/dashboard/chat/txn-success/page.tsx
Normal file
232
src/app/dashboard/chat/txn-success/page.tsx
Normal file
@ -0,0 +1,232 @@
|
||||
"use client";
|
||||
import Image from "next/image";
|
||||
import avatarImg1 from "@/assets/images/avatars/1.svg";
|
||||
import Types from "../../Types";
|
||||
import Sidebar from "@/components/Sidebar";
|
||||
import { motion } from "motion/react";
|
||||
import Loader from "@/components/Loader";
|
||||
import { useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function DashboardChat() {
|
||||
const [state, setState] = useState<number>(1);
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setState(2);
|
||||
|
||||
setTimeout(() => {
|
||||
setState(3);
|
||||
}, 2000);
|
||||
}, 3000);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="p-2.5 h-[100svh]">
|
||||
<main className="h-full flex">
|
||||
<Sidebar />
|
||||
|
||||
<div
|
||||
className="flex-1 h-[calc(100svh-20px)] pt-10 pb-5 bg-[#121A15] rounded-xl flex flex-col justify-between items-center"
|
||||
style={{
|
||||
backgroundImage: `url("/images/body-bg.png")`,
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
}}
|
||||
>
|
||||
<div className="hide-scrollbar flex-1 w-full max-w-[780px] pb-10 space-y-12 overflow-y-auto">
|
||||
<motion.p
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.2 }}
|
||||
className="text-lg font-medium text-center text-white"
|
||||
>
|
||||
Title of the Chat comes in this section
|
||||
</motion.p>
|
||||
|
||||
<motion.p
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.4 }}
|
||||
className="ml-auto max-w-[500px] p-3 border border-white/10 bg-white/10 rounded-lg text-white"
|
||||
>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat.
|
||||
</motion.p>
|
||||
|
||||
<Loader state={state} />
|
||||
|
||||
{state === 3 && (
|
||||
<motion.div
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.6 }}
|
||||
className="flex items-start gap-5"
|
||||
>
|
||||
<Image src={avatarImg1} alt="" className="w-[40px]" />
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="w-full p-5 border border-white/10 bg-white/10 rounded-lg flex flex-col items-center">
|
||||
<svg
|
||||
width="57"
|
||||
height="63"
|
||||
viewBox="0 0 57 63"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M23.9525 2.67768C26.9343 1.0134 30.5657 1.0134 33.5475 2.67768L51.9225 12.9335C55.0381 14.6724 56.9688 17.9611 56.9688 21.529V41.471C56.9688 45.0389 55.0381 48.3276 51.9225 50.0665L33.5475 60.3223C30.5657 61.9866 26.9343 61.9866 23.9525 60.3223L5.57749 50.0665C2.46194 48.3276 0.53125 45.0389 0.53125 41.471V21.529C0.53125 17.9611 2.46194 14.6724 5.57749 12.9335L23.9525 2.67768Z"
|
||||
fill="#00C153"
|
||||
/>
|
||||
<path
|
||||
d="M23.9525 2.67768C26.9343 1.0134 30.5657 1.0134 33.5475 2.67768L51.9225 12.9335C55.0381 14.6724 56.9688 17.9611 56.9688 21.529V41.471C56.9688 45.0389 55.0381 48.3276 51.9225 50.0665L33.5475 60.3223C30.5657 61.9866 26.9343 61.9866 23.9525 60.3223L5.57749 50.0665C2.46194 48.3276 0.53125 45.0389 0.53125 41.471V21.529C0.53125 17.9611 2.46194 14.6724 5.57749 12.9335L23.9525 2.67768Z"
|
||||
fill="url(#paint0_linear_72_1573)"
|
||||
fillOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M24.912 4.39679C27.2975 3.06536 30.2025 3.06536 32.588 4.39679L50.963 14.6526C53.4554 16.0437 55 18.6747 55 21.529V41.471C55 44.3253 53.4554 46.9563 50.963 48.3474L32.588 58.6032C30.2025 59.9346 27.2975 59.9346 24.912 58.6032L6.53699 48.3474C4.04455 46.9563 2.5 44.3253 2.5 41.471V21.529C2.5 18.6747 4.04455 16.0437 6.53699 14.6526L24.912 4.39679Z"
|
||||
stroke="url(#paint1_linear_72_1573)"
|
||||
strokeOpacity="0.75"
|
||||
strokeWidth="3.9375"
|
||||
/>
|
||||
<path
|
||||
d="M38.375 24.2812L25.1406 37.5156L19.125 31.5"
|
||||
stroke="white"
|
||||
strokeWidth="2.95312"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="paint0_linear_72_1573"
|
||||
x1="28.75"
|
||||
y1="0"
|
||||
x2="28.75"
|
||||
y2="63"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="white" stopOpacity="0" />
|
||||
<stop offset="1" stopColor="white" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint1_linear_72_1573"
|
||||
x1="28.75"
|
||||
y1="0"
|
||||
x2="28.75"
|
||||
y2="63"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#00C153" />
|
||||
<stop offset="1" stopColor="#0BB84A" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<h4 className="mt-3 mb-2 text-lg font-semibold text-center text-white">
|
||||
Transactions Successful
|
||||
</h4>
|
||||
|
||||
<div className="mb-3 w-full h-px bg-white/10"></div>
|
||||
|
||||
<div className="w-full py-2 px-4 border border-white/10 bg-white/10 rounded-md flex justify-between items-center gap-12">
|
||||
<p className="text-base font-medium text-white">
|
||||
View Txn
|
||||
</p>
|
||||
|
||||
<p className="flex items-center gap-2 text-base font-medium text-white">
|
||||
https://bscscan.com/{" "}
|
||||
<Link href={"https://bscscan.com/"} target="_blank">
|
||||
<svg
|
||||
width="19"
|
||||
height="18"
|
||||
viewBox="0 0 19 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M16.25 6.75001V2.25001M16.25 2.25001H11.75M16.25 2.25001L9.5 9M8 2.25H6.35C5.08988 2.25 4.45982 2.25 3.97852 2.49524C3.55516 2.71095 3.21095 3.05516 2.99524 3.47852C2.75 3.95982 2.75 4.58988 2.75 5.85V12.15C2.75 13.4102 2.75 14.0401 2.99524 14.5215C3.21095 14.9449 3.55516 15.2891 3.97852 15.5048C4.45982 15.75 5.08988 15.75 6.35 15.75H12.65C13.9102 15.75 14.5401 15.75 15.0215 15.5048C15.4449 15.2891 15.7891 14.9449 16.0048 14.5215C16.25 14.0401 16.25 13.4102 16.25 12.15V10.5"
|
||||
stroke="white"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.8 }}
|
||||
className="w-full max-w-[780px] space-y-2"
|
||||
>
|
||||
<div className="w-full flex justify-between items-center">
|
||||
<Types />
|
||||
|
||||
<button className="py-1.5 px-2 border border-white/10 bg-[#121A15] rounded-xl flex items-center gap-1.5 text-base font-medium text-white">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M9 10.125V5.625M6.75 7.875H11.25M5.25 13.5V15.2516C5.25 15.6513 5.25 15.8511 5.33192 15.9537C5.40317 16.043 5.5112 16.0949 5.6254 16.0948C5.75672 16.0946 5.91275 15.9698 6.22482 15.7201L8.0139 14.2888C8.37937 13.9965 8.56215 13.8503 8.76562 13.7464C8.94615 13.6541 9.1383 13.5867 9.3369 13.546C9.56077 13.5 9.79477 13.5 10.2628 13.5H12.15C13.4102 13.5 14.0401 13.5 14.5215 13.2548C14.9449 13.0391 15.2891 12.6949 15.5048 12.2715C15.75 11.7901 15.75 11.1601 15.75 9.9V5.85C15.75 4.58988 15.75 3.95982 15.5048 3.47852C15.2891 3.05516 14.9449 2.71095 14.5215 2.49524C14.0401 2.25 13.4102 2.25 12.15 2.25H5.85C4.58988 2.25 3.95982 2.25 3.47852 2.49524C3.05516 2.71095 2.71095 3.05516 2.49524 3.47852C2.25 3.95982 2.25 4.58988 2.25 5.85V10.5C2.25 11.1975 2.25 11.5462 2.32667 11.8324C2.53472 12.6088 3.1412 13.2153 3.91765 13.4234C4.20378 13.5 4.55252 13.5 5.25 13.5Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
New Chat
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="relative flex">
|
||||
<textarea
|
||||
placeholder="Ask me anything..."
|
||||
className="w-full h-[66px] p-5 resize-none outline-none border border-white/10 focus:border-[#09C04C] bg-[#121A15] rounded-2xl text-base text-white placeholder:text-white/75 duration-200"
|
||||
></textarea>
|
||||
|
||||
<div className="absolute top-1/2 right-0 -translate-y-1/2 w-fit px-5 flex justify-end">
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 32 32"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="32" height="32" rx="16" fill="#09C04C" />
|
||||
<path
|
||||
d="M16 24V8M16 8L10 14M16 8L22 14"
|
||||
stroke="black"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div className="absolute -z-10 -top-1/3 -left-[180px] w-[750px] h-[750px] bg-[#6B6700] blur-[150px] rounded-full"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -8,6 +8,7 @@ import {
|
||||
import "./globals.css";
|
||||
import { ScrollProgress } from "@/components/magicui/scroll-progress";
|
||||
import { Spotlight } from "@/components/ui/spotlight-new";
|
||||
import { ToastContainer } from "react-toastify";
|
||||
|
||||
const dmSans = DM_Sans({
|
||||
variable: "--font-dm-sans",
|
||||
@ -54,9 +55,9 @@ export default function RootLayout({
|
||||
className={`${dmSans.variable} ${geist.className} ${geist.variable} ${geistMono.variable} ${plusJakartaSans.variable} antialiased min-h-[100svh] bg-[#063A19] overflow-x-hidden`}
|
||||
>
|
||||
<div className="relative z-10">{children}</div>
|
||||
|
||||
<ScrollProgress />
|
||||
<Spotlight />
|
||||
<ToastContainer position="bottom-right" theme="colored" />
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
||||
BIN
src/assets/images/four-logo.png
Normal file
BIN
src/assets/images/four-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
BIN
src/assets/images/surf-2.png
Normal file
BIN
src/assets/images/surf-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
src/assets/images/surf.png
Normal file
BIN
src/assets/images/surf.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
src/assets/images/trending-token.png
Normal file
BIN
src/assets/images/trending-token.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
BIN
src/assets/images/twitter-embed.png
Normal file
BIN
src/assets/images/twitter-embed.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 237 KiB |
45
src/components/Loader.tsx
Normal file
45
src/components/Loader.tsx
Normal file
@ -0,0 +1,45 @@
|
||||
"use client";
|
||||
import { motion } from "framer-motion";
|
||||
import { TextShimmerWave } from "@/components/magicui/text-shimmer-wave";
|
||||
|
||||
export default function Loader({ state }: { state: number }) {
|
||||
return (
|
||||
<>
|
||||
{state === 1 && (
|
||||
<motion.div
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.6 }}
|
||||
className="flex justify-start"
|
||||
>
|
||||
<TextShimmerWave
|
||||
className="text-center"
|
||||
duration={1}
|
||||
spread={1}
|
||||
zDistance={1}
|
||||
scaleDistance={1.1}
|
||||
rotateYDistance={20}
|
||||
>
|
||||
Searching Internet and Databases...
|
||||
</TextShimmerWave>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{state === 2 && (
|
||||
<div className="flex justify-start">
|
||||
<TextShimmerWave
|
||||
className="text-center"
|
||||
duration={1}
|
||||
spread={1}
|
||||
zDistance={1}
|
||||
scaleDistance={1.1}
|
||||
rotateYDistance={20}
|
||||
>
|
||||
Compiling the Best Results...
|
||||
</TextShimmerWave>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
89
src/components/magicui/text-shimmer-wave.tsx
Normal file
89
src/components/magicui/text-shimmer-wave.tsx
Normal file
@ -0,0 +1,89 @@
|
||||
"use client";
|
||||
import { type JSX } from "react";
|
||||
import { motion, Transition } from "framer-motion";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type TextShimmerWave = {
|
||||
children: string;
|
||||
as?: React.ElementType;
|
||||
className?: string;
|
||||
duration?: number;
|
||||
zDistance?: number;
|
||||
xDistance?: number;
|
||||
yDistance?: number;
|
||||
spread?: number;
|
||||
scaleDistance?: number;
|
||||
rotateYDistance?: number;
|
||||
transition?: Transition;
|
||||
};
|
||||
|
||||
export function TextShimmerWave({
|
||||
children,
|
||||
as: Component = "p",
|
||||
className,
|
||||
duration = 1,
|
||||
zDistance = 10,
|
||||
xDistance = 2,
|
||||
yDistance = -2,
|
||||
spread = 1,
|
||||
scaleDistance = 1.1,
|
||||
rotateYDistance = 10,
|
||||
transition,
|
||||
}: TextShimmerWave) {
|
||||
const MotionComponent = motion.create(
|
||||
Component as keyof JSX.IntrinsicElements
|
||||
);
|
||||
|
||||
return (
|
||||
<MotionComponent
|
||||
className={cn(
|
||||
"relative inline-block [perspective:500px]",
|
||||
"[--base-color:#a1a1aa] [--base-gradient-color:#000]",
|
||||
"dark:[--base-color:#71717a] dark:[--base-gradient-color:#ffffff]",
|
||||
className
|
||||
)}
|
||||
style={{ color: "var(--base-color)" }}
|
||||
>
|
||||
{children.split("").map((char, i) => {
|
||||
const delay = (i * duration * (1 / spread)) / children.length;
|
||||
|
||||
return (
|
||||
<motion.span
|
||||
key={i}
|
||||
className={cn(
|
||||
"inline-block whitespace-pre [transform-style:preserve-3d]"
|
||||
)}
|
||||
initial={{
|
||||
translateZ: 0,
|
||||
scale: 1,
|
||||
rotateY: 0,
|
||||
color: "var(--base-color)",
|
||||
}}
|
||||
animate={{
|
||||
translateZ: [0, zDistance, 0],
|
||||
translateX: [0, xDistance, 0],
|
||||
translateY: [0, yDistance, 0],
|
||||
scale: [1, scaleDistance, 1],
|
||||
rotateY: [0, rotateYDistance, 0],
|
||||
color: [
|
||||
"var(--base-color)",
|
||||
"var(--base-gradient-color)",
|
||||
"var(--base-color)",
|
||||
],
|
||||
}}
|
||||
transition={{
|
||||
duration: duration,
|
||||
repeat: Infinity,
|
||||
repeatDelay: (children.length * 0.05) / spread,
|
||||
delay,
|
||||
ease: "easeInOut",
|
||||
...transition,
|
||||
}}
|
||||
>
|
||||
{char}
|
||||
</motion.span>
|
||||
);
|
||||
})}
|
||||
</MotionComponent>
|
||||
);
|
||||
}
|
||||
@ -43,7 +43,7 @@ export const GlareCard = ({
|
||||
|
||||
// const backgroundStyle = {
|
||||
// "--step": "5%",
|
||||
// "--foil-svg": `url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.99994 3.419C2.99994 3.419 21.6142 7.43646 22.7921 12.153C23.97 16.8695 3.41838 23.0306 3.41838 23.0306' stroke='white' strokeWidth='5' stroke-miterlimit='3.86874' stroke-linecap='round' style='mix-blend-mode:darken'/%3E%3C/svg%3E")`,
|
||||
// "--foil-svg": `url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.99994 3.419C2.99994 3.419 21.6142 7.43646 22.7921 12.153C23.97 16.8695 3.41838 23.0306 3.41838 23.0306' stroke='white' strokeWidth='5' stroke-miterlimit='3.86874' strokeLinecap='round' style='mix-blend-mode:darken'/%3E%3C/svg%3E")`,
|
||||
// "--pattern": "var(--foil-svg) center/100% no-repeat",
|
||||
// "--rainbow":
|
||||
// "repeating-linear-gradient( 0deg,rgb(255,119,115) calc(var(--step) * 1),rgba(255,237,95,1) calc(var(--step) * 2),rgba(168,255,95,1) calc(var(--step) * 3),rgba(131,255,247,1) calc(var(--step) * 4),rgba(120,148,255,1) calc(var(--step) * 5),rgb(216,117,255) calc(var(--step) * 6),rgb(255,119,115) calc(var(--step) * 7) ) 0% var(--bg-y)/200% 700% no-repeat",
|
||||
|
||||
4
src/types.d.ts
vendored
Normal file
4
src/types.d.ts
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
declare module "*.svg" {
|
||||
const content: string;
|
||||
export default content;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user