Merge pull request #182 from CodeTorso/backend

home layout change (without color change)
This commit is contained in:
CodeTorso 2024-07-28 05:20:55 +05:30 committed by GitHub
commit 5037adcfec
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 22 additions and 13 deletions

View file

@ -49,7 +49,7 @@ export default function Home() {
<Navbar />
{/* main-content */}
<div className="w-full max-w-3xl p-4 flex flex-col items-center justify-center mx-auto mt-24">
<div className="w-full max-w-3xl p-4 flex flex-col items-center justify-center mx-auto pt-24">
{currStep === 0 && (
<div className="text-white space-y-3 flex flex-col gap-16 w-full">
<h1 className="text-3xl md:text-5xl tracking-tighter">

View file

@ -53,7 +53,7 @@ export function FilterSpaces({
</div>
<Command
className={`group transition-all border-0 text-white outline-0 ${
selectedSpaces.length ? "w-5 hover:w-24 focus-within:w-20" : "w-44"
selectedSpaces.length ? "w-12 hover:w-24 focus-within:w-28" : "w-44"
}`}
>
<div className="relative flex items-center">

View file

@ -70,18 +70,25 @@ function Page({ searchParams }: { searchParams: Record<string, string> }) {
}, [telegramUser]);
return (
<div className="max-w-3xl h-full justify-center flex mx-auto w-full flex-col px-2 md:px-0">
<div className="max-w-3xl h-full pt-[25vh] mx-auto w-full px-2 md:px-0">
<motion.h1
{...{
...slap,
transition: { ...slap.transition, delay: 0.2 },
}}
className="text-center mx-auto bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)] bg-clip-text text-4xl tracking-tighter text-transparent md:text-5xl pb-2"
>
<span>Ask your</span>{" "}
<span className="inline-flex items-center gap-2 bg-gradient-to-r to-blue-300 from-zinc-300 text-transparent bg-clip-text">
supermemory
</span>
<motion.h1
className="text-center mx-auto bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)] bg-clip-text text-4xl tracking-tighter text-transparent md:text-5xl"
animate={{
opacity: query.length ? 0 : 1,
translateY: query.length ? "10px" : "0px",
}}
>
<span>Ask your</span>{" "}
<span className="inline-flex items-center gap-2 bg-gradient-to-r to-blue-300 from-zinc-300 text-transparent bg-clip-text">
supermemory
</span>
</motion.h1>
</motion.h1>
<div className="w-full pb-20 mt-10">
@ -108,7 +115,9 @@ function Page({ searchParams }: { searchParams: Record<string, string> }) {
initialSpaces={spaces}
/>
<History setQuery={setQuery} />
<motion.div animate={{ opacity: query.length ? 0 : 1 }}>
<History setQuery={setQuery} />
</motion.div>
</div>
<div className="w-full fixed bottom-0 left-0 p-4">

View file

@ -52,7 +52,7 @@ function QueryInput({
name="q"
cols={30}
rows={3}
className="bg-transparent text-lg placeholder:text-[#9B9B9B] text-gray-200 tracking-[3%] outline-none resize-none w-full p-7"
className={`bg-transparent text-lg placeholder:text-[#9B9B9B] text-gray-200 tracking-[3%] outline-none resize-none w-full py-4 px-4 h-32 transition-[height] ${query.length > 0 && "h-40"}`}
placeholder="Ask your second brain..."
onKeyDown={(e) => {
if (e.key === "Enter" && !e.shiftKey) {
@ -74,8 +74,8 @@ function QueryInput({
initialSpaces={initialSpaces || []}
/>
<div className="flex items-center gap-4">
<div className="flex items-center gap-2">
<Label htmlFor="pro-mode" className="text-sm text-[#9B9B9B]">
<div className="flex items-center gap-2 p-2 rounded-lg bg-[#369DFD1A]">
<Label htmlFor="pro-mode" className="text-sm">
Pro mode
</Label>
<Switch

View file

@ -11,7 +11,7 @@ const Switch = React.forwardRef<
>(({ className, ...props }, ref) => (
<SwitchPrimitives.Root
className={cn(
"peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-white data-[state=unchecked]:bg-[#409EFD1A]",
"peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-[#3ba0ff] data-[state=unchecked]:bg-[#184670]",
className,
)}
{...props}