update pay function
This commit is contained in:
@@ -0,0 +1,39 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import LayoutLogin from "@/components/LayoutLogin";
|
||||
import Button from "@/components/Button";
|
||||
|
||||
const CheckEmailPage = () => {
|
||||
return (
|
||||
<LayoutLogin
|
||||
title="Check your email"
|
||||
description={
|
||||
<>
|
||||
We sent a verification link to<br></br>Martin@gmail.com
|
||||
</>
|
||||
}
|
||||
>
|
||||
<>
|
||||
<Button
|
||||
className="w-full !h-12 !rounded-xl"
|
||||
isBlue
|
||||
as="link"
|
||||
href="/auth/enter-code"
|
||||
>
|
||||
Enter the code Manually
|
||||
</Button>
|
||||
<div className="mt-5 text-center">
|
||||
<Link
|
||||
className="text-label-sm text-blue-500 transition-colors hover:text-blue-700"
|
||||
href="/auth/sign-in"
|
||||
>
|
||||
Back to login page
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
</LayoutLogin>
|
||||
);
|
||||
};
|
||||
|
||||
export default CheckEmailPage;
|
||||
@@ -0,0 +1,76 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import LayoutLogin from "@/components/LayoutLogin";
|
||||
import Button from "@/components/Button";
|
||||
import Field from "@/components/Field";
|
||||
|
||||
const EnterCodePage = () => {
|
||||
const [number1, setNumber1] = useState("");
|
||||
const [number2, setNumber2] = useState("");
|
||||
const [number3, setNumber3] = useState("");
|
||||
const [number4, setNumber4] = useState("");
|
||||
|
||||
return (
|
||||
<LayoutLogin
|
||||
title="Enter the code"
|
||||
description={
|
||||
<>
|
||||
We sent a verification link to<br></br>Martin@gmail.com
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div className="">
|
||||
<div className="flex gap-3 mb-5">
|
||||
<Field
|
||||
className="flex-1"
|
||||
classInput="h-20 !px-2 text-center !text-h3"
|
||||
value={number1}
|
||||
onChange={(e) => setNumber1(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<Field
|
||||
className="flex-1"
|
||||
classInput="h-20 !px-2 text-center !text-h3"
|
||||
value={number2}
|
||||
onChange={(e) => setNumber2(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<Field
|
||||
className="flex-1"
|
||||
classInput="h-20 !px-2 text-center !text-h3"
|
||||
value={number3}
|
||||
onChange={(e) => setNumber3(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<Field
|
||||
className="flex-1"
|
||||
classInput="h-20 !px-2 text-center !text-h3"
|
||||
value={number4}
|
||||
onChange={(e) => setNumber4(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
className="w-full !h-12 !rounded-xl"
|
||||
isBlue
|
||||
as="link"
|
||||
href="/auth/reset-password"
|
||||
>
|
||||
Continue
|
||||
</Button>
|
||||
<div className="mt-5 text-center">
|
||||
<Link
|
||||
className="text-label-sm text-blue-500 transition-colors hover:text-blue-700"
|
||||
href="/auth/sign-in"
|
||||
>
|
||||
Back to login page
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</LayoutLogin>
|
||||
);
|
||||
};
|
||||
|
||||
export default EnterCodePage;
|
||||
@@ -0,0 +1,67 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import LayoutLogin from "@/components/LayoutLogin";
|
||||
import Button from "@/components/Button";
|
||||
import Image from "@/components/Image";
|
||||
import Field from "@/components/Field";
|
||||
|
||||
const ForgotPasswordPage = () => {
|
||||
const [email, setEmail] = useState("");
|
||||
|
||||
return (
|
||||
<LayoutLogin
|
||||
title="Forget password ?"
|
||||
description={
|
||||
<>Lost Your Key? Reset Your Password and Regain Control!</>
|
||||
}
|
||||
>
|
||||
<div className="">
|
||||
<Button
|
||||
className="gap-4.5 w-full !h-12 !rounded-xl !text-label-md text-sub-600"
|
||||
isStroke
|
||||
>
|
||||
<Image
|
||||
className="w-5 opacity-100"
|
||||
src="/images/google.svg"
|
||||
width={20}
|
||||
height={20}
|
||||
alt="Google"
|
||||
/>
|
||||
Continue with Google
|
||||
</Button>
|
||||
<div className="flex items-center gap-3.5 my-6 text-center text-label-md text-soft-400 before:grow before:h-0.25 before:bg-stroke-soft-200 after:grow after:h-0.25 after:bg-stroke-soft-200 max-md:my-3">
|
||||
Or
|
||||
</div>
|
||||
<div className="flex flex-col gap-4.5">
|
||||
<Field
|
||||
placeholder="Enter email"
|
||||
value={email}
|
||||
type="email"
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<Button
|
||||
className="w-full !h-12 !rounded-xl"
|
||||
isBlue
|
||||
as="link"
|
||||
href="/auth/check-email"
|
||||
>
|
||||
Reset Password
|
||||
</Button>
|
||||
</div>
|
||||
<div className="mt-5 text-center">
|
||||
<Link
|
||||
className="text-label-sm text-blue-500 transition-colors hover:text-blue-700"
|
||||
href="/auth/sign-in"
|
||||
>
|
||||
Back to login page
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</LayoutLogin>
|
||||
);
|
||||
};
|
||||
|
||||
export default ForgotPasswordPage;
|
||||
@@ -0,0 +1,58 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import LayoutLogin from "@/components/LayoutLogin";
|
||||
import Button from "@/components/Button";
|
||||
import Field from "@/components/Field";
|
||||
|
||||
const ResetPasswordPage = () => {
|
||||
const [newPassword, setNewPassword] = useState("");
|
||||
const [confirmPassword, setConfirmPassword] = useState("");
|
||||
|
||||
return (
|
||||
<LayoutLogin
|
||||
title="Reset Password"
|
||||
description={
|
||||
<>Lost Your Key? Reset Your Password and Regain Control!</>
|
||||
}
|
||||
>
|
||||
<div className="">
|
||||
<div className="flex flex-col gap-4.5">
|
||||
<Field
|
||||
placeholder="Enter password"
|
||||
type="password"
|
||||
value={newPassword}
|
||||
onChange={(e) => setNewPassword(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<Field
|
||||
placeholder="Enter password"
|
||||
type="password"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<Button
|
||||
className="w-full !h-12 !rounded-xl"
|
||||
isBlue
|
||||
as="link"
|
||||
href="/auth/sign-in"
|
||||
>
|
||||
Reset Password
|
||||
</Button>
|
||||
</div>
|
||||
<div className="mt-5 text-center">
|
||||
<Link
|
||||
className="text-label-sm text-blue-500 transition-colors hover:text-blue-700"
|
||||
href="/auth/forgot-password"
|
||||
>
|
||||
Forgotten Password?
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</LayoutLogin>
|
||||
);
|
||||
};
|
||||
|
||||
export default ResetPasswordPage;
|
||||
@@ -0,0 +1,81 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import LayoutLogin from "@/components/LayoutLogin";
|
||||
import Button from "@/components/Button";
|
||||
import Image from "@/components/Image";
|
||||
import Field from "@/components/Field";
|
||||
|
||||
const SignInPage = () => {
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
|
||||
return (
|
||||
<LayoutLogin
|
||||
title="Welcome back"
|
||||
description={
|
||||
<>
|
||||
Don’t have an account?{" "}
|
||||
<Link className="text-blue-500" href="/auth/sign-up">
|
||||
Sign up
|
||||
</Link>{" "}
|
||||
here
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div className="">
|
||||
<Button
|
||||
className="gap-4.5 w-full !h-12 !rounded-xl !text-label-md text-sub-600"
|
||||
isStroke
|
||||
>
|
||||
<Image
|
||||
className="w-5 opacity-100"
|
||||
src="/images/google.svg"
|
||||
width={20}
|
||||
height={20}
|
||||
alt="Google"
|
||||
/>
|
||||
Continue with Google
|
||||
</Button>
|
||||
<div className="flex items-center gap-3.5 my-6 text-center text-label-md text-soft-400 before:grow before:h-0.25 before:bg-stroke-soft-200 after:grow after:h-0.25 after:bg-stroke-soft-200 max-md:my-3">
|
||||
Or
|
||||
</div>
|
||||
<div className="flex flex-col gap-4.5">
|
||||
<Field
|
||||
placeholder="Enter email"
|
||||
value={email}
|
||||
type="email"
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<Field
|
||||
placeholder="Enter password"
|
||||
value={password}
|
||||
type="password"
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<Button
|
||||
className="w-full !h-12 !rounded-xl"
|
||||
isBlue
|
||||
as="link"
|
||||
href="/"
|
||||
>
|
||||
Login
|
||||
</Button>
|
||||
</div>
|
||||
<div className="mt-5 text-center">
|
||||
<Link
|
||||
className="text-label-sm text-blue-500 transition-colors hover:text-blue-700"
|
||||
href="/auth/forgot-password"
|
||||
>
|
||||
Forgotten Password?
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</LayoutLogin>
|
||||
);
|
||||
};
|
||||
|
||||
export default SignInPage;
|
||||
@@ -0,0 +1,88 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import LayoutLogin from "@/components/LayoutLogin";
|
||||
import Button from "@/components/Button";
|
||||
import Image from "@/components/Image";
|
||||
import Field from "@/components/Field";
|
||||
|
||||
const SignUpPage = () => {
|
||||
const [fullName, setFullName] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
|
||||
return (
|
||||
<LayoutLogin
|
||||
title="Hello There"
|
||||
description={
|
||||
<>
|
||||
Already have an account?{" "}
|
||||
<Link className="text-blue-500" href="/auth/sign-in">
|
||||
Sign in
|
||||
</Link>{" "}
|
||||
here
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div className="">
|
||||
<Button
|
||||
className="gap-4.5 w-full !h-12 !rounded-xl !text-label-md text-sub-600"
|
||||
isStroke
|
||||
>
|
||||
<Image
|
||||
className="w-5 opacity-100"
|
||||
src="/images/google.svg"
|
||||
width={20}
|
||||
height={20}
|
||||
alt="Google"
|
||||
/>
|
||||
Continue with Google
|
||||
</Button>
|
||||
<div className="flex items-center gap-3.5 my-6 text-center text-label-md text-soft-400 before:grow before:h-0.25 before:bg-stroke-soft-200 after:grow after:h-0.25 after:bg-stroke-soft-200 max-md:my-3">
|
||||
Or
|
||||
</div>
|
||||
<div className="flex flex-col gap-4.5">
|
||||
<Field
|
||||
placeholder="Enter full name"
|
||||
value={fullName}
|
||||
onChange={(e) => setFullName(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<Field
|
||||
placeholder="Enter email"
|
||||
value={email}
|
||||
type="email"
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<Field
|
||||
placeholder="Enter password"
|
||||
value={password}
|
||||
type="password"
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<Button
|
||||
className="w-full !h-12 !rounded-xl"
|
||||
isBlue
|
||||
as="link"
|
||||
href="/"
|
||||
>
|
||||
Create account
|
||||
</Button>
|
||||
</div>
|
||||
<div className="mt-5 text-center">
|
||||
<Link
|
||||
className="text-label-sm text-blue-500 transition-colors hover:text-blue-700"
|
||||
href="/auth/forgot-password"
|
||||
>
|
||||
Forgotten Password?
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</LayoutLogin>
|
||||
);
|
||||
};
|
||||
|
||||
export default SignUpPage;
|
||||
@@ -0,0 +1,43 @@
|
||||
"use client";
|
||||
|
||||
import Layout from "@/components/Layout";
|
||||
import Chat from "@/components/Chat";
|
||||
import Question from "@/components/Question";
|
||||
import Answer from "@/components/Answer";
|
||||
import Chart from "@/components/Chart";
|
||||
import Button from "@/components/Button";
|
||||
|
||||
const DataAnalyticsPage = () => {
|
||||
return (
|
||||
<Layout>
|
||||
<Chat>
|
||||
<Question>
|
||||
What’s the trend of Bitcoin between oct 16 and oct 22
|
||||
</Question>
|
||||
<Answer>
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="">
|
||||
Sure here is the chart of the bitcoin
|
||||
</div>
|
||||
<Chart />
|
||||
<div className="text-right">
|
||||
<Button
|
||||
className="rounded-lg !bg-weak-50 max-md:w-full"
|
||||
icon="team"
|
||||
isStroke
|
||||
>
|
||||
Send to data team
|
||||
</Button>
|
||||
</div>
|
||||
<div className="">
|
||||
You can change the date by choosing the filter and
|
||||
see more charts.
|
||||
</div>
|
||||
</div>
|
||||
</Answer>
|
||||
</Chat>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default DataAnalyticsPage;
|
||||
@@ -0,0 +1,41 @@
|
||||
export const content = (
|
||||
<>
|
||||
<h3>non-disclosure agreement</h3>
|
||||
<p>Please read these instructions carefully.</p>
|
||||
<p>
|
||||
This is a Figma template provided as a guide for the Assessment Task
|
||||
documentation submission. This is an individual submission; each
|
||||
group member must produce and submit their own version. Group
|
||||
members can share co-produced assets from the project.
|
||||
</p>
|
||||
<p>
|
||||
We suggest that groups work collaboratively on their Figma Group
|
||||
Project Template, with each member working on their own individual
|
||||
version using this template.
|
||||
</p>
|
||||
<p>
|
||||
This template was created based on our Unit’s visual style. You are
|
||||
expected to design your own layouts and visual style to suit your
|
||||
proposal. Templates that were shared in class should also be
|
||||
re-styled (where possible) to suit your overall design proposal and
|
||||
style.
|
||||
</p>
|
||||
<p>
|
||||
Use the A4 Frames as a scaling guide, and understand what font sizes
|
||||
you should be working at.
|
||||
</p>
|
||||
<p>
|
||||
Pro tip: When scaling down your wireframes, use the Scale tool (‘K’
|
||||
shortcut) to reduce your grouped elements uniformly.
|
||||
</p>
|
||||
<p>
|
||||
Alternatively, right click on a wireframe/element and Copy/Paste As{" "}
|
||||
{">"} Copy as PNG – you can then paste and scale the image to your
|
||||
liking.
|
||||
</p>
|
||||
<p>
|
||||
Note: check and adjust font sizes and other properties when scaling
|
||||
components in Figma.
|
||||
</p>
|
||||
</>
|
||||
);
|
||||
@@ -0,0 +1,53 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Layout from "@/components/Layout";
|
||||
import Chat from "@/components/Chat";
|
||||
import Question from "@/components/Question";
|
||||
import Answer from "@/components/Answer";
|
||||
import Article from "@/components/Article";
|
||||
import EditorArticle from "@/components/EditorArticle";
|
||||
|
||||
import { content } from "./content";
|
||||
|
||||
const DocumentGenerationPage = () => {
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
{isEditing ? (
|
||||
<EditorArticle
|
||||
content={content}
|
||||
onBack={() => setIsEditing(false)}
|
||||
/>
|
||||
) : (
|
||||
<Chat>
|
||||
<Question>
|
||||
generate Document for “non-disclosure agreement”.
|
||||
</Question>
|
||||
<Answer>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="">
|
||||
Here’s a simple example of HTML code for a
|
||||
contact form:
|
||||
</div>
|
||||
<Article
|
||||
content={content}
|
||||
onEdit={() => setIsEditing(true)}
|
||||
/>
|
||||
<div>
|
||||
This code creates a simple, styled contact form
|
||||
that includes fields for a name, email, and
|
||||
message, along with a "Send Message"
|
||||
button. You can further customize the form or
|
||||
integrate it into your website as needed.
|
||||
</div>
|
||||
</div>
|
||||
</Answer>
|
||||
</Chat>
|
||||
)}
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default DocumentGenerationPage;
|
||||
@@ -0,0 +1,105 @@
|
||||
export const content = [
|
||||
{
|
||||
id: 0,
|
||||
title: "Previous 7 days",
|
||||
counter: "03",
|
||||
items: [
|
||||
{
|
||||
id: 0,
|
||||
title: "2025 Product Rollout Plan",
|
||||
image: "/images/document-pic-1.jpg",
|
||||
avatars: [
|
||||
"/images/avatar-3.jpg",
|
||||
"/images/avatar-4.jpg",
|
||||
"/images/avatar-5.jpg",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "2025 Product Rollout Plan",
|
||||
image: "/images/document-pic-2.jpg",
|
||||
avatars: ["/images/avatar-3.jpg", "/images/avatar-4.jpg"],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "2025 Product Rollout Plan",
|
||||
image: "/images/document-pic-3.jpg",
|
||||
avatars: ["/images/avatar-3.jpg", "/images/avatar-5.jpg"],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "Previous 14 days",
|
||||
counter: "06",
|
||||
items: [
|
||||
{
|
||||
id: 0,
|
||||
title: "2025 Product Rollout Plan",
|
||||
image: "/images/document-pic-1.jpg",
|
||||
avatars: [
|
||||
"/images/avatar-3.jpg",
|
||||
"/images/avatar-4.jpg",
|
||||
"/images/avatar-5.jpg",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "2025 Product Rollout Plan",
|
||||
image: "/images/document-pic-2.jpg",
|
||||
avatars: ["/images/avatar-3.jpg", "/images/avatar-4.jpg"],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "2025 Product Rollout Plan",
|
||||
image: "/images/document-pic-3.jpg",
|
||||
avatars: ["/images/avatar-3.jpg", "/images/avatar-5.jpg"],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "2025 Product Rollout Plan",
|
||||
image: "/images/document-pic-1.jpg",
|
||||
avatars: [
|
||||
"/images/avatar-3.jpg",
|
||||
"/images/avatar-4.jpg",
|
||||
"/images/avatar-5.jpg",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "2025 Product Rollout Plan",
|
||||
image: "/images/document-pic-2.jpg",
|
||||
avatars: ["/images/avatar-3.jpg", "/images/avatar-4.jpg"],
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "2025 Product Rollout Plan",
|
||||
image: "/images/document-pic-3.jpg",
|
||||
avatars: ["/images/avatar-3.jpg", "/images/avatar-5.jpg"],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Previous 30 days",
|
||||
counter: "02",
|
||||
items: [
|
||||
{
|
||||
id: 0,
|
||||
title: "2025 Product Rollout Plan",
|
||||
image: "/images/document-pic-1.jpg",
|
||||
avatars: [
|
||||
"/images/avatar-3.jpg",
|
||||
"/images/avatar-4.jpg",
|
||||
"/images/avatar-5.jpg",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "2025 Product Rollout Plan",
|
||||
image: "/images/document-pic-2.jpg",
|
||||
avatars: ["/images/avatar-3.jpg", "/images/avatar-4.jpg"],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,85 @@
|
||||
"use client";
|
||||
|
||||
import Layout from "@/components/Layout";
|
||||
import Chat from "@/components/Chat";
|
||||
import Image from "@/components/Image";
|
||||
import Icon from "@/components/Icon";
|
||||
|
||||
import { content } from "./content";
|
||||
|
||||
const DocumentsPage = () => {
|
||||
return (
|
||||
<Layout>
|
||||
<Chat
|
||||
hidePanelMessage
|
||||
titleHead={
|
||||
<div className="flex items-center gap-2 text-label-sm">
|
||||
Documents
|
||||
<div className="flex items-center h-5 px-1.5 border border-stroke-soft-200 rounded-sm text-label-xs text-sub-600">
|
||||
20
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="-mx-4.5 max-md:-mx-0.5">
|
||||
{content.map((item) => (
|
||||
<div
|
||||
className="not-last:mb-8 max-md:not-last:mb-6"
|
||||
key={item.id}
|
||||
>
|
||||
<div className="flex items-center gap-2.5 mb-5 max-md:mb-3">
|
||||
<div className="text-label-md text-sub-600 max-md:text-label-sm">
|
||||
{item.title}
|
||||
</div>
|
||||
<div className="flex items-center h-5 px-1.5 border border-stroke-soft-200 rounded-sm text-label-xs text-sub-600">
|
||||
{item.counter}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap -mt-3 -mx-1.5">
|
||||
{item.items.map((item) => (
|
||||
<div
|
||||
className="w-[calc(33.333%-0.75rem)] mt-3 mx-1.5 p-2 pb-4 bg-white-0 border border-stroke-soft-200 rounded-xl shadow-[0_0.375rem_0.75rem_0_rgba(0,0,0,0.06)] cursor-pointer transition-colors hover:border-strong-950 max-md:w-[calc(100%-0.75rem)]"
|
||||
key={item.id}
|
||||
>
|
||||
<div className="mb-3 pt-2 pl-5.5 pr-6.5 bg-weak-50 rounded-t-lg">
|
||||
<Image
|
||||
className="w-full"
|
||||
src={item.image}
|
||||
width={199}
|
||||
height={137}
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Icon
|
||||
className="shrink-0 !size-4"
|
||||
name="document"
|
||||
/>
|
||||
<div className="truncate text-label-sm">
|
||||
{item.title}
|
||||
</div>
|
||||
<div className="flex shrink-0 ml-auto">
|
||||
{item.avatars.map((avatar) => (
|
||||
<Image
|
||||
className="size-4 opacity-100 rounded-full object-cover not-last:-mr-1.5"
|
||||
src={avatar}
|
||||
width={16}
|
||||
height={16}
|
||||
key={avatar}
|
||||
alt="Avatar"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Chat>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default DocumentsPage;
|
||||
@@ -0,0 +1,94 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Layout from "@/components/Layout";
|
||||
import Chat from "@/components/Chat";
|
||||
import Question from "@/components/Question";
|
||||
import Answer from "@/components/Answer";
|
||||
import CodeEditor from "@/components/CodeEditor";
|
||||
|
||||
const GenerateCodePage = () => {
|
||||
const [isGenerating, setIsGenerating] = useState(false);
|
||||
const [code, setCode] = useState(`<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Contact Form</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
background-color: #f4f4f9;
|
||||
}
|
||||
.contact-form {
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 4px;`);
|
||||
|
||||
const handleGenerateCode = async () => {
|
||||
setIsGenerating(true);
|
||||
setTimeout(() => {
|
||||
setCode(`<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Contact Form</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
background-color: #f4f4f9;
|
||||
}
|
||||
.contact-form {
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 4px;`);
|
||||
setIsGenerating(false);
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<Chat>
|
||||
<Question>generate html code for a contact form</Question>
|
||||
<Answer>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div>
|
||||
Here’s a simple example of HTML code for a contact
|
||||
form:
|
||||
</div>
|
||||
<CodeEditor
|
||||
title="Contact Form"
|
||||
language="html"
|
||||
initialCode={code}
|
||||
onCodeChange={setCode}
|
||||
onGenerate={handleGenerateCode}
|
||||
isGenerating={isGenerating}
|
||||
/>
|
||||
<div className="">
|
||||
This code creates a simple, styled contact form that
|
||||
includes fields for a name, email, and message,
|
||||
along with a "Send Message" button. You
|
||||
can further customize the form or integrate it into
|
||||
your website as needed.
|
||||
</div>
|
||||
</div>
|
||||
</Answer>
|
||||
</Chat>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default GenerateCodePage;
|
||||
@@ -0,0 +1,70 @@
|
||||
export const content = [
|
||||
{
|
||||
id: 0,
|
||||
title: "Previous 7 days",
|
||||
items: [
|
||||
{
|
||||
id: 0,
|
||||
title: "Write a blog post about remote work productivity",
|
||||
description:
|
||||
"Created a 700-word blog article discussing tips, tools, and challenges of working remotely.",
|
||||
icon: "ai-chat",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "Generate a fantasy castle in the clouds ",
|
||||
description:
|
||||
"Prompted an AI image of a magical floating castle during sunset, for use in concept art.",
|
||||
icon: "image-1",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Draft a SaaS business proposal",
|
||||
description:
|
||||
"Generated a professional proposal document for a subscription-based productivity tool.",
|
||||
icon: "document",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "Previous Month",
|
||||
items: [
|
||||
{
|
||||
id: 0,
|
||||
title: "Write a blog post about remote work productivity",
|
||||
description:
|
||||
"Created a 700-word blog article discussing tips, tools, and challenges of working remotely.",
|
||||
icon: "ai-chat",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "Generate a fantasy castle in the clouds ",
|
||||
description:
|
||||
"Prompted an AI image of a magical floating castle during sunset, for use in concept art.",
|
||||
icon: "image-1",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Draft a SaaS business proposal",
|
||||
description:
|
||||
"Generated a professional proposal document for a subscription-based productivity tool.",
|
||||
icon: "document",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Generate a fantasy castle in the clouds ",
|
||||
description:
|
||||
"Prompted an AI image of a magical floating castle during sunset, for use in concept art.",
|
||||
icon: "analytic",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Draft a SaaS business proposal",
|
||||
description:
|
||||
"Generated a professional proposal document for a subscription-based productivity tool.",
|
||||
icon: "document",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,72 @@
|
||||
"use client";
|
||||
|
||||
import Layout from "@/components/Layout";
|
||||
import Chat from "@/components/Chat";
|
||||
import Icon from "@/components/Icon";
|
||||
import Actions from "@/components/Actions";
|
||||
|
||||
import { content } from "./content";
|
||||
|
||||
const HistoryPage = () => {
|
||||
const actions = [
|
||||
{ name: "View", onClick: () => {} },
|
||||
{ name: "Hide", onClick: () => {} },
|
||||
{ name: "Remove", onClick: () => {} },
|
||||
];
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<Chat
|
||||
hidePanelMessage
|
||||
titleHead={
|
||||
<div className="flex items-center gap-2 text-label-sm">
|
||||
<Icon name="history" />
|
||||
History
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="-my-2">
|
||||
{content.map((item) => (
|
||||
<div
|
||||
className="not-last:mb-6.5 max-md:not-last:mb-4"
|
||||
key={item.id}
|
||||
>
|
||||
<div className="mb-4 text-label-md text-sub-600 max-md:mb-2 max-md:text-label-sm">
|
||||
{item.title}
|
||||
</div>
|
||||
<div className="">
|
||||
{item.items.map((item) => (
|
||||
<div
|
||||
className="flex items-center gap-3 px-3.5 py-3 rounded-3xl bg-weak-50 not-last:mb-3 cursor-pointer max-md:items-start max-md:rounded-xl"
|
||||
key={item.id}
|
||||
>
|
||||
<div className="flex justify-center items-center shrink-0 size-14.5 rounded-2xl bg-white-0 max-md:size-11 max-md:rounded-lg">
|
||||
<Icon
|
||||
className="!size-5.5 fill-icon-sub-600"
|
||||
name={item.icon}
|
||||
/>
|
||||
</div>
|
||||
<div className="grow">
|
||||
<div className="mb-0.5 text-label-md max-md:text-label-sm">
|
||||
{item.title}
|
||||
</div>
|
||||
<div className="text-soft-400">
|
||||
{item.description}
|
||||
</div>
|
||||
</div>
|
||||
<Actions
|
||||
classNameButton="rotate-90 [&_svg]:!size-6 max-md:hidden"
|
||||
items={actions}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Chat>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default HistoryPage;
|
||||
@@ -0,0 +1,36 @@
|
||||
import Link from "next/link";
|
||||
|
||||
import Image from "@/components/Image";
|
||||
|
||||
type Props = {
|
||||
item: {
|
||||
id: number;
|
||||
title: string;
|
||||
description: string;
|
||||
icon: string;
|
||||
href: string;
|
||||
};
|
||||
};
|
||||
|
||||
const Item = ({ item }: Props) => (
|
||||
<Link
|
||||
className="w-[calc(33.333%-0.75rem)] min-h-41 mt-3 mx-1.5 p-3 border border-stroke-soft-200 rounded-xl bg-gradient-to-r from-white-0 to-weak-50 transition-colors hover:border-stroke-sub-300 max-md:w-[calc(50%-0.75rem)]"
|
||||
href={item.href}
|
||||
>
|
||||
<div className="flex justify-center items-center size-12.5 mb-3 rounded-2xl bg-weak-50">
|
||||
<Image
|
||||
className="w-6 opacity-100"
|
||||
src={item.icon}
|
||||
width={24}
|
||||
height={24}
|
||||
alt={item.title}
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-1 text-label-lg max-md:text-[0.9375rem]">
|
||||
{item.title}
|
||||
</div>
|
||||
<div className="text-soft-400">{item.description}</div>
|
||||
</Link>
|
||||
);
|
||||
|
||||
export default Item;
|
||||
43
src/views/AgentChat/neuratalk/templates/HomePage/index.tsx
Normal file
43
src/views/AgentChat/neuratalk/templates/HomePage/index.tsx
Normal file
@@ -0,0 +1,43 @@
|
||||
"use client";
|
||||
|
||||
import Layout from "@/components/Layout";
|
||||
import Image from "@/components/Image";
|
||||
import PanelMessage from "@/components/PanelMessage";
|
||||
import Item from "./Item";
|
||||
|
||||
import { items } from "./items";
|
||||
|
||||
const HomePage = () => {
|
||||
return (
|
||||
<Layout>
|
||||
<div className="chat-wrapper">
|
||||
<div className="-mb-3 pt-18 px-7.5 pb-12 grow overflow-auto scrollbar-none max-md:pt-4 max-md:px-4 max-md:pb-8">
|
||||
<div className="mb-12 text-center max-md:mb-6">
|
||||
<Image
|
||||
className="w-21 mb-3 opacity-100"
|
||||
src="/images/ai-voice.png"
|
||||
width={84}
|
||||
height={85}
|
||||
alt="AI Voice"
|
||||
/>
|
||||
<div className="mb-3 text-h3 max-md:mb-1.5 max-md:text-[1.6rem]">
|
||||
Welcome Odyssey AI
|
||||
</div>
|
||||
<div className="max-w-120 mx-auto text-p-xl text-sub-600 max-md:text-p-sm">
|
||||
Get Started by Script a task and chat can do the
|
||||
rest. Not sure where to start?
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap -mt-3 -mx-1.5">
|
||||
{items.map((item) => (
|
||||
<Item item={item} key={item.id} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<PanelMessage />
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default HomePage;
|
||||
44
src/views/AgentChat/neuratalk/templates/HomePage/items.tsx
Normal file
44
src/views/AgentChat/neuratalk/templates/HomePage/items.tsx
Normal file
@@ -0,0 +1,44 @@
|
||||
export const items = [
|
||||
{
|
||||
id: 0,
|
||||
title: "Write Copy",
|
||||
description: "Create compelling text for ads, emails, and more.",
|
||||
icon: "/images/document-validation.svg",
|
||||
href: "/write-copy",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "Image Generation",
|
||||
description: "Design custom visuals with AI.",
|
||||
icon: "/images/ai-image.svg",
|
||||
href: "/image-generation",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Research",
|
||||
description: "Quickly gather and summarize info.",
|
||||
icon: "/images/ai-search.svg",
|
||||
href: "/research",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Generate Article",
|
||||
description: "Write articles on any topic instantly.",
|
||||
icon: "/images/license.svg",
|
||||
href: "/document-generation",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Data Analytics",
|
||||
description: "Analyze data with AI-driven insights.",
|
||||
icon: "/images/pie-chart.svg",
|
||||
href: "/data-analytics",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "Generate Code",
|
||||
description: "Produce accurate code fast.",
|
||||
icon: "/images/code.svg",
|
||||
href: "/generate-code",
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,43 @@
|
||||
"use client";
|
||||
|
||||
import Layout from "@/components/Layout";
|
||||
import Chat from "@/components/Chat";
|
||||
import Question from "@/components/Question";
|
||||
import Answer from "@/components/Answer";
|
||||
import SoloImage from "@/components/SoloImage";
|
||||
import Gallery from "@/components/Gallery";
|
||||
|
||||
const ImageGenerationPage = () => {
|
||||
return (
|
||||
<Layout>
|
||||
<Chat>
|
||||
<Question>generate images for a fantasy landscape</Question>
|
||||
<Answer>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<SoloImage />
|
||||
<div>
|
||||
Here is the fantasy landscape you requested! Let me
|
||||
know if you'd like any adjustments or
|
||||
additional details.
|
||||
</div>
|
||||
<div>Anything else? I’m always here to help.</div>
|
||||
</div>
|
||||
</Answer>
|
||||
<Question>generate 3 images for a cartoon girl</Question>
|
||||
<Answer>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Gallery />
|
||||
<div>
|
||||
Here is the fantasy landscape you requested! Let me
|
||||
know if you'd like any adjustments or
|
||||
additional details.
|
||||
</div>
|
||||
<div>Anything else? I’m always here to help.</div>
|
||||
</div>
|
||||
</Answer>
|
||||
</Chat>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default ImageGenerationPage;
|
||||
@@ -0,0 +1,17 @@
|
||||
"use client";
|
||||
|
||||
import Layout from "@/components/Layout";
|
||||
import Chat from "@/components/Chat";
|
||||
import VoiceChat from "@/components/VoiceChat";
|
||||
|
||||
const ResearchPage = () => {
|
||||
return (
|
||||
<Layout>
|
||||
<Chat hidePanelMessage>
|
||||
<VoiceChat />
|
||||
</Chat>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default ResearchPage;
|
||||
@@ -0,0 +1,110 @@
|
||||
export const content = [
|
||||
{
|
||||
id: 0,
|
||||
title: "✍️ Writing templates",
|
||||
items: [
|
||||
{
|
||||
id: 0,
|
||||
title: "Blog Post Outline",
|
||||
image: "/images/templates-pic-1.jpg",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "Product Description",
|
||||
image: "/images/templates-pic-2.jpg",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Social Media Caption",
|
||||
image: "/images/templates-pic-3.jpg",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Newsletter Intro",
|
||||
image: "/images/templates-pic-4.jpg",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Cover Letter",
|
||||
image: "/images/templates-pic-5.jpg",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "Story Starter",
|
||||
image: "/images/templates-pic-1.jpg",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "🎨 Image Generation",
|
||||
items: [
|
||||
{
|
||||
id: 0,
|
||||
title: "YouTube Thumbnail",
|
||||
image: "/images/templates-pic-6.jpg",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "Fantasy Landscape",
|
||||
image: "/images/templates-pic-7.jpg",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Logo Design",
|
||||
image: "/images/templates-pic-8.jpg",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Newsletter Intro",
|
||||
image: "/images/templates-pic-4.jpg",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Cover Letter",
|
||||
image: "/images/templates-pic-5.jpg",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "Story Starter",
|
||||
image: "/images/templates-pic-1.jpg",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "📄 Document",
|
||||
items: [
|
||||
{
|
||||
id: 0,
|
||||
title: "Blog Post Outline",
|
||||
image: "/images/templates-pic-1.jpg",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "Product Description",
|
||||
image: "/images/templates-pic-2.jpg",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Social Media Caption",
|
||||
image: "/images/templates-pic-3.jpg",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Newsletter Intro",
|
||||
image: "/images/templates-pic-4.jpg",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Cover Letter",
|
||||
image: "/images/templates-pic-5.jpg",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "Story Starter",
|
||||
image: "/images/templates-pic-1.jpg",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
112
src/views/AgentChat/neuratalk/templates/TemplatesPage/index.tsx
Normal file
112
src/views/AgentChat/neuratalk/templates/TemplatesPage/index.tsx
Normal file
@@ -0,0 +1,112 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Layout from "@/components/Layout";
|
||||
import Chat from "@/components/Chat";
|
||||
import Image from "@/components/Image";
|
||||
import Icon from "@/components/Icon";
|
||||
|
||||
import { content } from "./content";
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
id: 0,
|
||||
title: "All",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "✍️ Writing",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "📄 Document",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "🎨 Image Generation",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "🧠 Prompt Engineering",
|
||||
},
|
||||
];
|
||||
|
||||
const TemplatesPage = () => {
|
||||
const [activeTab, setActiveTab] = useState(0);
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<Chat
|
||||
hidePanelMessage
|
||||
titleHead={
|
||||
<div className="flex items-center gap-2 mr-auto">
|
||||
<Icon className="fill-strong-950" name="template" />
|
||||
<div className="text-label-sm">Templates</div>
|
||||
<div className="px-3 py-0.5 bg-strong-950 rounded-md text-label-xs text-white-0">
|
||||
Beta
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="-mx-4.5 max-md:-mx-0.5">
|
||||
<div className="flex gap-1 mb-8 p-1 bg-weak-50 rounded-[0.625rem] max-md:mb-6 max-md:overflow-auto max-md:scrollbar-none">
|
||||
{tabs.map((tab) => (
|
||||
<button
|
||||
className={`flex-1 h-7 rounded-lg text-label-sm transition-colors hover:text-strong-950 max-2xl:flex-auto max-2xl:px-3 max-md:shrink-0 ${
|
||||
activeTab === tab.id
|
||||
? "bg-white-0 shadow-[0_0.375rem_0.625rem_0_rgba(14,18,27,0.06),0_0.125rem_0.25rem_0_rgba(14,18,27,0.03)] text-strong-950"
|
||||
: "text-soft-400"
|
||||
}`}
|
||||
key={tab.id}
|
||||
onClick={() => setActiveTab(tab.id)}
|
||||
>
|
||||
{tab.title}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="">
|
||||
{content.map((item) => (
|
||||
<div
|
||||
className="not-last:mb-8 max-md:not-last:mb-6"
|
||||
key={item.id}
|
||||
>
|
||||
<div className="text-label-md text-sub-600 mb-3 max-md:mb-2 max-md:text-label-sm">
|
||||
{item.title}
|
||||
</div>
|
||||
<div className="flex flex-wrap -mt-3 -mx-1.5">
|
||||
{item.items.map((item) => (
|
||||
<div
|
||||
className="w-[calc(33.333%-0.75rem)] mt-3 mx-1.5 p-2 pb-4 bg-white-0 border border-stroke-soft-200 rounded-xl shadow-[0_0.375rem_0.75rem_0_rgba(0,0,0,0.06)] cursor-pointer max-md:w-[calc(100%-0.75rem)]"
|
||||
key={item.id}
|
||||
>
|
||||
<div className="mb-4 pt-2 px-5.5 pb-5 bg-weak-50 rounded-t-lg">
|
||||
<Image
|
||||
className="w-full"
|
||||
src={item.image}
|
||||
width={199}
|
||||
height={137}
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Icon
|
||||
className="shrink-0 !size-4 fill-strong-950"
|
||||
name="document"
|
||||
/>
|
||||
<div className="truncate text-label-sm">
|
||||
{item.title}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Chat>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default TemplatesPage;
|
||||
129
src/views/AgentChat/neuratalk/templates/WriteCopyPage/index.tsx
Normal file
129
src/views/AgentChat/neuratalk/templates/WriteCopyPage/index.tsx
Normal file
@@ -0,0 +1,129 @@
|
||||
"use client";
|
||||
|
||||
import Layout from "@/components/Layout";
|
||||
import Chat from "@/components/Chat";
|
||||
import Question from "@/components/Question";
|
||||
import Answer from "@/components/Answer";
|
||||
|
||||
const WriteCopyPage = () => {
|
||||
return (
|
||||
<Layout>
|
||||
<Chat>
|
||||
<Question>
|
||||
<div className="">
|
||||
<p>Sure! Here's a draft outline:</p>
|
||||
<ol className="list-decimal list-inside">
|
||||
<li>Introduction: Understanding Mental Health</li>
|
||||
<li>Why Mental Health Matters</li>
|
||||
<li>Common Challenges and Misconceptions</li>
|
||||
<li>Tips for Promoting Mental Well-being</li>
|
||||
<li>Conclusion: Breaking the Stigma</li>
|
||||
</ol>
|
||||
<p>
|
||||
Would you like me to expand this outline into a full
|
||||
article?
|
||||
</p>
|
||||
</div>
|
||||
</Question>
|
||||
<Answer>
|
||||
<div className="flex flex-col gap-1">
|
||||
<p>
|
||||
Here’s a simple table of common mental health
|
||||
problems along with potential solutions:
|
||||
</p>
|
||||
<div className="max-md:overflow-auto max-md:scrollbar-none max-md:-mr-4 max-md:pr-4">
|
||||
<table className="w-full table-fixed [&_th]:bg-weak-50 [&_th]:text-left [&_th]:font-medium [&_th]:text-sub-600 [&_td,&_th]:py-2.5 [&_td,&_th]:px-3 [&_td,&_th]:border [&_td,&_th]:border-stroke-soft-200 [&_td]:align-top [&_ul>li]:before:content-['-'] [&_ul>li]:before:mr-1 max-md:w-160">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Mental Health Problem</th>
|
||||
<th>Description</th>
|
||||
<th>Solutions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Anxiety</td>
|
||||
<td>
|
||||
Excessive worry or fear impacting
|
||||
daily activities.
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li>
|
||||
Practice mindfulness and
|
||||
relaxation techniques.{" "}
|
||||
</li>
|
||||
<li>
|
||||
Cognitive-behavioral therapy
|
||||
(CBT).
|
||||
</li>
|
||||
<li>
|
||||
Avoid caffeine and alcohol.
|
||||
</li>
|
||||
<li>
|
||||
Medication (if prescribed).
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Depression</td>
|
||||
<td>
|
||||
Persistent sadness, loss of
|
||||
interest, and low energy.
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li>
|
||||
Seek professional therapy.
|
||||
</li>
|
||||
<li>
|
||||
Engage in regular physical
|
||||
activity.
|
||||
</li>
|
||||
<li>
|
||||
Maintain a healthy diet and
|
||||
sleep schedule.
|
||||
</li>
|
||||
<li>Join support groups.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Stress</td>
|
||||
<td>
|
||||
Feeling overwhelmed or unable to
|
||||
cope with demands.
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li>
|
||||
Time management and
|
||||
prioritization.
|
||||
</li>
|
||||
<li>
|
||||
Regular breaks and
|
||||
self-care.
|
||||
</li>
|
||||
<li>
|
||||
Practice deep breathing or
|
||||
meditation.
|
||||
</li>
|
||||
<li>
|
||||
Talk to a trusted friend or
|
||||
therapist.
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</Answer>
|
||||
</Chat>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default WriteCopyPage;
|
||||
Reference in New Issue
Block a user