-
-
First Steps →
-
- Just the basics - Everything you need to know to set up your
- database and authentication.
-
-
-
-
Documentation →
-
- Learn more about Create T3 App, the libraries it uses, and how to
- deploy it.
-
-
+
+
+
+
+
+
+
About HRIStudio
+
+ HRIStudio is a cutting-edge platform designed to streamline the process of creating,
+ managing, and analyzing Human-Robot Interaction experiments. Our suite of tools
+ empowers researchers and developers to push the boundaries of HRI research.
+
+
+ With HRIStudio, you can:
+
+
+ Design complex interaction scenarios with ease
+ Collect and analyze data in real-time
+ Collaborate seamlessly with team members
+ Visualize results with advanced reporting tools
+
+
+
+
+
+
+
Join the HRI Revolution
+
+ Whether you're a seasoned researcher or just starting in the field of Human-Robot Interaction,
+ HRIStudio provides the tools and support you need to succeed.
+
+
+
+
+
+
-
+
);
-}
+}
\ No newline at end of file
diff --git a/src/app/sign-in/[[...sign-in]]/page.tsx b/src/app/sign-in/[[...sign-in]]/page.tsx
new file mode 100644
index 0000000..9f939ce
--- /dev/null
+++ b/src/app/sign-in/[[...sign-in]]/page.tsx
@@ -0,0 +1,102 @@
+"use client"
+
+import { useState } from "react"
+import { useSignIn } from "@clerk/nextjs"
+import { useRouter } from "next/navigation"
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "~/components/ui/card"
+import { Input } from "~/components/ui/input"
+import { Button } from "~/components/ui/button"
+import { Separator } from "~/components/ui/separator"
+import Link from "next/link"
+import { FcGoogle } from "react-icons/fc"
+import { FaApple } from "react-icons/fa"
+
+export default function SignInPage() {
+ const { isLoaded, signIn, setActive } = useSignIn()
+ const [emailAddress, setEmailAddress] = useState("")
+ const [password, setPassword] = useState("")
+ const router = useRouter()
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault()
+ if (!isLoaded) return
+
+ try {
+ const result = await signIn.create({
+ identifier: emailAddress,
+ password,
+ })
+
+ if (result.status === "complete") {
+ await setActive({ session: result.createdSessionId })
+ router.push("/dash")
+ }
+ } catch (err: any) {
+ console.error("Error:", err.errors[0].message)
+ }
+ }
+
+ const signInWith = (strategy: "oauth_google" | "oauth_apple") => {
+ if (!isLoaded) return
+ signIn.authenticateWithRedirect({
+ strategy,
+ redirectUrl: "/sso-callback",
+ redirectUrlComplete: "/dash",
+ })
+ }
+
+ return (
+
+
+
+ Sign In to HRIStudio
+ Enter your email and password to sign in
+
+
+
+ signInWith("oauth_google")}>
+
+ signInWith("oauth_apple")}>
+
+
+
+
+
+ Don't have an account?{" "}
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/app/sign-up/[[...sign-up]]/page.tsx b/src/app/sign-up/[[...sign-up]]/page.tsx
new file mode 100644
index 0000000..0601d88
--- /dev/null
+++ b/src/app/sign-up/[[...sign-up]]/page.tsx
@@ -0,0 +1,102 @@
+"use client"
+
+import { useState } from "react"
+import { useSignUp } from "@clerk/nextjs"
+import { useRouter } from "next/navigation"
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "~/components/ui/card"
+import { Input } from "~/components/ui/input"
+import { Button } from "~/components/ui/button"
+import { Separator } from "~/components/ui/separator"
+import Link from "next/link"
+import { FcGoogle } from "react-icons/fc"
+import { FaApple } from "react-icons/fa"
+
+export default function SignUpPage() {
+ const { isLoaded, signUp, setActive } = useSignUp()
+ const [emailAddress, setEmailAddress] = useState("")
+ const [password, setPassword] = useState("")
+ const router = useRouter()
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault()
+ if (!isLoaded) return
+
+ try {
+ const result = await signUp.create({
+ emailAddress,
+ password,
+ })
+
+ if (result.status === "complete") {
+ await setActive({ session: result.createdSessionId })
+ router.push("/dash")
+ }
+ } catch (err: any) {
+ console.error("Error:", err.errors[0].message)
+ }
+ }
+
+ const signUpWith = (strategy: "oauth_google" | "oauth_apple") => {
+ if (!isLoaded) return
+ signUp.authenticateWithRedirect({
+ strategy,
+ redirectUrl: "/sso-callback",
+ redirectUrlComplete: "/dash",
+ })
+ }
+
+ return (
+
+
+
+ Sign Up for HRIStudio
+ Create an account to get started
+
+
+
+ signUpWith("oauth_google")}>
+
+ signUpWith("oauth_apple")}>
+
+
+
+
+
+ Already have an account?{" "}
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/sidebar.tsx b/src/components/sidebar.tsx
new file mode 100644
index 0000000..3471233
--- /dev/null
+++ b/src/components/sidebar.tsx
@@ -0,0 +1,106 @@
+"use client"
+
+import { UserButton, useUser } from "@clerk/nextjs"
+import {
+ BarChartIcon,
+ BeakerIcon,
+ BotIcon,
+ FolderIcon,
+ LayoutDashboard,
+ Menu,
+ Settings
+} from "lucide-react"
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { useState } from "react"
+import { Button } from "~/components/ui/button"
+import { Sheet, SheetContent, SheetTrigger } from "~/components/ui/sheet"
+import { cn } from "~/lib/utils"
+
+const navItems = [
+ { name: "Dashboard", href: "/dash", icon: LayoutDashboard },
+ { name: "Projects", href: "/projects", icon: FolderIcon },
+ { name: "Experiments", href: "/experiments", icon: BeakerIcon },
+ { name: "Data Analysis", href: "/analysis", icon: BarChartIcon },
+ { name: "Settings", href: "/settings", icon: Settings },
+];
+
+export function Sidebar() {
+ const pathname = usePathname()
+ const [isOpen, setIsOpen] = useState(false)
+ const { user } = useUser()
+
+ const SidebarContent = () => (
+
+
+
+ {navItems.map((item) => {
+ const IconComponent = item.icon;
+ return (
+
+
+ {item.name}
+
+
+
+ );
+ })}
+
+
+
+
+
+
+
+
{user?.fullName || 'User'}
+
{user?.primaryEmailAddress?.emailAddress || 'user@example.com'}
+
+
+
+
+
+ )
+
+ const HRIStudioLogo = () => (
+
+
+
HRI
+
Studio
+
+ )
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/ui/avatar.tsx b/src/components/ui/avatar.tsx
new file mode 100644
index 0000000..05e961c
--- /dev/null
+++ b/src/components/ui/avatar.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "~/lib/utils"
+
+const Avatar = React.forwardRef<
+ React.ElementRef
,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ VariantProps {
+ asChild?: boolean
+}
+
+const Button = React.forwardRef(
+ ({ className, variant, size, asChild = false, ...props }, ref) => {
+ const Comp = asChild ? Slot : "button"
+ return (
+
+>(({ className, ...props }, ref) => (
+
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+ HTMLParagraphElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+>(({ className, ...props }, ref) => (
+
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
new file mode 100644
index 0000000..0af5243
--- /dev/null
+++ b/src/components/ui/dialog.tsx
@@ -0,0 +1,122 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { Cross2Icon } from "@radix-ui/react-icons"
+
+import { cn } from "~/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+ {children}
+
+ Close
+
+
+
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ {}
+
+const Input = React.forwardRef(
+ ({ className, type, ...props }, ref) => {
+ return (
+ ,
+ React.ComponentPropsWithoutRef
+>(
+ (
+ { className, orientation = "horizontal", decorative = true, ...props },
+ ref
+ ) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ VariantProps {}
+
+const SheetContent = React.forwardRef<
+ React.ElementRef,
+ SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+
+
+
+ Close
+
+ {children}
+
+
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+)
+SheetHeader.displayName = "SheetHeader"
+
+const SheetFooter = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+)
+SheetFooter.displayName = "SheetFooter"
+
+const SheetTitle = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+