Skip to content

Commit

Permalink
Feat: completed contact page and updated chat sockets
Browse files Browse the repository at this point in the history
  • Loading branch information
@gagansuie
gagansuie committed Feb 8, 2023
1 parent 37e3cfb commit 4b226e0
Show file tree
Hide file tree
Showing 10 changed files with 84 additions and 192 deletions.
12 changes: 12 additions & 0 deletions src/lib/assets/icons/contact/IconEmail.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions src/lib/assets/icons/contact/IconSocialDiscordInverse.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 2 additions & 4 deletions src/lib/components/Browse/CreateChannelDrawer.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,6 @@
const addChannel = async () => {
const channel = await post('/channel', newChannel)
await put(`/users/host-channels?hostChannelId=${channel._id}`)
//TODO: set currentChannel
goto(`/channel/${channel._id}`)
}
</script>
Expand Down Expand Up @@ -92,7 +91,7 @@
Please hide all sensitive data before going live.
</p>

<div class="flex flex-row justify-center w-full">
<!-- <div class="flex flex-row justify-center w-full">
<div class="card w-40 shadow-xl">
<div class="card-body items-center max-h-40 {showThumbnail ? '!p-3' : ''}">
{#if showThumbnail}
Expand All @@ -108,8 +107,7 @@
bind:this={fileuploader}
on:change={fileupload}
type="file"
class="file-input file-input-bordered file-input-primary w-full mt-5" />

class="file-input file-input-bordered file-input-primary w-full mt-5" /> -->
<input
bind:value={newChannel.title}
type="text"
Expand Down
0 src/lib/components/Channel/Stream.svelte → ...b/components/Channel/ChannelStream.svelte
View file
File renamed without changes.
71 changes: 6 additions & 65 deletions src/lib/components/Chat/ChatDrawer.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,10 @@
<script lang="ts">
import { onMount } from 'svelte'
import ChatInput from '$lib/components/Chat/ChatInput.svelte'
import ChatMessage from '$lib/components/Chat/ChatMessage.svelte'
export let showDrawer: boolean
export let channel: any = undefined
let username = 'Gagan',
message =
'Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World',
role = 'Host'
let sender = { username, message, role }
let youSender = { username: 'Singh', message: 'hewrewrwe ehe', role: 'You' }
let modSender = { username: 'Simmi', message: 'hewe rew rwe rwhe', role: 'Mod' }
let otherSender = { username: 'Arjan', message: 'he wer wer wehe', role: 'Rando' }
onMount(async () => {
// if (!$tags.length) {
// await getTags()
// }
})
const sendMessage = async () => {
// await createChannel(newChannel)
}
export let showDrawer: boolean,
channel: any = undefined,
chatHistory: any = []
</script>

<div class="drawer drawer-end absolute w-full z-20 top-0 right-0">
Expand All @@ -35,51 +16,11 @@
<p class="p-3 text-xl mb-5 pb-2 border-purple-500 font-semibold border-b-2">
{channel.title || 'Chat'}
</p>

<div class="flex flex-col-reverse p-3 grow h-80 overflow-y-auto">
<ChatMessage bind:sender />
<ChatMessage bind:sender />
<ChatMessage bind:sender />
<ChatMessage bind:sender={youSender} />
<ChatMessage bind:sender />
<ChatMessage bind:sender={modSender} />
<ChatMessage bind:sender />
<ChatMessage bind:sender={otherSender} />
<ChatMessage bind:sender />
<ChatMessage bind:sender={youSender} />
<ChatMessage bind:sender />
<ChatMessage bind:sender={modSender} />
<ChatMessage bind:sender />
<ChatMessage bind:sender={otherSender} />
<ChatMessage bind:sender />
<ChatMessage bind:sender />
<ChatMessage bind:sender />
<ChatMessage bind:sender={youSender} />
<ChatMessage bind:sender />
<ChatMessage bind:sender={modSender} />
<ChatMessage bind:sender />
<ChatMessage bind:sender={otherSender} />
<ChatMessage bind:sender />
<ChatMessage bind:sender={youSender} />
<ChatMessage bind:sender />
<ChatMessage bind:sender={modSender} />
<ChatMessage bind:sender />
<ChatMessage bind:sender={otherSender} />
<ChatMessage bind:sender />
<ChatMessage bind:sender />
<ChatMessage bind:sender />
<ChatMessage bind:sender={youSender} />
<ChatMessage bind:sender />
<ChatMessage bind:sender={modSender} />
<ChatMessage bind:sender />
<ChatMessage bind:sender={otherSender} />
<ChatMessage bind:sender={youSender} />
<ChatMessage bind:sender />
<ChatMessage bind:sender={modSender} />
<ChatMessage bind:sender />
<ChatMessage bind:sender={otherSender} />
{#each chatHistory as sender}
<ChatMessage bind:sender />
{/each}
</div>

<div class="flex flex-row mt-auto p-3 w-full">
<ChatInput />
</div>
Expand Down
21 changes: 12 additions & 9 deletions src/lib/components/Chat/ChatInput.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@
<script lang="ts">
import IconChatAttachment from '$lib/assets/icons/chat/IconChatAttachment.svelte'
import IconChatEmoji from '$lib/assets/icons/chat/IconChatEmoji.svelte'
import IconChatGif from '$lib/assets/icons/chat/IconChatGif.svelte'
import IconChatCode from '$lib/assets/icons/chat/IconChatCode.svelte'
// import IconChatAttachment from '$lib/assets/icons/chat/IconChatAttachment.svelte'
// import IconChatEmoji from '$lib/assets/icons/chat/IconChatEmoji.svelte'
// import IconChatGif from '$lib/assets/icons/chat/IconChatGif.svelte'
// import IconChatCode from '$lib/assets/icons/chat/IconChatCode.svelte'
import IconChatSendMessage from '$lib/assets/icons/chat/IconChatSendMessage.svelte'
const sendMessage = async () => {
// await createChannel(newChannel)
}
</script>

<form class="rounded-lg bg-base-100 p-2 w-96">
<label for="chat" class="sr-only">Your message</label>
<button
<!-- <button
type="button"
class="inline-flex justify-center p-2 text-gray-500 rounded-lg cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600">
<IconChatAttachment />
Expand All @@ -31,13 +34,13 @@
class="p-2 text-gray-500 rounded-lg cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600">
<IconChatCode />
<span class="sr-only">Add code snippet</span>
</button>
</button> -->
<div class="flex items-center py-2 rounded-lg">
<textarea
id="chat"
rows="1"
class="focus:h-32 block mx-2 p-2.5 w-full text-sm textarea textarea-bordered textarea-secondary"
placeholder="Your message..." />
class="block mx-2 p-2.5 w-full text-sm textarea textarea-bordered textarea-secondary"
placeholder="Your message..." /><!--focus:h-32 -->
<button
type="submit"
class="inline-flex justify-center p-2 text-secondary rounded-full cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:hover:text-white dark:hover:bg-gray-600">
Expand Down
2 changes: 1 addition & 1 deletion src/routes/+layout.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@
</script>

<svelte:head>
<link rel="stylesheet" href="fonts/montserrat.css" />
<link rel="stylesheet" href="/fonts/montserrat.css" />
{@html `<script>
const theme = localStorage.getItem('theme') || 'dark';
document.querySelector('html').dataset.theme = theme;
Expand Down
5 changes: 3 additions & 2 deletions src/routes/channel/[channelId]/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
export let data: PageData
$: chatHistory = []
$: ({ post } = data)
let showDrawer = false
let channelSocket: WebSocket
Expand Down Expand Up @@ -38,7 +39,7 @@
})
})
onDestroy(() => channelSocket.close())
onDestroy(() => channelSocket?.close())
</script>

<div class="flex flex-col md:flex-row gap-4 py-5 pl-5">
Expand All @@ -53,6 +54,6 @@
</div>

{#if showDrawer}
<ChatDrawer bind:showDrawer bind:channel={post} />
<ChatDrawer bind:showDrawer bind:channel={post} bind:chatHistory />
{/if}
</div>
14 changes: 6 additions & 8 deletions src/routes/contact/+page.server.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,9 @@ import { error } from '@sveltejs/kit'
import type { PageServerLoad } from './$types'

export const load = (async ({ params }) => {
// const post = null

// if (post) {
// return post
// }

// throw error(404, 'Not found')
}) satisfies PageServerLoad
// const post = null
// if (post) {
// return post
// }
// throw error(404, 'Not found')
}) satisfies PageServerLoad
140 changes: 37 additions & 103 deletions src/routes/contact/+page.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,107 +1,41 @@
<div class="container mx-auto pt-16">
<div class="lg:flex">
<div
class="xl:w-2/5 lg:w-2/5 bg-primary py-16 xl:rounded-bl rounded-tl rounded-tr xl:rounded-tr-none">
<div class="xl:w-5/6 xl:px-0 px-8 mx-auto">
<h1 class="xl:text-4xl text-3xl pb-4 text-white font-bold">Get in touch</h1>
<p class="text-xl text-white pb-8 leading-relaxed font-normal lg:pr-4">
Got a question about us? Are you interested in partnering with us? Have some suggestions
or just want to say Hi? Just contact us. We are here to asset you.
</p>
<div class="flex items-center">
<div aria-label="email icon" role="img">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="white"
class="w-6 h-6">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
</svg>
</div>
<p class="pl-4 text-white text-base">support@codecrow.io</p>
</div>
<p class="text-lg text-white pt-10 tracking-wide">
16192 Coastal Highway
<br />
Lewes, DE 19958 United States
</p>
<div class=" pt-16">
<a
href="/careers"
class="text-white font-bold tracking-wide underline focus:outline-none focus:ring-2 focus:ring-white ">
View Job Openings</a>
</div>
</div>
<script lang="ts">
import IconEmail from '$lib/assets/icons/contact/IconEmail.svg'
import IconSocialDiscordInverse from '$lib/assets/icons/contact/IconSocialDiscordInverse.svg'
</script>

<div class="m-10 lg:w-2/5 bg-primary p-16 rounded-md">
<h1 class="text-4xl pb-4 text-white font-bold">Get in touch</h1>
<p class="text-xl text-white pb-8 leading-relaxed font-normal pr-4">
Got a question about us? Are you interested in partnering with us? Have some suggestions or just
want to say hi? Just contact us. We are here to asset you.
</p>
<div class="flex items-center">
<div aria-label="email icon" role="img">
<img class="w-7" src={IconEmail} alt="" />
</div>
<div class="xl:w-3/5 lg:w-3/5 h-full pt-5 pb-5 xl:pr-5 xl:pl-0 rounded-tr rounded-br">
<form id="contact" class="py-4 px-8 rounded-tr rounded-br">
<h1 class="text-4xl font-extrabold mb-6">Enter Details</h1>
<div class="block xl:flex w-full flex-wrap mb-6">
<div class="w-2/4 max-w-xs mb-6 xl:mb-0">
<div class="flex flex-col">
<label
for="full_name"
class="text-sm font-semibold leading-tight tracking-normal mb-2">Full Name</label>
<input
required
id="full_name"
name="full_name"
type="text"
class="input input-bordered input-primary w-64 h-10 flex"
placeholder="Elizabeth Caledonia"
aria-label="enter your full name input" />
</div>
</div>
<div class="w-2/4 max-w-xs xl:flex">
<div class="flex flex-col">
<label for="email" class=" text-sm font-semibold leading-tight tracking-normal mb-2"
>Email</label>
<input
required
id="email"
name="email"
type="email"
class="input input-bordered input-primary w-64 h-10 flex"
placeholder="example@email.com"
aria-label="enter your email input" />
</div>
</div>
</div>
<div class="flex w-full flex-wrap">
<div class="w-2/4 max-w-xs">
<div class="flex flex-col">
<label for="subject" class="text-sm font-semibold leading-tight tracking-normal mb-2"
>Subject</label>
<input
required
id="subject"
name="subject"
type="tel"
class="input input-bordered input-primary w-64 h-10 flex"
placeholder="Subject"
aria-label="enter a subject" />
</div>
</div>
</div>
<div class="w-full mt-6">
<div class="flex flex-col">
<label class="text-sm font-semibold mb-2" for="message">Message</label>
<textarea
placeholder=""
name="message"
class="textarea textarea-bordered textarea-primary flex mb-4 py-2 px-3"
rows="8"
id="message"
aria-label="enter your message input" />
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
<p class="pl-4 text-white text-base">
<a class="link" href="mailto: support@codecrow.io" target="_blank" rel="noreferrer"
>support@codecrow.io</a>
</p>
</div>
<div class="flex items-center mt-2">
<div aria-label="email icon" role="img">
<img class="w-7" src={IconSocialDiscordInverse} alt="" />
</div>
<p class="pl-4 text-white text-base">
<a class="link" href="https://discord.gg/CodeCrow" target="_blank" rel="noreferrer"
>Create a support ticket in our discord</a>
</p>
</div>
<p class="text-lg text-white pt-10 tracking-wide">
16192 Coastal Highway
<br />
Lewes, DE 19958 United States
</p>
<div class=" pt-16">
<a
href="/careers"
class="text-white font-bold tracking-wide underline focus:outline-none focus:ring-2 focus:ring-white ">
View Job Openings</a>
</div>
</div>

0 comments on commit 4b226e0

Please sign in to comment.