From 727cf8d753f455373e5e96822c9419464340c1a5 Mon Sep 17 00:00:00 2001
From: Matthew Penner <me@matthewp.io>
Date: Wed, 6 Jan 2021 09:19:08 -0700
Subject: [PATCH] LocationsContainer: make ID field CopyOnClick

---
 .../components/admin/locations/LocationsContainer.tsx    | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/resources/scripts/components/admin/locations/LocationsContainer.tsx b/resources/scripts/components/admin/locations/LocationsContainer.tsx
index 811783d01..1226ac430 100644
--- a/resources/scripts/components/admin/locations/LocationsContainer.tsx
+++ b/resources/scripts/components/admin/locations/LocationsContainer.tsx
@@ -1,3 +1,4 @@
+import CopyOnClick from '@/components/elements/CopyOnClick';
 import React, { useContext, useEffect, useState } from 'react';
 import getLocations, { Context as LocationsContext } from '@/api/admin/locations/getLocations';
 import FlashMessageRender from '@/components/FlashMessageRender';
@@ -102,12 +103,18 @@ const LocationsContainer = () => {
                                                             <RowCheckbox id={location.id}/>
                                                         </td>
 
-                                                        <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{location.id}</td>
+                                                        <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
+                                                            <CopyOnClick text={location.id.toString()}>
+                                                                <code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{location.id}</code>
+                                                            </CopyOnClick>
+                                                        </td>
+
                                                         <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
                                                             <NavLink to={`${match.url}/${location.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
                                                                 {location.short}
                                                             </NavLink>
                                                         </td>
+
                                                         <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{location.long}</td>
                                                     </TableRow>
                                                 ))