Hugging Face's logo

Spaces:
Angelsolo
/
solowebsite
Running

App Files Community
enzostvs HF Staff commited on
Commit
ec1f23a
·
1 Parent(s): afb491e

fix responsive issue

Browse files
Files changed (7) hide show
  1. app/layout.tsx +1 -2
  2. components/editor/ask-ai/index.tsx +1 -1
  3. components/editor/deploy-button/index.tsx +5 -5
  4. components/editor/header/index.tsx +1 -1
  5. components/editor/index.tsx +7 -4
  6. components/editor/preview/index.tsx +3 -1
  7. components/user-menu/index.tsx +1 -1
app/layout.tsx CHANGED
@@ -52,7 +52,6 @@ export const metadata: Metadata = {
52
  title: "DeepSite",
53
  statusBarStyle: "black-translucent",
54
  },
55
- themeColor: "#000000",
56
  icons: {
57
  icon: "/logo.svg",
58
  shortcut: "/logo.svg",
@@ -91,7 +90,7 @@ export default async function RootLayout({
91
  return (
92
  <html lang="en">
93
  <body
94
- className={`${inter.variable} ${ptSans.variable} antialiased bg-black dark`}
95
  >
96
  <Toaster richColors position="bottom-center" />
97
  <TanstackProvider>
 
52
  title: "DeepSite",
53
  statusBarStyle: "black-translucent",
54
  },
 
55
  icons: {
56
  icon: "/logo.svg",
57
  shortcut: "/logo.svg",
 
90
  return (
91
  <html lang="en">
92
  <body
93
+ className={`${inter.variable} ${ptSans.variable} antialiased bg-black dark h-[100dvh] overflow-hidden`}
94
  >
95
  <Toaster richColors position="bottom-center" />
96
  <TanstackProvider>
components/editor/ask-ai/index.tsx CHANGED
@@ -263,7 +263,7 @@ export function AskAI({
263
 
264
  return (
265
  <>
266
- <div className="bg-neutral-800 border border-neutral-700 rounded-2xl ring-[4px] focus-within:ring-neutral-500/30 focus-within:border-neutral-600 ring-transparent z-10 absolute bottom-3 left-3 w-[calc(100%-20px)] group">
267
  {think && (
268
  <div className="w-full border-b border-neutral-700 relative overflow-hidden">
269
  <header
 
263
 
264
  return (
265
  <>
266
+ <div className="bg-neutral-800 border border-neutral-700 rounded-2xl ring-[4px] focus-within:ring-neutral-500/30 focus-within:border-neutral-600 ring-transparent z-10 w-full group">
267
  {think && (
268
  <div className="w-full border-b border-neutral-700 relative overflow-hidden">
269
  <header
components/editor/deploy-button/index.tsx CHANGED
@@ -72,7 +72,7 @@ export function DeployButton({
72
  Save your Project
73
  </Button>
74
  <Button variant="sky" size="sm" className="lg:hidden">
75
- Save
76
  </Button>
77
  </div>
78
  </PopoverTrigger>
@@ -97,11 +97,11 @@ export function DeployButton({
97
  </div>
98
  </div>
99
  <p className="text-xl font-semibold text-neutral-950">
100
- Deploy your Project!
101
  </p>
102
  <p className="text-sm text-neutral-500 mt-1.5">
103
- Deploy your project to a space on the Hub. Spaces are a way to
104
- share your project with the world.
105
  </p>
106
  </header>
107
  <main className="space-y-4 p-6">
@@ -129,7 +129,7 @@ export function DeployButton({
129
  className="relative w-full"
130
  disabled={loading}
131
  >
132
- Deploy <Rocket className="size-4" />
133
  {loading && (
134
  <Loading className="ml-2 size-4 animate-spin" />
135
  )}
 
72
  Save your Project
73
  </Button>
74
  <Button variant="sky" size="sm" className="lg:hidden">
75
+ Deploy
76
  </Button>
77
  </div>
78
  </PopoverTrigger>
 
97
  </div>
98
  </div>
99
  <p className="text-xl font-semibold text-neutral-950">
100
+ Deploy as Space!
101
  </p>
102
  <p className="text-sm text-neutral-500 mt-1.5">
103
+ Save and Deploy your project to a Space on the Hub. Spaces are
104
+ a way to share your project with the world.
105
  </p>
106
  </header>
107
  <main className="space-y-4 p-6">
 
129
  className="relative w-full"
130
  disabled={loading}
131
  >
132
+ Deploy Space <Rocket className="size-4" />
133
  {loading && (
134
  <Loading className="ml-2 size-4 animate-spin" />
135
  )}
components/editor/header/index.tsx CHANGED
@@ -30,7 +30,7 @@ export function Header({
30
  children?: ReactNode;
31
  }) {
32
  return (
33
- <header className="border-b bg-slate-200 border-slate-300 dark:bg-neutral-950 dark:border-neutral-800 px-3 lg:px-6 py-2 grid grid-cols-3 sticky top-0 z-20">
34
  <div className="flex items-center justify-start gap-3">
35
  <h1 className="text-neutral-900 dark:text-white text-lg lg:text-xl font-bold flex items-center justify-start">
36
  <Image
 
30
  children?: ReactNode;
31
  }) {
32
  return (
33
+ <header className="border-b bg-slate-200 border-slate-300 dark:bg-neutral-950 dark:border-neutral-800 px-3 lg:px-6 py-2 grid grid-cols-3 z-20">
34
  <div className="flex items-center justify-start gap-3">
35
  <h1 className="text-neutral-900 dark:text-white text-lg lg:text-xl font-bold flex items-center justify-start">
36
  <Image
components/editor/index.tsx CHANGED
@@ -166,7 +166,7 @@ export const AppEditor = ({ project }: { project?: Project | null }) => {
166
  }, [currentTab]);
167
 
168
  return (
169
- <section className="h-screen bg-slate-100 dark:bg-neutral-950 flex flex-col">
170
  <Header tab={currentTab} onNewTab={setCurrentTab}>
171
  {project?._id ? (
172
  <SaveButton html={html} prompts={prompts} />
@@ -174,10 +174,13 @@ export const AppEditor = ({ project }: { project?: Project | null }) => {
174
  <DeployButton html={html} prompts={prompts} />
175
  )}
176
  </Header>
177
- <main className="bg-neutral-950 flex-1 max-lg:flex-col flex w-full">
178
  {currentTab === "chat" && (
179
  <>
180
- <div ref={editor} className="relative">
 
 
 
181
  <CopyIcon
182
  className="size-4 absolute top-2 right-5 text-neutral-500 hover:text-neutral-300 z-2 cursor-pointer"
183
  onClick={() => {
@@ -189,7 +192,7 @@ export const AppEditor = ({ project }: { project?: Project | null }) => {
189
  language="html"
190
  theme="vs-dark"
191
  className={classNames(
192
- "h-[calc(100dvh-98px)] lg:h-full bg-neutral-900 transition-all duration-200 ",
193
  {
194
  "pointer-events-none": isAiWorking,
195
  }
 
166
  }, [currentTab]);
167
 
168
  return (
169
+ <section className="h-[100dvh] bg-neutral-950 flex flex-col">
170
  <Header tab={currentTab} onNewTab={setCurrentTab}>
171
  {project?._id ? (
172
  <SaveButton html={html} prompts={prompts} />
 
174
  <DeployButton html={html} prompts={prompts} />
175
  )}
176
  </Header>
177
+ <main className="bg-neutral-950 flex-1 max-lg:flex-col flex w-full max-lg:h-[calc(100%-82px)] relative">
178
  {currentTab === "chat" && (
179
  <>
180
+ <div
181
+ ref={editor}
182
+ className="bg-neutral-900 relative flex-1 overflow-hidden h-full flex flex-col gap-2 pb-3 px-3"
183
+ >
184
  <CopyIcon
185
  className="size-4 absolute top-2 right-5 text-neutral-500 hover:text-neutral-300 z-2 cursor-pointer"
186
  onClick={() => {
 
192
  language="html"
193
  theme="vs-dark"
194
  className={classNames(
195
+ "max-lg:h-[calc(100%-82px)] h-full bg-neutral-900 transition-all duration-200 absolute left-0 top-0",
196
  {
197
  "pointer-events-none": isAiWorking,
198
  }
components/editor/preview/index.tsx CHANGED
@@ -29,6 +29,8 @@ export const Preview = ({
29
  "w-full border-l border-gray-900 h-full relative z-0 flex items-center justify-center",
30
  {
31
  "lg:p-4": currentTab !== "preview",
 
 
32
  }
33
  )}
34
  onClick={(e) => {
@@ -52,7 +54,7 @@ export const Preview = ({
52
  ref={iframeRef}
53
  title="output"
54
  className={classNames(
55
- "w-full select-none transition-all duration-200 bg-black max-lg:h-full",
56
  {
57
  "pointer-events-none": isResizing || isAiWorking,
58
  "lg:max-w-md lg:mx-auto lg:h-[80dvh] lg:!rounded-[42px] lg:border-[8px] lg:border-neutral-700 lg:shadow-2xl":
 
29
  "w-full border-l border-gray-900 h-full relative z-0 flex items-center justify-center",
30
  {
31
  "lg:p-4": currentTab !== "preview",
32
+ "max-lg:h-0": currentTab === "chat",
33
+ "max-lg:h-full": currentTab === "preview",
34
  }
35
  )}
36
  onClick={(e) => {
 
54
  ref={iframeRef}
55
  title="output"
56
  className={classNames(
57
+ "w-full select-none transition-all duration-200 bg-black",
58
  {
59
  "pointer-events-none": isResizing || isAiWorking,
60
  "lg:max-w-md lg:mx-auto lg:h-[80dvh] lg:!rounded-[42px] lg:border-[8px] lg:border-neutral-700 lg:shadow-2xl":
components/user-menu/index.tsx CHANGED
@@ -20,7 +20,7 @@ export const UserMenu = ({ className }: { className?: string }) => {
20
  <DropdownMenu>
21
  <DropdownMenuTrigger asChild>
22
  <Button variant="ghost" className={`${className}`}>
23
- <Avatar className="size-7 mr-1">
24
  <AvatarImage src={user?.avatarUrl} alt="@shadcn" />
25
  <AvatarFallback className="text-sm">
26
  {user?.fullname?.charAt(0).toUpperCase() ?? "E"}
 
20
  <DropdownMenu>
21
  <DropdownMenuTrigger asChild>
22
  <Button variant="ghost" className={`${className}`}>
23
+ <Avatar className="size-8 mr-1">
24
  <AvatarImage src={user?.avatarUrl} alt="@shadcn" />
25
  <AvatarFallback className="text-sm">
26
  {user?.fullname?.charAt(0).toUpperCase() ?? "E"}