import React from "react"

import { PlaygroundIodRelevant } from "@/components/Common/Playground/IodRelevant.tsx"
import { PlaygroundData } from "@/components/Common/Playground/Data.tsx"
import { PlaygroundScene } from "@/components/Common/Playground/Scene.tsx"
import { PlaygroundTeam } from "@/components/Common/Playground/Team.tsx"

export const PlaygroundIod = () => {
  return (
    <div
      className="w-[36%] h-full grid grid-rows-12 gap-3 pt-16 pr-5 pb-0"
      style={{ paddingTop: "4rem" }}>
      <div className="w-full row-span-5">
        <PlaygroundIodRelevant />
      </div>
      <div className="w-full row-span-4  grid grid-cols-2 gap-3 custom-scrollbar">
        <PlaygroundData />
        <PlaygroundScene />
      </div>
      <div className="w-full row-span-3 pb-3">
        <PlaygroundTeam />
      </div>
    </div>
  )
}