Faqs updates (supabase#19208)

* Faqs updates * Add file * Apply suggestions from code review --------- Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>

Author: saltcod

apps/database-new/app/[threadId]/Chat.tsx

@@ -10,7 +10,7 @@ import { useMessagesQuery } from '@/data/messages-query'
 import { AssistantMessage, UserMessage } from '@/lib/types'
 import BottomMarker from './BottomMarker'
 import UserChat from './UserChat'
-import { ChatInputAtom } from '../../components/Chat/ChatInput'
+import { ChatInputAtom } from '@/components/Chat/ChatInput'
 
 export const Chat = () => {
  const router = useRouter()

apps/database-new/app/faq/page.tsx

@@ -1,46 +1,11 @@
+import { FAQS, faq } from '@/data/faqs'
+import { slugify } from '@/lib/utils'
 import type { Metadata } from 'next'
 
-type faq = {
- question: string
- answer: string
-}
-
 export const metadata: Metadata = {
  title: 'database.design | Faq',
 }
 
-const FAQS = [
- {
- question: 'What is database.design?',
- answer:
- 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloremque molestias dicta nobis explicabo maiores officia blanditiis cupiditate, quibusdam debitis! Dignissimos ducimus aut temporibus ea, repellat consectetur quisquam molestiae recusandae rem.',
- },
- {
- question: 'How does it work?',
- answer:
- 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloremque molestias dicta nobis explicabo maiores officia blanditiis cupiditate, quibusdam debitis! Dignissimos ducimus aut temporibus ea, repellat consectetur quisquam molestiae recusandae rem.',
- },
- {
- question: 'Can I see the code?',
- answer:
- 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloremque molestias dicta nobis explicabo maiores officia blanditiis cupiditate, quibusdam debitis! Dignissimos ducimus aut temporibus ea, repellat consectetur quisquam molestiae recusandae rem.',
- },
- {
- question: 'Can I use this for non-Postgres databases?',
- answer:
- 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloremque molestias dicta nobis explicabo maiores officia blanditiis cupiditate, quibusdam debitis! Dignissimos ducimus aut temporibus ea, repellat consectetur quisquam molestiae recusandae rem.',
- },
-]
-
-function slugify(str: string) {
- return str
- .toLowerCase() // Convert to lowercase
- .replace(/\s+/g, '-') // Replace spaces with hyphens
- .replace(/[^\w-]+/g, '') // Remove non-word characters except hyphens
- .replace(/--+/g, '-') // Replace multiple consecutive hyphens with a single hyphen
- .replace(/^-+|-+$/g, '') // Remove leading and trailing hyphens
-}
-
 const FAQ = async () => {
  return (
  <div className="bg-background">
@@ -58,7 +23,7 @@ const FAQ = async () => {
  {FAQS.map((faq: faq, index) => (
  <article
  key={index}
- className="prose prose-headings:scroll-mt-20 prose-headings:font-display prose-headings:font-semibold"
+ className="prose prose-headings:scroll-mt-20 prose-headings:font-display prose-headings:font-semibold w-full"
  >
  <a href={`#${slugify(faq.question)}`} className="no-underline hover:underline">
  <h2 id={slugify(faq.question)}>{faq.question}</h2>

apps/database-new/app/profile/ConfirmDeleteThreadModal.tsx

@@ -1,8 +1,8 @@
 'use client'
 
 import { Button, Modal } from 'ui'
-import { deleteThread } from './../../app/actions'
 import { ThreadType } from './Threads'
+import { deleteThread } from '../actions'
 
 const ConfirmDeleteThreadModal = ({
  thread,

apps/database-new/app/profile/EditThreadModal.tsx

@@ -1,9 +1,10 @@
 'use client'
 
 import { Button, Input, Modal } from 'ui'
-import { updateThreadName } from './../../app/actions'
+
 import { ThreadType } from './Threads'
 import { useState } from 'react'
+import { updateThreadName } from '../actions'
 
 const EditThreadModal = ({
  thread,

apps/database-new/app/profile/page.tsx

@@ -4,8 +4,12 @@ import { cookies } from 'next/headers'
 import { redirect } from 'next/navigation'
 import Threads from './Threads'
 import { Suspense } from 'react'
+import type { Metadata } from 'next'
 
 dayjs.extend(relativeTime)
+export const metadata: Metadata = {
+ title: 'database.design | Profile',
+}
 
 // revalidatePath not working in the create route handler
 // force-dynamic to refetch every time if needed

apps/database-new/components/Header/AvatarDropdown.tsx

@@ -1,11 +1,11 @@
 'use client'
 
+import { logout } from '@/app/actions'
 import { User } from '@supabase/supabase-js'
-import { HelpCircle, LogIn, LogOut } from 'lucide-react'
+import { HelpCircle, LogOut } from 'lucide-react'
 import Image from 'next/image'
 import Link from 'next/link'
-import { Button, DropdownMenuGroup, DropdownMenuItem, DropdownMenuSeparator, IconUser } from 'ui'
-import { logout } from './../../app/actions'
+import { DropdownMenuGroup, DropdownMenuItem, DropdownMenuSeparator, IconUser } from 'ui'
 
 interface AvatarDropdownProps {
  user: User

apps/database-new/data/faqs.ts

@@ -0,0 +1,32 @@
+export type faq = {
+ question: string
+ answer: string
+}
+
+export const FAQS = [
+ {
+ question: 'What is database.design?',
+ answer:
+ 'database.design is a new way to get ideas out of your head and into code as fast as possible. Supabase provides you tools to making building incredibly fast. This tool focuses on the very first step: turning your idea into a database schema.',
+ },
+ {
+ question: 'How does it work?',
+ answer: `We use OpenAI under the hood to provide responses to your prompts. Just like ChatGPT, you can fine-tune your responses until you're happy with the schema. We're using React Flow to visualize the schemas.`,
+ },
+ {
+ question: 'Can I see the code?',
+ answer: 'You sure can. All of the source code is open source and available on Github. ',
+ },
+ {
+ question: 'Can I contribute to this project?',
+ answer: 'You sure can. All of the source code is open source and available on Github. ',
+ },
+ {
+ question: `What's the license? Can we fork this project and build our own?`,
+ answer: 'Yes. We release software under the Apache License 2.0.',
+ },
+ {
+ question: 'Can I use this for non-Postgres databases?',
+ answer: `Not at the moment. We've tailored the responses to try and do a great job returning Postgres-flavored SQL`,
+ },
+]

apps/database-new/lib/utils.ts

@@ -245,3 +245,12 @@ export function timeAgo(date: string) {
  return createdAt.format('MMM DD, YYYY')
  }
 }
+
+export function slugify(str: string) {
+ return str
+ .toLowerCase() // Convert to lowercase
+ .replace(/\s+/g, '-') // Replace spaces with hyphens
+ .replace(/[^\w-]+/g, '') // Remove non-word characters except hyphens
+ .replace(/--+/g, '-') // Replace multiple consecutive hyphens with a single hyphen
+ .replace(/^-+|-+$/g, '') // Remove leading and trailing hyphens
+}