vrr/supermemory
2
0
Fork 0
mirror of https://github.com/supermemoryai/supermemory.git synced 2026-05-05 15:30:40 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

improved textarea layout + home page imrpovemnts

Browse source
This commit is contained in:
codetorso 2024-07-18 23:14:48 +05:30
parent 6ea598d483
commit ebf5b29cc7
9 changed files with 185 additions and 180 deletions
Download patch file Download diff file Expand all files Collapse all files

45
apps/web/app/(dash)/home/queryinput.tsx
View file

@ -1,30 +1,22 @@
"use client";
import { ArrowRightIcon } from "@repo/ui/icons";
import Image from "next/image";
import React, { useState } from "react";
import Divider from "@repo/ui/shadcn/divider";
import { FilterSpaces } from "./filterSpaces";
function QueryInput({
initialSpaces,
initialQuery = "",
disabled = false,
className,
mini = false,
handleSubmit,
}: {
initialQuery?: string;
initialSpaces?: {
id: number;
name: string;
}[];
disabled?: boolean;
className?: string;
mini?: boolean;
handleSubmit: (q: string, spaces: { id: number; name: string }[]) => void;
}) {
const [q, setQ] = useState(initialQuery);
const [q, setQ] = useState("");
const [selectedSpaces, setSelectedSpaces] = useState<
{ id: number; name: string }[]
@ -33,7 +25,7 @@ function QueryInput({
return (
<div className={`${className}`}>
<div
className={`bg-[#1F2428] overflow-hidden border-2 border-gray-700/50 shadow-md shadow-[#1d1d1dc7] rounded-3xl`}
className={`bg-[#1F2428] overflow-hidden border-2 border-gray-700/50 shadow-md shadow-[#1d1d1dc7] rounded-3xl`}
>
{/* input and action button */}
<form
@ -44,14 +36,14 @@ function QueryInput({
handleSubmit(q, selectedSpaces);
setQ("");
}}
className="flex gap-4 p-3"
className=""
>
<textarea
autoFocus
name="q"
cols={30}
rows={mini ? 2 : 4}
className="bg-transparent pt-2.5 text-lg placeholder:text-[#9B9B9B] focus:text-gray-200 duration-200 tracking-[3%] outline-none resize-none w-full p-4"
rows={4}
className="bg-transparent pt-2.5 text-lg placeholder:text-[#9B9B9B] text-gray-200 tracking-[3%] outline-none resize-none w-full p-4"
placeholder="Ask your second brain..."
onKeyDown={(e) => {
if (e.key === "Enter" && !e.shiftKey) {
@ -65,29 +57,14 @@ function QueryInput({
}}
onChange={(e) => setQ(e.target.value)}
value={q}
disabled={disabled}
/>
<button
type="submit"
disabled={disabled}
className="h-12 w-12 rounded-[14px] bg-border all-center shrink-0 hover:brightness-125 duration-200 outline-none focus:outline focus:outline-primary active:scale-90"
>
<Image src={ArrowRightIcon} alt="Right arrow icon" />
</button>
</form>{" "}
{!mini && (
<>
<Divider />
<FilterSpaces
selectedSpaces={selectedSpaces}
setSelectedSpaces={setSelectedSpaces}
initialSpaces={initialSpaces || []}
/>
</>
)}
<FilterSpaces
selectedSpaces={selectedSpaces}
setSelectedSpaces={setSelectedSpaces}
initialSpaces={initialSpaces || []}
/>
</form>
</div>
{/* selected sources */}
</div>
);
}