classroomio/src/routes/index.svelte

<script>
	import { stores } from "@sapper/app";
	import AddComment20 from "carbon-icons-svelte/lib/AddComment20";
	import Vote from "../components/Vote.svelte";
	import Space from "../components/Space.svelte";
	import HashTags from "../components/HashTags.svelte";

	function getDiscussion(filterBy, allDiscussions) {
		switch (filterBy) {
			case "popular":
				return allDiscussions.filter((a, i) => i >= 0 && i < 2);
			case "recent":
				return allDiscussions.filter((a, i) => i >= 2 && i < 5);
			case "upvoted":
				return allDiscussions.filter((a, i) => i > 4 && i < 8);
			default:
				return allDiscussions;
		}
	}

	const { page } = stores();
	let filterBy = "";
	let discussions = [];

	$: filterBy = $page.query.filter || "popular";

	const allDiscussions = [
		{
			id: 1,
			title: "How do I pass Anicimov?",
			author: {
				name: "rotimibest",
			},
			tags: ["ибэит", "икс"],
			answered: false,
			comments: 10,
			votes: 10,
		},
		{
			id: 2,
			title:
				"Where do I find the nearest restaurant. Where do I find the nearest restaurant?. Where do I find the nearest restaurant? Where do I find the nearest restaurant?",
			author: {
				name: "attronaldo",
			},
			tags: ["иибрт", "иее"],
			answered: false,
			comments: 2,
			votes: 2,
		},
		{
			id: 3,
			title: "Who is Nikolenko?",
			author: {
				name: "donald",
			},
			tags: ["ибэит", "иее", "иибрт", "ИПИГ"],
			answered: false,
			comments: 10,
			votes: 10,
		},
		{
			id: 4,
			title: "Archive discussion button",
			author: {
				name: "acharlesvv",
			},
			tags: [
				"ИЭКСУ",
				"ИМБТ",
				"ИМИ",
				"ИПТДМ",
				"ИИИР",
				"ГФ",
				"ХТФ",
				"ИДЗО",
				"УИИ",
				"УНИ",
			],
			answered: false,
			comments: 15,
			votes: 15,
		},
		{
			id: 1,
			title: "How do I pass Anicimov?",
			author: {
				name: "rotimibest",
			},
			tags: ["ибэит", "икс"],
			answered: false,
			comments: 7,
			votes: 7,
		},
		{
			id: 2,
			title: "Where do I find the nearest restaurant?",
			author: {
				name: "attronaldo",
			},
			tags: ["иибрт", "иее"],
			answered: false,
			comments: 4,
			votes: 4,
		},
		{
			id: 3,
			title: "Who is Nikolenko?",
			author: {
				name: "donald",
			},
			tags: ["ибэит", "иее", "иибрт", "ИПИГ"],
			answered: false,
			comments: 100,
			votes: 100,
		},
		{
			id: 4,
			title: "Archive discussion button",
			author: {
				name: "acharlesvv",
			},
			tags: [
				"ИЭКСУ",
				"ИМБТ",
				"ИМИ",
				"ИПТДМ",
				"ИИИР",
				"ГФ",
				"ХТФ",
				"ИДЗО",
				"УИИ",
				"УНИ",
			],
			answered: false,
			comments: 5,
			votes: 5,
		},
	];

	$: discussions = getDiscussion(filterBy, allDiscussions);
</script>

<style>
	.root {
		max-width: 600px;
		margin: 0 auto;
		border-left: 1px solid #eaecef;
		border-right: 1px solid #eaecef;
	}

	.root .header {
		border-bottom: 1px solid #eaecef;
		padding: 15px;
	}

	.root .title {
		font-size: 20px;
	}
	.discussion-box {
		/* border: 1px solid #eaecef; */
		display: flex;
    align-items: flex-start;
    padding: 10px 15px;
    /* border-radius: 10px; */
    margin: 0px auto;
    border-bottom: 1px solid #e2e8f0;
	}

	h4 {
		font-size: 16px;
		font-weight: 900;
		word-break: break-word;
		overflow-wrap: break-word;
		margin: 0;
	}

	.discussion-topic-author {
		margin-right: 20px;
	}
	.discussion-topic-author span {
		color: #586069;
		font-size: 12px;
	}

	.active {
		position: relative;
		display: inline-block;
	}

	.active::after {
		position: absolute;
		content: "";
		width: 100%;
		height: 3px;
		background-color: #3182ce;
		display: block;
	}
</style>

<svelte:head>
	<title>Unidiscuss - Help students in your university</title>
</svelte:head>
<div class="root md:w-3/4 mx-auto md:mb-20">
	<div class="header flex justify-between mb-2">
		<h4 class="title">Разговоры 😉😁</h4>
		<div class="flex justify-evenly items-center">
			<a
				class="mr-5 text-sm {filterBy === 'popular' && 'active'}"
				href="?filter=popular">
				Popular
			</a>
			<a
				class="mr-5 text-sm {filterBy === 'recent' && 'active'}"
				href="?filter=recent">
				Recent
			</a>
			<a
				class="mr-5 text-sm {filterBy === 'upvoted' && 'active'}"
				href="?filter=upvoted">
				Upvoted
			</a>
		</div>
	</div>
	{#each discussions as discussion}
		<div class="discussion-box">
			<Vote value={discussion.votes} />
			<div class="discussion-topic-author">
				<h4>
					<a
						rel="prefetch"
						href="discussion/{discussion.id}">{discussion.title}</a>
				</h4>
				<span>{discussion.author.name} asked 1 day ago</span>
				<HashTags tags={discussion.tags} />
			</div>
			<Space />
			<div class="flex items-center">
				<AddComment20 />
				<span>{discussion.comments}</span>
			</div>
		</div>
	{/each}
</div>