Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/routing #17

Merged
merged 2 commits into from
Aug 31, 2024
Merged

Feature/routing #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
90d12f6
Added svelte-routing
coolestnick Aug 31, 2024
1536196
Merge branch 'development' of https://github.com/SpaceTurtle-Dao/Meme…
coolestnick Aug 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ lerna-debug.log*
node_modules
dist
dist-ssr
package-lock.json
*.local

# Editor directories and files
Expand Down
5 changes: 3 additions & 2 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
"autoprefixer": "^10.4.20",
"svelte": "^4.2.18",
"svelte-check": "^3.8.5",
"svelte-routing": "^2.13.0",
"tailwindcss": "^3.4.9",
"tslib": "^2.6.3",
"typescript": "^5.5.3",
Expand All @@ -27,7 +28,6 @@
"clsx": "^2.1.1",
"lucide-svelte": "^0.436.0",
"mode-watcher": "^0.4.1",
"svelte-routing": "^2.13.0",
"svelte-sonner": "^0.3.27",
"tailwind-merge": "^2.5.2",
"tailwind-variants": "^0.2.1"
Expand Down
83 changes: 72 additions & 11 deletions src/App.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,79 @@
<script>
import ProfileView from "./lib/components/ProfileView.svelte";
import "./app.css";
import Navbar from "$lib/components/Navbar.svelte";
import UserProfile from "./routes/userprofile/UserProfile.svelte";
<script lang="ts">
import { Router, Route } from "svelte-routing";
import "./app.css";
import Navbar from "$lib/components/Navbar.svelte";
import ProfileView from "$lib/components/ProfileView.svelte";
import UserProfile from "$lib/components/UserProfile.svelte";
import { Home as HomeIcon, Search, Bell, User, MoreHorizontal, Plus } from 'lucide-svelte';

export let url = "";

const menuItems = [
{ icon: HomeIcon, label: 'Home', href: '/' },
{ icon: Search, label: 'Explore', href: '/explore' },
{ icon: Bell, label: 'Notifications', href: '/UserProfile' },
{ icon: User, label: 'Profile', href: '/profile' },
];
</script>

<Navbar />
<main class="pt-16">
<ProfileView />
<UserProfile />
</main>
<Router {url}>
<div class="flex h-screen overflow-hidden">
<aside class="w-64 bg-white shadow-lg flex flex-col justify-between p-4">
<div class="space-y-4">
<div class="p-2">
<svg class="w-8 h-8 text-purple-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path>
</svg>
</div>
<nav>
<ul class="space-y-2">
{#each menuItems as item}
<li>
<a href={item.href} class="flex items-center p-2 rounded-full hover:bg-purple-100 transition-colors duration-200">
<svelte:component this={item.icon} class="w-6 h-6 mr-4 text-purple-500" />
<span class="text-lg font-medium text-gray-700">{item.label}</span>
</a>
</li>
{/each}
<li>
<button class="flex items-center p-2 rounded-full hover:bg-purple-100 transition-colors duration-200">
<MoreHorizontal class="w-6 h-6 mr-4 text-purple-500" />
<span class="text-lg font-medium text-gray-700">More</span>
</button>
</li>
</ul>
</nav>
<button class="w-full bg-purple-500 text-white rounded-full py-3 font-bold text-lg hover:bg-purple-600 transition-colors duration-200 flex items-center justify-center">
<Plus class="w-5 h-5 mr-2" />
Post
</button>
</div>
<div class="p-4">
<button class="flex items-center space-x-2">
<div class="w-10 h-10 rounded-full bg-purple-200 flex items-center justify-center text-purple-500 font-bold text-xl">
N
</div>
<div class="flex-grow text-left">
<p class="font-semibold text-gray-800">Nickzz</p>
<p class="text-sm text-gray-500">@Nickzz_AO</p>
</div>
<MoreHorizontal class="w-5 h-5 text-gray-500" />
</button>
</div>
</aside>

<main class="flex-1 overflow-y-auto bg-[#FFF0F5]">
<Navbar />
<div class="container mx-auto px-4 pt-16">
<Route path="/profile" component={ProfileView} />
<Route path="/UserProfile" component={UserProfile} />
</div>
</main>
</div>
</Router>

<style>
:global(body) {
background-color: #FFF0F5;
@apply bg-[#FFF0F5];
}
</style>
10 changes: 0 additions & 10 deletions src/lib/Counter.svelte
View file
Open in desktop

This file was deleted.

3 changes: 2 additions & 1 deletion src/lib/components/ProfileView.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@

onMount(() => {
const ctx = document.getElementById('marketCapChart');
//@ts-ignore
chart = new Chart(ctx, {
type: 'line',
data: {
Expand Down Expand Up @@ -146,7 +147,7 @@
</div>
<Button size="sm" class="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-pink-500 hover:to-purple-500 text-white transition-all duration-300">
<Rocket class="w-4 h-4 mr-2" />
Buy Tokens
Pump
</Button>
</CardFooter>
</Card>
Expand Down
77 changes: 77 additions & 0 deletions src/lib/components/SideBar.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
<script lang="ts">
import { Router, Link, Route } from 'svelte-routing';
import { Home, Search, Bell, Mail, Bookmark, Users, User, MoreHorizontal, Plus } from 'lucide-svelte';

// Import your components
import UserProfile from './UserProfile.svelte';

export let url = '';

const menuItems = [
{ icon: Home, label: 'Home', href: '/' },
{ icon: Search, label: 'Explore', href: '/explore' },
{ icon: Bell, label: 'Notifications', href: '/notifications' },
{ icon: User, label: 'Profile', href: '/UserProfile' },
];
</script>

<Router {url}>
<div class="flex h-screen">
<aside class="w-1/4 bg-white shadow-lg flex flex-col justify-between p-4">
<div class="space-y-4">
<div class="p-2">
<svg class="w-8 h-8 text-purple-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path>
</svg>
</div>
<nav>
<ul class="space-y-2">
{#each menuItems as item}
<li>
<Link to={item.href} class="flex items-center p-2 rounded-full hover:bg-purple-100 transition-colors duration-200">
<svelte:component this={item.icon} class="w-6 h-6 mr-4 text-purple-500" />
<span class="text-lg font-medium text-gray-700">{item.label}</span>
</Link>
</li>
{/each}
<li>
<button class="flex items-center p-2 rounded-full hover:bg-purple-100 transition-colors duration-200">
<MoreHorizontal class="w-6 h-6 mr-4 text-purple-500" />
<span class="text-lg font-medium text-gray-700">More</span>
</button>
</li>
</ul>
</nav>
<button class="w-full bg-purple-500 text-white rounded-full py-3 font-bold text-lg hover:bg-purple-600 transition-colors duration-200 flex items-center justify-center">
<Plus class="w-5 h-5 mr-2" />
Post
</button>
</div>
<div class="p-4">
<button class="flex items-center space-x-2">
<div class="w-10 h-10 rounded-full bg-purple-200 flex items-center justify-center text-purple-500 font-bold text-xl">
N
</div>
<div class="flex-grow text-left">
<p class="font-semibold text-gray-800">Nickzz</p>
<p class="text-sm text-gray-500">@Nickzz_AO</p>
</div>
<MoreHorizontal class="w-5 h-5 text-gray-500" />
</button>
</div>
</aside>

<main class="flex-1 p-4 bg-[#FFF0F5] overflow-auto">
<!-- <Route path="/" component={HomeComponent} />
<Route path="/explore" component={ExploreComponent} />
<Route path="/notifications" component={NotificationsComponent} /> -->
<Route path="/UserProfile" component={UserProfile} />
</main>
</div>
</Router>

<style>
:global(body) {
@apply bg-[#FFF0F5];
}
</style>
84 changes: 84 additions & 0 deletions src/lib/components/UserProfile.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
<script lang="ts">
import { onMount } from 'svelte';
import { Card, CardContent, CardHeader, CardTitle } from "$lib/components/ui/ui/card";
import { Avatar, AvatarFallback, AvatarImage } from "$lib/components/ui/ui/avatar";
import { Button } from "$lib/components/ui/ui/button";
import { Input } from "$lib/components/ui/ui/input";
import { Textarea } from "$lib/components/ui/ui/textarea";
import { Label } from "$lib/components/ui/ui/label";
import { Camera } from "lucide-svelte";

let username = '';
let displayName = '';
let bio = '';
let avatarUrl = '';

//@ts-ignore
function handleFileUpload(event) {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
//@ts-ignore
avatarUrl = e.target.result;
};
reader.readAsDataURL(file);
}
}

function handleSubmit() {
// Here you would typically send the profile data to your backend
console.log({ username, displayName, bio, avatarUrl });
alert('Profile created successfully!');
}
</script>

<div class="max-w-2xl mx-auto p-4">
<Card class="overflow-hidden transition-all duration-300 hover:shadow-xl">
<CardHeader class="bg-gradient-to-r from-purple-500 to-pink-500 text-white">
<CardTitle class="text-2xl font-bold">Create Your Profile</CardTitle>
</CardHeader>
<CardContent class="p-6 space-y-6">
<div class="flex flex-col items-center space-y-4">
<Avatar class="h-32 w-32 ring-4 ring-purple-500">
{#if avatarUrl}
<AvatarImage src={avatarUrl} alt={displayName} />
{:else}
<AvatarFallback class="bg-purple-100 text-purple-500 text-4xl flex items-center justify-center">
<Camera size={48} />
</AvatarFallback>
{/if}
</Avatar>
<Label for="avatar-upload" class="cursor-pointer bg-purple-500 hover:bg-purple-600 text-white py-2 px-4 rounded-full transition-colors duration-300">
Upload Profile Picture
</Label>
<Input type="file" id="avatar-upload" class="hidden" accept="image/*" on:change={handleFileUpload} />
</div>

<div class="space-y-4">
<div>
<Label for="username">Username</Label>
<Input type="text" id="username" bind:value={username} placeholder="@username" />
</div>
<div>
<Label for="displayName">Display Name</Label>
<Input type="text" id="displayName" bind:value={displayName} placeholder="Your Name" />
</div>
<div>
<Label for="bio">Bio</Label>
<Textarea id="bio" bind:value={bio} placeholder="Tell us about yourself..." />
</div>
</div>

<Button class="w-full bg-gradient-to-r from-purple-500 to-pink-500 hover:from-pink-500 hover:to-purple-500 text-white transition-all duration-300" on:click={handleSubmit}>
Create Profile
</Button>
</CardContent>
</Card>
</div>

<style>
:global(body) {
background-color: #FCE4EC;
}
</style>
29 changes: 29 additions & 0 deletions src/lib/components/ui/ui/input/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import Root from "./input.svelte";

export type FormInputEvent<T extends Event = Event> = T & {
currentTarget: EventTarget & HTMLInputElement;
};
export type InputEvents = {
blur: FormInputEvent<FocusEvent>;
change: FormInputEvent<Event>;
click: FormInputEvent<MouseEvent>;
focus: FormInputEvent<FocusEvent>;
focusin: FormInputEvent<FocusEvent>;
focusout: FormInputEvent<FocusEvent>;
keydown: FormInputEvent<KeyboardEvent>;
keypress: FormInputEvent<KeyboardEvent>;
keyup: FormInputEvent<KeyboardEvent>;
mouseover: FormInputEvent<MouseEvent>;
mouseenter: FormInputEvent<MouseEvent>;
mouseleave: FormInputEvent<MouseEvent>;
mousemove: FormInputEvent<MouseEvent>;
paste: FormInputEvent<ClipboardEvent>;
input: FormInputEvent<InputEvent>;
wheel: FormInputEvent<WheelEvent>;
};

export {
Root,
//
Root as Input,
};
Loading
Loading