Shorts

import { Film, Plus } from "lucide-react";
import SidebarOne from "./sidebarOne";

export default function SidebarOneShow(){
  return (
    <div className="flex h-screen border w-full">
      <SidebarOne />
      <div className="flex-grow overflow-auto">
        <div className="p-4 md:p-8 ">
          <div className="flex items-center mb-6">
            <div className="ml-4 flex items-center justify-center">
              <Film className="mr-2" />
              <h1 className="text-2xl font-bold">Shorts</h1>
            </div>
          </div>

          <div className="mb-8">
            <h2 className="text-xl font-semibold mb-4">Quick Start</h2>
            <div className="bg-gray-300 dark:bg-gray-800 rounded-lg p-4 flex items-center w-full max-w-xs">
              <Plus className="mr-3" />
              <span className="text-lg">Text to Video</span>
            </div>
          </div>

          <div>
            <h2 className="text-xl font-semibold mb-4">All Projects</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              <div className="bg-gray-300 dark:bg-gray-800 rounded-lg aspect-video"></div>
              <div className="bg-gray-300 dark:bg-gray-800 rounded-lg aspect-video"></div>
              <div className="bg-gray-300 dark:bg-gray-800 rounded-lg aspect-video"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}