-
-
-
- Get started by editing
- app/page.tsx
-
-
- By{' '}
-
-
+
+
)
-}
+}
\ No newline at end of file
diff --git a/app/providers.tsx b/app/providers.tsx
new file mode 100644
index 0000000..37d46b1
--- /dev/null
+++ b/app/providers.tsx
@@ -0,0 +1,17 @@
+'use client'
+
+import { DndProvider } from 'react-dnd'
+import { HTML5Backend } from 'react-dnd-html5-backend'
+
+import React, { useState } from 'react'
+
+type ProvidersProps = {
+ children: React.ReactNode,
+}
+
+export default function Providers({ children }: ProvidersProps) {
+
+ return (
+ {children}
+ )
+}
\ No newline at end of file
diff --git a/components.json b/components.json
new file mode 100644
index 0000000..379cd70
--- /dev/null
+++ b/components.json
@@ -0,0 +1,16 @@
+{
+ "$schema": "https://ui.shadcn.com/schema.json",
+ "style": "default",
+ "rsc": true,
+ "tsx": true,
+ "tailwind": {
+ "config": "tailwind.config.ts",
+ "css": "app/globals.css",
+ "baseColor": "slate",
+ "cssVariables": true
+ },
+ "aliases": {
+ "components": "@/components",
+ "utils": "@/lib/utils"
+ }
+}
\ No newline at end of file
diff --git a/components/buildable.tsx b/components/buildable.tsx
new file mode 100644
index 0000000..706b12a
--- /dev/null
+++ b/components/buildable.tsx
@@ -0,0 +1,108 @@
+// Configured Drag and drop wrapper
+import type { Identifier, XYCoord } from 'dnd-core'
+import type { FC } from 'react'
+import React, { useRef } from 'react'
+import { useDrag, useDrop } from 'react-dnd'
+
+export type BuildableType = 'free_input' | 'tag'
+
+export const BuildableTypes: { [key: string]: BuildableType } = {
+ FREE_INPUT: 'free_input',
+ TAG: 'tag',
+ }
+
+export interface BuildableProps {
+ id: any,
+ index: number,
+ type: BuildableType,
+ moveCard: (dragIndex: number, hoverIndex: number) => void
+ children?: React.ReactNode
+}
+
+interface DragItem {
+ index: number
+ id: string
+ type: string
+}
+
+export const Buildable: FC = ({ id, type, index, moveCard, children }) => {
+ const ref = useRef(null)
+ const [{ handlerId }, drop] = useDrop<
+ DragItem,
+ void,
+ { handlerId: Identifier | null }
+ >({
+ accept: type,
+ collect(monitor) {
+ return {
+ handlerId: monitor.getHandlerId(),
+ }
+ },
+ hover(item: DragItem, monitor) {
+ if (!ref.current) {
+ return
+ }
+ const dragIndex = item.index
+ const hoverIndex = index
+
+ // Don't replace items with themselves
+ if (dragIndex === hoverIndex) {
+ return
+ }
+
+ // Determine rectangle on screen
+ const hoverBoundingRect = ref.current?.getBoundingClientRect()
+
+ // Get vertical middle
+ const hoverMiddleY =
+ (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2
+
+ // Determine mouse position
+ const clientOffset = monitor.getClientOffset()
+
+ // Get pixels to the top
+ const hoverClientX = (clientOffset as XYCoord).x - hoverBoundingRect.left
+
+ // Only perform the move when the mouse has crossed half of the items height
+ // When dragging downwards, only move when the cursor is below 50%
+ // When dragging upwards, only move when the cursor is above 50%
+
+ // Dragging downwards
+ if (dragIndex < hoverIndex && hoverClientX < hoverMiddleY) {
+ return
+ }
+
+ // Dragging upwards
+ if (dragIndex > hoverIndex && hoverClientX > hoverMiddleY) {
+ return
+ }
+
+ // Time to actually perform the action
+ moveCard(dragIndex, hoverIndex)
+
+ // Note: we're mutating the monitor item here!
+ // Generally it's better to avoid mutations,
+ // but it's good here for the sake of performance
+ // to avoid expensive index searches.
+ item.index = hoverIndex
+ },
+ })
+
+ const [{ isDragging }, drag] = useDrag({
+ type: type,
+ item: () => {
+ return { id, index }
+ },
+ collect: (monitor: any) => ({
+ isDragging: monitor.isDragging(),
+ }),
+ })
+
+ const opacity = isDragging ? 0 : 1
+ drag(drop(ref))
+ return (
+ = ({ }) => {
+ const size = 20
+ return = ({ placeholder, selectOptions }) => {
+ const size = 20
+ return = ({ className, children }) => {
+ //Validate children prop
+ const childrenArray = React.Children.toArray(children)
+
+ // Convert children to buildables
+ const [buildables, setBuildables] = useState(
+ childrenArray.map((child, index) => {
+ return {
+ id: index,
+ component: child,
+ }
+ }
+ ))
+
+ const moveBuildable = useCallback((dragIndex: number, hoverIndex: number) => {
+ setBuildables((prevBuildables: BuildableElement[]) =>
+ update(prevBuildables, {
+ $splice: [
+ [dragIndex, 1],
+ [hoverIndex, 0, prevBuildables[dragIndex] as BuildableElement],
+ ],
+ }),
+ )
+ }, [])
+
+ const renderBuildable = useCallback(
+ (buildableComponent: BuildableElement, index: number) => {
+ return (
+
+ {buildableComponent.component}
+
+ )
+ },
+ [],
+ )
+
+ return (
+ <>
+ ,
+ VariantProps {
+ asChild?: boolean
+}
+
+const Button = React.forwardRef(
+ ({ className, variant, size, asChild = false, ...props }, ref) => {
+ const Comp = asChild ? Slot : "button"
+ return (
+ {}
+
+const Input = React.forwardRef(
+ ({ className, type, ...props }, ref) => {
+ return (
+
+ )
+ }
+)
+Input.displayName = "Input"
+
+export { Input }
diff --git a/components/ui/select.tsx b/components/ui/select.tsx
new file mode 100644
index 0000000..dabb6e4
--- /dev/null
+++ b/components/ui/select.tsx
@@ -0,0 +1,121 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+ {children}
+
+
+
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, position = "popper", ...props }, ref) => (
+
+
+
+ {children}
+
+
+
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+
+
+
+
+ {children}
+
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
{"Let's build something awesome!"}
+
-
-
+
+
- Docs{' '} - - -> - -
-- Find in-depth information about Next.js features and API. -
- - - -- Learn{' '} - - -> - -
-- Learn about Next.js in an interactive course with quizzes! -
- - - -- Templates{' '} - - -> - -
-- Explore the Next.js 13 playground. -
- - - -- Deploy{' '} - - -> - -
-- Instantly deploy your Next.js site to a shareable URL with Vercel. -
- +
+ {children}
+
+ )
+}
diff --git a/components/dragable-input.tsx b/components/dragable-input.tsx
new file mode 100644
index 0000000..c4e2dfa
--- /dev/null
+++ b/components/dragable-input.tsx
@@ -0,0 +1,14 @@
+import { FC } from "react"
+import { Input } from "./ui/input"
+import { DragHandleDots2Icon } from '@radix-ui/react-icons'
+
+type DragableInputProps = {
+}
+
+export const DragableInput: FC
+
+}
\ No newline at end of file
diff --git a/components/dragable-tag.tsx b/components/dragable-tag.tsx
new file mode 100644
index 0000000..2a9f949
--- /dev/null
+++ b/components/dragable-tag.tsx
@@ -0,0 +1,32 @@
+import { FC } from "react"
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+ } from "@/components/ui/select"
+
+import { DragHandleDots2Icon } from '@radix-ui/react-icons'
+
+type DragableTagProps = {
+ placeholder?: string
+ selectOptions: string[]
+}
+
+export const DragableTag: FC
+
+}
\ No newline at end of file
diff --git a/components/prompt-box.tsx b/components/prompt-box.tsx
new file mode 100644
index 0000000..63801b7
--- /dev/null
+++ b/components/prompt-box.tsx
@@ -0,0 +1,71 @@
+"use client"
+
+import update from 'immutability-helper'
+import type { FC } from 'react'
+import React, { useCallback, useState } from 'react'
+
+import { Buildable, BuildableType, BuildableTypes } from './buildable'
+
+export interface BuildableElement {
+ id: number
+ component: React.ReactNode
+}
+
+export interface PromtBoxState {
+ buildables: BuildableElement[]
+}
+
+type PromptBoxProps = {
+ className?: string
+ children?: React.ReactNode[] | React.ReactNode
+}
+
+
+export const PromptBox: FC{buildables.map((card, i) => renderBuildable(card, i))}
+
+ )
+}
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
new file mode 100644
index 0000000..27ec398
--- /dev/null
+++ b/components/ui/button.tsx
@@ -0,0 +1,57 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+ "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+ {
+ variants: {
+ variant: {
+ default: "bg-primary text-primary-foreground hover:bg-primary/90",
+ accent: "bg-accent text-primary-foreground hover:bg-primary/90",
+ destructive:
+ "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+ outline:
+ "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+ secondary:
+ "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+ ghost: "hover:bg-accent hover:text-accent-foreground",
+ link: "text-primary underline-offset-4 hover:underline",
+ },
+ size: {
+ default: "h-10 px-4 py-2",
+ sm: "h-9 rounded-md px-3",
+ lg: "h-11 rounded-md px-8",
+ icon: "h-10 w-10",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ }
+)
+
+export interface ButtonProps
+ extends React.ButtonHTMLAttributes