AI Chat

import { IconCamera, IconFileUpload } from '@tabler/icons-react';
import Heading from '@/components/ui/Heading';
import { Card, CardBody } from '@/components/ui/Card';
import Textarea from '@/components/ui/Textarea';
import Select from '@/components/ui/Select';
import Button from '@/components/ui/Button';
export default function Page() {
  const helloText = formatHello(new Date());
  return (
    <div className="relative h-screen overflow-auto px-4">
      <div className="mt-10 flex flex-col items-center md:mt-40">
        <Heading as="h1" className="text-center">
          {helloText}!
        </Heading>
        <Heading as="h1" className="text-center">
          What can I do for you?
        </Heading>
        <p className="text-description mt-4 text-center">You can choose one question below to have a start with me!</p>
        <div className="mt-6 grid w-full max-w-4xl grid-cols-1 gap-3 sm:grid-cols-4">
          <Card className="hover:border-primary transition-colors">
            <CardBody className="select-none">What's the weather like today?</CardBody>
          </Card>
          <Card className="hover:border-primary transition-colors">
            <CardBody className="select-none">What's the newest version of React?</CardBody>
          </Card>
          <Card className="hover:border-primary transition-colors">
            <CardBody className="select-none">Recommend me some books about AI?</CardBody>
          </Card>
          <Card className="hover:border-primary transition-colors">
            <CardBody className="select-none">Explain what quantum mechanics is</CardBody>
          </Card>
        </div>
      </div>
      <div className="absolute bottom-6 left-1/2 w-full -translate-x-1/2 px-4 lg:w-[80%] [&_[data-slot=textarea-wrap]]:w-full">
        <Textarea placeholder="You can ask me anything..." resize="none" className="pb-8" rows={5}></Textarea>
        <div className="absolute bottom-2 left-6 flex w-[calc(100%_-_var(--spacing)*12)] items-center justify-between">
          <div className="flex items-center gap-2">
            <span className="text-description text-sm">Module</span>
            <Select
              className="min-w-35 rounded-full"
              defaultValue="chat-gpt-4o "
              items={[
                { id: 'chat-gpt-4o', label: 'ChatGPT-4o', value: 'chat-gpt-4o' },
                { id: 'claude-3.5 ', label: 'Claude-3.5', value: 'claude-3.5' },
                { id: 'deepseek-r1', label: 'Deepseek-R1', value: 'deepseek-r1' },
              ]}
              size="sm"
            />
          </div>
          <div className="flex items-center gap-2">
            <Button asIcon colors="neutral" variant="solid" size="sm" pill>
              <IconCamera size={18} />
            </Button>
            <Button asIcon colors="neutral" variant="solid" size="sm" pill>
              <IconFileUpload size={18} />
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}

function formatHello(date: Date) {
  const hour = date.getHours();
  return hour < 12 ? 'Good morning' : hour < 18 ? 'Good afternoon' : 'Good evening';
}

import { IconPhotoAi, IconSend, IconMusic, IconLanguage, IconCode } from '@tabler/icons-react';
import NextImage from 'next/image';
import Button from '@/components/ui/Button';
import Heading from '@/components/ui/Heading';
import Input from '@/components/ui/Input';
import Tag from '@/components/ui/Tag';

export default function Page() {
  return (
    <div className="flex h-screen flex-col items-center justify-center px-4">
      <NextImage src="/images/logo-1.svg" width={100} height={100} className="mb-6 size-24" alt="logo" />
      <Heading as="h1" className="text-center">
        What Can I help with?
      </Heading>
      <Input
        placeholder="ask anything"
        size="lg"
        className="mt-10 w-full rounded-full pr-2 md:w-2xl"
        suffix={
          <Button asIcon colors="primary" size="sm" pill>
            <IconSend size={18} className="rotate-45" />
          </Button>
        }
      />
      <div className="mt-4 flex flex-wrap justify-center gap-3 md:justify-start">
        <Tag pill colors="neutral" bordered className="h-8 gap-1">
          <IconPhotoAi size={18} />
          Create Image
        </Tag>
        <Tag pill colors="neutral" bordered className="h-8 gap-1">
          <IconMusic size={18} />
          Create Music
        </Tag>
        <Tag pill colors="neutral" bordered className="h-8 gap-1">
          <IconCode size={18} />
          Coding
        </Tag>
        <Tag pill colors="neutral" bordered className="h-8 gap-1">
          <IconLanguage size={18} />
          Translate
        </Tag>
      </div>
    </div>
  );
}