Untitled
unknown
plain_text
24 days ago
11 kB
1
Indexable
Never
import { useState } from "react";
import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "./App.css";
import { Button } from "@/components/ui/button";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Layout } from "./Layout";
import { Home } from "./home";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
function App() {
const [count, setCount] = useState(0);
const payments = [
{
id: "728ed52f",
amount: 100,
status: "pending",
email: "m@example.com",
},
{
id: "489e1d42",
amount: 125,
status: "processing",
email: "example@gmail.com",
},
// ...
];
const data = [
{ name: "Alice", age: 30, email: "alice@example.com" },
{ name: "Bob", age: 25, email: "bob@example.com" },
{ name: "Charlie", age: 35, email: "charlie@example.com" },
{ name: "David", age: 28, email: "david@example.com" },
{ name: "Eva", age: 22, email: "eva@example.com" },
{ name: "Frank", age: 33, email: "frank@example.com" },
{ name: "Grace", age: 29, email: "grace@example.com" },
{ name: "Hannah", age: 26, email: "hannah@example.com" },
{ name: "Ivy", age: 31, email: "ivy@example.com" },
{ name: "Jack", age: 27, email: "jack@example.com" },
{ name: "Alice", age: 30, email: "alice@example.com" },
{ name: "Bob", age: 25, email: "bob@example.com" },
{ name: "Charlie", age: 35, email: "charlie@example.com" },
{ name: "David", age: 28, email: "david@example.com" },
{ name: "Eva", age: 22, email: "eva@example.com" },
{ name: "Frank", age: 33, email: "frank@example.com" },
{ name: "Grace", age: 29, email: "grace@example.com" },
{ name: "Hannah", age: 26, email: "hannah@example.com" },
{ name: "Ivy", age: 31, email: "ivy@example.com" },
{ name: "Jack", age: 27, email: "jack@example.com" },
// Add more data as needed
];
return (
<>
<div className="flex w-screen h-screen ">
<section className="max-w-full lg:flex xl:flex hidden flex-col px-3 h-screen bg-blue-300 ">
<p className="text-blue-300"> homgggggggggggggggggggg</p>
</section>
<section className="w-full bg-red-300 flex flex-col gap-4 px-4">
<div className="flex justify-between items-center h-[7%] ">
<div className="flex">home/about/admin</div>
<div className="flex gap-2">
<div>
<Popover>
<PopoverTrigger>notifications</PopoverTrigger>
<PopoverContent className='mr-4'>
hello
</PopoverContent>
</Popover>
</div>
<div>user</div>
</div>
</div>
<div className="flex justify-between items-center h-[7%]">
<div className="flex">
<input
type="text"
className="px-3 py-1 rounded-md border-gray-200 outline-none "
/>
</div>
<div className="flex gap-2">
<div className="lg:flex xl:flex md:flex hidden ">
<Select>
<SelectTrigger className="w-[180px]">
<SelectValue placeholder="Theme" />
</SelectTrigger>
<SelectContent>
<SelectItem value="light">Light</SelectItem>
<SelectItem value="dark">Dark</SelectItem>
<SelectItem value="system">System</SelectItem>
</SelectContent>
</Select>
</div>
<div className="lg:hidden xl:hidden md:hidden flex ">
<Popover>
<PopoverTrigger>Open</PopoverTrigger>
<PopoverContent>
{" "}
<Select>
<SelectTrigger className="w-[180px]">
<SelectValue placeholder="Theme" />
</SelectTrigger>
<SelectContent>
<SelectItem value="light">Light</SelectItem>
<SelectItem value="dark">Dark</SelectItem>
<SelectItem value="system">System</SelectItem>
</SelectContent>
</Select>
</PopoverContent>
</Popover>
</div>
<div className="lg:flex xl:flex md:flex hidden ">
<Select>
<SelectTrigger className="w-[180px]">
<SelectValue placeholder="Theme" />
</SelectTrigger>
<SelectContent>
<SelectItem value="light">Light</SelectItem>
<SelectItem value="dark">Dark</SelectItem>
<SelectItem value="system">System</SelectItem>
</SelectContent>
</Select>
</div>
<div className="lg:hidden xl:hidden md:hidden flex ">
<Popover>
<PopoverTrigger>Open</PopoverTrigger>
<PopoverContent>
{" "}
<Select>
<SelectTrigger className="w-[180px]">
<SelectValue placeholder="Theme" />
</SelectTrigger>
<SelectContent>
<SelectItem value="light">Light</SelectItem>
<SelectItem value="dark">Dark</SelectItem>
<SelectItem value="system">System</SelectItem>
</SelectContent>
</Select>
</PopoverContent>
</Popover>
</div>
<div className="lg:flex xl:flex md:flex hidden ">
<Select>
<SelectTrigger className="w-[180px]">
<SelectValue placeholder="Theme" />
</SelectTrigger>
<SelectContent>
<SelectItem value="light">Light</SelectItem>
<SelectItem value="dark">Dark</SelectItem>
<SelectItem value="system">System</SelectItem>
</SelectContent>
</Select>
</div>
<div className="lg:hidden xl:hidden md:hidden flex ">
<Popover>
<PopoverTrigger>Open</PopoverTrigger>
<PopoverContent className="max-w-full">
{" "}
<Select>
<SelectTrigger className="w-[180px]">
<SelectValue placeholder="Theme" />
</SelectTrigger>
<SelectContent>
<SelectItem value="light">Light</SelectItem>
<SelectItem value="dark">Dark</SelectItem>
<SelectItem value="system">System</SelectItem>
</SelectContent>
</Select>
</PopoverContent>
</Popover>
</div>
</div>
</div>
<div className="rounded-md w-full h-[86%] flex flex-col">
<div className="flex min-w-screen b max-w-full overflow-x-auto gap-3 ">
<div className="lg:min-w-[25%] md:min-w-[50%] sm:min-w-[50%] min-w-[100%] overflow-y-auto rounded-md ">
<div className="bg-green-400 rounded-md p-3 text-center w-full sticky top-0">
Tab 1
</div>
{data.map((data, key) => {
return (
<div className="w-full p-3 border-gray-200 rounded-md bg-white my-2 ">
<h1>{data.name}</h1>
<p>{data.number}</p>
</div>
);
})}
</div>
<div className=" lg:min-w-[25%] md:min-w-[50%] sm:min-w-[50%] min-w-[100%] overflow-y-auto rounded-md">
<div className="bg-green-400 rounded-md p-3 text-center w-full sticky top-0">
Tab 1
</div>
{data.map((data, key) => {
return (
<div className="w-full p-3 border-gray-200 rounded-md bg-white my-2 ">
<h1>{data.name}</h1>
<p>{data.number}</p>
</div>
);
})}
</div>
<div className=" lg:min-w-[25%] md:min-w-[50%] sm:min-w-[50%] min-w-[100%] overflow-y-auto rounded-md">
<div className="bg-green-400 rounded-md p-3 text-center w-full sticky top-0">
Tab 1
</div>
{data.map((data, key) => {
return (
<div className="w-full p-3 border-gray-200 rounded-md bg-white my-2 ">
<h1>{data.name}</h1>
<p>{data.number}</p>
</div>
);
})}
</div>
<div className=" lg:min-w-[25%] md:min-w-[50%] sm:min-w-[50%] min-w-[100%] overflow-y-auto rounded-md">
<div className="bg-green-400 rounded-md p-3 text-center w-full sticky top-0">
Tab 1
</div>
{data.map((data, key) => {
return (
<div className="w-full p-3 border-gray-200 rounded-md bg-white my-2 ">
<h1>{data.name}</h1>
<p>{data.number}</p>
</div>
);
})}
</div>
<div className=" lg:min-w-[25%] md:min-w-[50%] sm:min-w-[50%] min-w-[100%] overflow-y-auto rounded-md">
<div className="bg-green-400 rounded-md p-3 text-center w-full sticky top-0">
Tab 1
</div>
{data.map((data, key) => {
return (
<div className="w-full p-3 border-gray-200 rounded-md bg-white my-2 ">
<h1>{data.name}</h1>
<p>{data.number}</p>
</div>
);
})}
</div>
<div className=" lg:min-w-[25%] md:min-w-[50%] sm:min-w-[50%] min-w-[100%] overflow-y-auto rounded-md">
<div className="bg-green-400 rounded-md p-3 text-center w-full sticky top-0">
Tab 1
</div>
{data.map((data, key) => {
return (
<div className="w-full p-3 border-gray-200 rounded-md bg-white my-2 ">
<h1>{data.name}</h1>
<p>{data.number}</p>
</div>
);
})}
</div>
</div>
</div>
</section>
</div>
</>
);
}
export default App;
Leave a Comment