Add design preview

Author: rohitpaulk

app/components/course-admin/code-example-page/evaluation-card/prompt-tab.hbs

@@ -1,3 +1,7 @@
+<TertiaryButton class="mb-4" {{on "click" this.handleCopyPromptButtonClick}}>
+  Copy prompt
+</TertiaryButton>
+
 <div class="bg-gray-800 border border-gray-700 rounded overflow-y-auto relative flex-grow p-3">
   {{#if @evaluation.promptFileContents}}
     <pre class="font-mono text-xs text-white whitespace-pre-wrap"><code>{{ansi-to-html @evaluation.promptFileContents}}</code></pre>

app/components/course-admin/code-example-page/evaluation-card/prompt-tab.ts

@@ -1,3 +1,4 @@
+import { action } from '@ember/object';
 import Component from '@glimmer/component';
 import type CommunitySolutionEvaluationModel from 'codecrafters-frontend/models/community-solution-evaluation';
 
@@ -9,7 +10,16 @@ export interface Signature {
   };
 }
 
-export default class PromptTabComponent extends Component<Signature> {}
+export default class PromptTabComponent extends Component<Signature> {
+  @action
+  handleCopyPromptButtonClick() {
+    if (this.args.evaluation.promptFileContents) {
+      navigator.clipboard.writeText(this.args.evaluation.promptFileContents);
+    } else {
+      alert('Error, contact us at [email protected] if this keeps happening!');
+    }
+  }
+}
 
 declare module '@glint/environment-ember-loose/registry' {
   export default interface Registry {

app/components/course-page/course-stage-step/community-solution-card/content.hbs

@@ -84,4 +84,6 @@
       </div>
     </:header>
   </FileContentsCard>
-{{/each}}
+{{/each}}
+
+<CoursePage::CourseStageStep::CommunitySolutionCard::FeedbackSection class="pt-6 pb-3" />

app/components/course-page/course-stage-step/community-solution-card/feedback-section.hbs

@@ -0,0 +1,42 @@
+<div class="flex flex-col items-center gap-2" ...attributes>
+  <AnimatedContainer class="w-full">
+    <div class="text-sm text-gray-700 dark:text-gray-300 text-center w-full">
+      {{#animated-if this.tempHasVotedRecently use=this.transition duration=100}}
+        <p class="text-teal-500 font-medium">
+          Thanks for your feedback!
+        </p>
+      {{else}}
+        <p>
+          Was this helpful?
+        </p>
+      {{/animated-if}}
+    </div>
+  </AnimatedContainer>
+
+  <div class="flex items-center gap-1.5 flex-wrap">
+    <TertiaryButton
+      {{on "click" this.handleUpvoteButtonClick}}
+      class={{if this.tempHasDownvoted "opacity-50 hover:opacity-100 transition-opacity duration-100"}}
+    >
+      <div class="flex items-center gap-1">
+        {{svg-jar "thumb-up" class=(concat "w-5 " (if this.tempHasUpvoted "text-teal-500" "text-gray-400 dark:text-gray-600"))}}
+
+        <span class={{if this.tempHasUpvoted "text-teal-500" "text-gray-500"}}>
+          Yes
+        </span>
+      </div>
+    </TertiaryButton>
+    <TertiaryButton
+      {{on "click" this.handleDownvoteButtonClick}}
+      class={{if this.tempHasUpvoted "opacity-50 hover:opacity-100 transition-opacity duration-100"}}
+    >
+      <div class="flex items-center gap-1">
+        {{svg-jar "thumb-down" class=(concat "w-5 " (if this.tempHasDownvoted "text-red-600" "text-gray-400 dark:text-gray-600"))}}
+
+        <span class={{if this.tempHasDownvoted "text-red-600" "text-gray-500"}}>
+          No
+        </span>
+      </div>
+    </TertiaryButton>
+  </div>
+</div>

app/components/course-page/course-stage-step/community-solution-card/feedback-section.ts

@@ -0,0 +1,59 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { task, timeout } from 'ember-concurrency';
+import fade from 'ember-animated/transitions/fade';
+import { action } from '@ember/object';
+
+interface Signature {
+  Element: HTMLDivElement;
+}
+
+export default class CommunitySolutionCardFeedbackSectionComponent extends Component<Signature> {
+  transition = fade;
+
+  @tracked tempHasVotedRecently = false;
+  @tracked tempHasUpvoted = false;
+  @tracked tempHasDownvoted = false;
+
+  @action
+  handleDownvoteButtonClick() {
+    // No feedback if the user is "reversing" their vote
+    if (this.tempHasDownvoted) {
+      this.tempHasDownvoted = false;
+      this.tempHasVotedRecently = false;
+
+      return;
+    }
+
+    this.flashSuccessMessageTask.perform();
+    this.tempHasUpvoted = false;
+    this.tempHasDownvoted = true;
+  }
+
+  @action
+  handleUpvoteButtonClick() {
+    // No feedback if the user is "reversing" their vote
+    if (this.tempHasUpvoted) {
+      this.tempHasUpvoted = false;
+      this.tempHasVotedRecently = false;
+
+      return;
+    }
+
+    this.flashSuccessMessageTask.perform();
+    this.tempHasDownvoted = false;
+    this.tempHasUpvoted = true;
+  }
+
+  flashSuccessMessageTask = task({ keepLatest: true }, async () => {
+    this.tempHasVotedRecently = true;
+    await timeout(2000);
+    this.tempHasVotedRecently = false;
+  });
+}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    'CoursePage::CourseStageStep::CommunitySolutionCard::FeedbackSection': typeof CommunitySolutionCardFeedbackSectionComponent;
+  }
+}

app/components/course-page/course-stage-step/community-solution-card/header.hbs

@@ -20,11 +20,12 @@
   </div>
 
   <div class="flex items-center shrink-0">
-    {{#unless (eq @solution.user this.authenticator.currentUser)}}
+    {{! Remove, replace with buttons at the bottom of the card }}
+    {{!-- {{#unless (eq @solution.user this.authenticator.currentUser)}}
       <CoursePage::CourseStageStep::CommunitySolutionCard::UpvoteButton @solution={{@solution}} @metadata={{@metadataForUpvote}} class="mr-2" />
       <CoursePage::CourseStageStep::CommunitySolutionCard::DownvoteButton @solution={{@solution}} @metadata={{@metadataForDownvote}} />
       <div class="w-px h-3 bg-gray-200 dark:bg-white/5 mx-2"></div>
-    {{/unless}}
+    {{/unless}} --}}
 
     {{#if (gt @solution.approvedCommentsCount 0)}}
       <div class="flex items-center">