Skip to content

Commit 667bf19

Browse files
technikhil314technikhil314
committed
fix: copy link to clipboard and navbar child added
1 parent ab3498f commit 667bf19

File tree

3 files changed

+109
-43
lines changed

3 files changed

+109
-43
lines changed

‎components/navbar.vue‎

Lines changed: 35 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,25 @@
11
<template>
22
<header class="fixed top-0 left-0 right-0 bg-white shadow-lg">
3-
<div class="container flex items-center h-full p-4 mx-auto">
4-
<div class="flex-shrink-0 mr-auto">
3+
<div class="container flex items-center h-full py-4 mx-auto">
4+
<div v-if="showBackButton" class="items-center mr-4">
5+
<NuxtLink to="/">
6+
<svg
7+
class="w-6 h-6"
8+
fill="none"
9+
stroke="currentColor"
10+
viewBox="0 0 24 24"
11+
xmlns="http://www.w3.org/2000/svg"
12+
>
13+
<path
14+
stroke-linecap="round"
15+
stroke-linejoin="round"
16+
stroke-width="2"
17+
d="M10 19l-7-7m0 0l7-7m-7 7h18"
18+
></path>
19+
</svg>
20+
</NuxtLink>
21+
</div>
22+
<div class="flex-shrink-0 mr-6">
523
<NuxtLink to="/">
624
<svg
725
height="40px"
@@ -23,9 +41,17 @@
2341
</NuxtLink>
2442
</div>
2543

44+
<div class="flex items-center justify-between flex-1">
45+
<div class="items-center">
46+
<slot name="left" />
47+
</div>
48+
<div class="items-center">
49+
<slot name="right" />
50+
</div>
51+
</div>
2652
<!-- buttons -->
2753
<nav class="contents">
28-
<ul class="flex items-center justify-end ml-4 xl:w-48">
54+
<ul class="flex items-center justify-end">
2955
<li class="relative inline-block ml-2 lg:ml-4">
3056
<a
3157
class=""
@@ -75,3 +101,9 @@
75101
</div>
76102
</header>
77103
</template>
104+
105+
<script>
106+
export default {
107+
props: ['showBackButton'],
108+
}
109+
</script>

‎pages/diff/_diff.vue‎

Lines changed: 50 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,56 @@
11
<template>
2-
<div class="h-full">
3-
<main class="h-full mt-24 xl:container">
4-
<div class="flex gap-4 mt-5">
5-
<div
6-
class="flex-1 p-4 overflow-y-auto border-2 rounded-sm max-h-screen--nav"
2+
<div class="w-full h-full">
3+
<Navbar show-back-button="true">
4+
<template v-slot:right>
5+
<button
6+
type="button"
7+
@click="copyUrlToClipboard"
8+
class="inline-flex justify-center px-4 py-2 text-white transition-transform transform bg-blue-600 rounded-md shadow-lg outline-none align-center focus:ring-4 active:scale-y-75"
79
>
8-
<p v-for="(lineDiff, index) in lhsDiff" :key="index">
9-
<span v-html="lineDiff"></span>
10-
</p>
10+
<svg
11+
class="w-6 h-6 mr-2"
12+
fill="none"
13+
stroke="currentColor"
14+
viewBox="0 0 24 24"
15+
xmlns="http://www.w3.org/2000/svg"
16+
>
17+
<path
18+
stroke-linecap="round"
19+
stroke-linejoin="round"
20+
stroke-width="2"
21+
d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
22+
></path>
23+
</svg>
24+
<span>Copy link</span>
25+
</button>
26+
</template>
27+
</Navbar>
28+
<div class="h-full">
29+
<main class="h-full mt-24 xl:container">
30+
<div class="flex gap-4 mt-5">
31+
<div
32+
class="flex-1 p-4 overflow-y-auto border-2 rounded-sm max-h-screen--nav"
33+
>
34+
<p v-for="(lineDiff, index) in lhsDiff" :key="index">
35+
<span v-html="lineDiff"></span>
36+
</p>
37+
</div>
38+
<div
39+
class="flex-1 p-4 overflow-y-auto border-2 rounded-sm max-h-screen--nav"
40+
>
41+
<p v-for="(lineDiff, index) in rhsDiff" :key="index">
42+
<span v-html="lineDiff"></span>
43+
</p>
44+
</div>
1145
</div>
12-
<div
13-
class="flex-1 p-4 overflow-y-auto border-2 rounded-sm max-h-screen--nav"
14-
>
15-
<p v-for="(lineDiff, index) in rhsDiff" :key="index">
16-
<span v-html="lineDiff"></span>
17-
</p>
18-
</div>
19-
</div>
20-
</main>
46+
</main>
47+
</div>
2148
</div>
2249
</template>
2350

2451
<script>
2552
import { urlDecode } from '../../helpers/utils'
2653
export default {
27-
layout: 'main',
2854
mounted() {
2955
const { diff: _diff } = this.$route.params
3056
const diff = JSON.parse(urlDecode(_diff))
@@ -63,5 +89,11 @@ export default {
6389
rhsDiff: this.rhsDiff,
6490
}
6591
},
92+
methods: {
93+
copyUrlToClipboard() {
94+
console.log('demo')
95+
navigator.clipboard.writeText(window.location.href)
96+
},
97+
},
6698
}
6799
</script>

‎pages/index.vue‎

Lines changed: 24 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,29 @@
11
<template>
2-
<div class="h-full">
3-
<main class="h-full mt-24 xl:container">
4-
<form @submit="checkForm" class="w-full h-full">
5-
<div class="flex flex-wrap w-full h-full gap-4">
6-
<textarea
7-
id="lhs"
8-
class="flex-1 h-full max-h-full rounded-md resize-none form-textarea"
9-
></textarea>
10-
<textarea
11-
id="rhs"
12-
class="flex-1 h-full max-h-full rounded-md resize-none form-textarea"
13-
></textarea>
14-
<div class="self-end w-full text-center">
15-
<button
16-
class="w-64 px-4 py-3 text-white transition-transform transform bg-blue-600 rounded-md shadow-lg outline-none focus:ring-4 active:scale-y-75"
17-
>
18-
Compare
19-
</button>
2+
<div class="w-full h-full">
3+
<Navbar />
4+
<div class="h-full">
5+
<main class="h-full mt-24 xl:container">
6+
<form @submit="checkForm" class="w-full h-full">
7+
<div class="flex flex-wrap w-full h-full gap-4">
8+
<textarea
9+
id="lhs"
10+
class="flex-1 h-full max-h-full rounded-md resize-none form-textarea"
11+
></textarea>
12+
<textarea
13+
id="rhs"
14+
class="flex-1 h-full max-h-full rounded-md resize-none form-textarea"
15+
></textarea>
16+
<div class="self-end w-full text-center">
17+
<button
18+
class="w-64 px-4 py-3 text-white transition-transform transform bg-blue-600 rounded-md shadow-lg outline-none focus:ring-4 active:scale-y-75"
19+
>
20+
Compare
21+
</button>
22+
</div>
2023
</div>
21-
</div>
22-
</form>
23-
</main>
24+
</form>
25+
</main>
26+
</div>
2427
</div>
2528
</template>
2629

@@ -30,7 +33,6 @@ import Vue from 'vue'
3033
import { urlEncode } from '../helpers/utils'
3134
const dmp = new DiffMatchPatch()
3235
export default Vue.extend({
33-
layout: 'main',
3436
methods: {
3537
checkForm(e: any) {
3638
e.preventDefault()

0 commit comments

Comments
 (0)