-
Notifications
You must be signed in to change notification settings - Fork 19
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: add signIn * feat: add connect service * feat: add login page
- Loading branch information
1 parent
1f03213
commit 6e39e25
Showing
22 changed files
with
562 additions
and
95 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -8,6 +8,7 @@ | |
"dyld", | ||
"fullscreen", | ||
"headlessui", | ||
"Icdbb", | ||
"icns", | ||
"INFINI", | ||
"inputbox", | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,52 +1,70 @@ | ||
import { useState } from "react"; | ||
import { Cloud } from "lucide-react"; | ||
|
||
import { UserProfile } from "./UserProfile"; | ||
import { DataSourcesList } from "./DataSourcesList"; | ||
import { Sidebar } from "./Sidebar"; | ||
import { ConnectService } from "./ConnectService"; | ||
|
||
export default function CocoCloud() { | ||
const [isLogin, setIsLogin] = useState(true); | ||
const [isConnect, setIsConnect] = useState(true); | ||
|
||
return ( | ||
<div className="min-h-screen bg-gray-50"> | ||
<div className="max-w-4xl mx-auto px-4 py-8"> | ||
<div className="flex items-center justify-between mb-8"> | ||
<div className="flex items-center space-x-3"> | ||
<div className="flex items-center space-x-2 px-4 py-2 bg-white rounded-md border border-gray-200"> | ||
<Cloud className="w-5 h-5 text-blue-500" /> | ||
<span className="font-medium">Coco Cloud</span> | ||
<div className="flex min-h-screen bg-gray-50"> | ||
<Sidebar /> | ||
|
||
<main className="flex-1"> | ||
{isConnect ? <div className="max-w-4xl mx-auto px-4 py-8"> | ||
<div className="flex items-center justify-between mb-8"> | ||
<div className="flex items-center space-x-3"> | ||
<div className="flex items-center space-x-2 px-4 py-2 bg-white rounded-md border border-gray-200"> | ||
<Cloud className="w-5 h-5 text-blue-500" /> | ||
<span className="font-medium">Coco Cloud</span> | ||
</div> | ||
<span className="px-3 py-1 text-sm text-blue-600 bg-blue-50 rounded-md"> | ||
Available | ||
</span> | ||
</div> | ||
<span className="px-3 py-1 text-sm text-blue-600 bg-blue-50 rounded-md"> | ||
Available | ||
</span> | ||
<button className="p-2 text-gray-500 hover:text-gray-700"> | ||
<Cloud className="w-5 h-5" /> | ||
</button> | ||
</div> | ||
<button className="p-2 text-gray-500 hover:text-gray-700"> | ||
<Cloud className="w-5 h-5" /> | ||
</button> | ||
</div> | ||
<div className="mb-8"> | ||
<div className="text-sm text-gray-500 mb-4"> | ||
<span>Service provision: INFINI Labs</span> | ||
<span className="mx-4">|</span> | ||
<span>Version Number: v2.3.0</span> | ||
<span className="mx-4">|</span> | ||
<span>Update time: 2023-05-12</span> | ||
|
||
<div className="mb-8"> | ||
<div className="text-sm text-gray-500 mb-4"> | ||
<span>Service provision: INFINI Labs</span> | ||
<span className="mx-4">|</span> | ||
<span>Version Number: v2.3.0</span> | ||
<span className="mx-4">|</span> | ||
<span>Update time: 2023-05-12</span> | ||
</div> | ||
<p className="text-gray-600 leading-relaxed"> | ||
Coco Cloud provides users with a cloud storage and data | ||
integration platform that supports account registration and data | ||
source management. Users can integrate multiple data sources (such | ||
as Google Drive, yuque, GitHub, etc.), easily access and search | ||
for files, documents and codes across platforms, and achieve | ||
efficient data collaboration and management. | ||
</p> | ||
</div> | ||
|
||
<div className="mb-8"> | ||
<h2 className="text-lg font-medium text-gray-900 mb-4"> | ||
Account Information | ||
</h2> | ||
{isLogin ? ( | ||
<UserProfile name="Rain" email="an121245@gmail.com" /> | ||
) : ( | ||
<button className="px-6 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors"> | ||
Login | ||
</button> | ||
)} | ||
</div> | ||
<p className="text-gray-600 leading-relaxed"> | ||
Coco Cloud provides users with a cloud storage and data integration | ||
platform that supports account registration and data source | ||
management. Users can integrate multiple data sources (such as | ||
Google Drive, yuque, GitHub, etc.), easily access and search for | ||
files, documents and codes across platforms, and achieve efficient | ||
data collaboration and management. | ||
</p> | ||
</div> | ||
<div> | ||
<h2 className="text-lg font-medium text-gray-900 mb-4">Account Information</h2> | ||
<button className="px-6 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors"> | ||
Login | ||
</button> | ||
</div> | ||
|
||
<UserProfile name="Rain" email="an121245@gmail.com" /> | ||
<DataSourcesList /> | ||
</div> | ||
{isLogin ? <DataSourcesList /> : null } | ||
</div>: <ConnectService />} | ||
</main> | ||
</div> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,53 @@ | ||
import React, { useState } from 'react'; | ||
import { ArrowLeft } from 'lucide-react'; | ||
|
||
export function ConnectService() { | ||
const [sourceName, setSourceName] = useState(''); | ||
|
||
const handleSubmit = (e: React.FormEvent) => { | ||
e.preventDefault(); | ||
console.log('Connecting Google Drive with name:', sourceName); | ||
}; | ||
|
||
return ( | ||
<div className="p-8 max-w-4xl"> | ||
<div className="mb-8"> | ||
<button className="flex items-center text-gray-600 hover:text-gray-900"> | ||
<ArrowLeft className="w-5 h-5 mr-2" /> | ||
<span>Connect Google Drive</span> | ||
</button> | ||
</div> | ||
|
||
<div className="mb-8"> | ||
<p className="text-gray-600"> | ||
Coco needs to obtain authorization from your Google Drive account | ||
</p> | ||
</div> | ||
|
||
<form onSubmit={handleSubmit} className="space-y-6"> | ||
<div> | ||
<label htmlFor="sourceName" className="block text-sm font-medium text-gray-700 mb-1"> | ||
Data Source Name | ||
</label> | ||
<input | ||
type="text" | ||
id="sourceName" | ||
value={sourceName} | ||
onChange={(e) => setSourceName(e.target.value)} | ||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" | ||
placeholder="Your Google Drive" | ||
/> | ||
</div> | ||
|
||
<div className="flex justify-end"> | ||
<button | ||
type="submit" | ||
className="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors" | ||
> | ||
Save | ||
</button> | ||
</div> | ||
</form> | ||
</div> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
import { Cloud, Plus } from "lucide-react"; | ||
|
||
export function Sidebar() { | ||
return ( | ||
<div className="w-64 border-r border-gray-200 bg-white"> | ||
<div className="p-4"> | ||
<div className="flex items-center space-x-2 px-3 py-2 bg-blue-50 text-blue-600 rounded-lg mb-6"> | ||
<Cloud className="w-5 h-5" /> | ||
<span className="font-medium">Coco Cloud</span> | ||
<div className="flex-1" /> | ||
<button className="text-blue-600 hover:text-blue-700"> | ||
<Cloud className="w-4 h-4" /> | ||
</button> | ||
</div> | ||
|
||
<div className="space-y-2"> | ||
<div className="text-sm font-medium text-gray-500 px-3 mb-2"> | ||
Third-party services | ||
</div> | ||
|
||
<button className="w-full flex items-center justify-center p-2 border-2 border-dashed border-gray-200 rounded-lg text-gray-400 hover:text-gray-600 hover:border-gray-300"> | ||
<Plus className="w-5 h-5" /> | ||
</button> | ||
</div> | ||
</div> | ||
</div> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.